「react」タグアーカイブ

face-api.jsで顔認識

tensorflow.jsを使って顔認識がしたいと思っていたら、face-api.jsなるものを発見。簡単に使えたのでメモとデモ。

face-api.js: 0.10.0
tensorflow/tfjs-core: 0.11.9

試したのはRails上のReactだけれども、単なるnode.jsでも同じ。

続きを読む →

Rails 5.2.0 + React + css

Rails 5.2.0（Rails 5.1以降）でReactを使う上でwebpackerによるcssの読み込みのメモ

参考の補足程度（config/webpack/environment.jsを触る必要なかった）

  • 作成するcssは拡張子.cssでも.scssでもよさそう（.cssでOKだった）
  • 作成する場所はapp/javascript/packsでなくてよい（app/javascript/stylesheetsに作成してOKだった）
  • 作成するcssのファイル名は.module.cssにする（参考リンク先のようにhello-react.module.sassなどとする）
  • 利用したいjsxでimportする（親子jsxどこでも気にせずimportする）
  • 呼び出すhaml, erbでstylesheet_pack_tagを記述するが、この時親jsxを指定する（stylesheet_pack_tagを記述しないと読み込まれない）

これで実際に読み込まれたhtmlソースを見るとcss-loaderを使った時のように「class=”unQ5pyAarpPHnB5enco5W“」となっており、スタイルが適用されていることも確認出来る。

react-railsでimport

せっかくrailsでもreactでcomponent化しているのに再利用したい。

ということでreact-railsを使っている場合に他のcomponentをimportする方法のメモ。

//= require ./components/SubComponent
class MainComponent extends React.Component {
  constructor(props) {
    super(props)
  }
}

相対パスで指定。拡張子「.jsx」は省略して大丈夫でした。

react-bootstrap-tableでselect入力項目のvalueとtext

react-bootstrap-tableのselect入力項目のkey,valueを設定する方法のメモ。

editableでtype: ‘select’でvaluesを設定する方法は公式のドキュメントであるけれども、valueとtextを使う方法が記載されておらずソースを見て調査。

class Kind extends React.Component {
  constructor() {
    super()
    this.state = {
      kinds: [{value: 1, text: '種類A'}, {value: 2, text: '種類B'}, {value: 3, text: '種類C'}]
    }
  }

  render() {
    return (
      <div>
        <BootstrapTable>
          <TableHeaderColumn dataField='kind' editable={{type:'select', options: {values: this.state.kinds}}} dataFormat={}>種類</TableHeaderColumn>
        </BootstrapTable>
      </div>
    )
  }
}

key項目とか記載省略。テーブル上の表示はdataFormatなどで加工する必要があるかも。