*特徴 [#td2cf0b5] -Facebookが開発したJSXを使う -リアクティブプログラミング -関数型言語(プログラミング) *必須条件 [#h0097ce6] HTML5対応のブラウザ *使いどころ [#x9260d05] 入力した値を即座に表示するような画面 *メリット [#l39f26a7] 規模が大きくなっても管理しやすいといわれている *紹介ブログ [#o12c6fd9] **出来る限り短く説明するReact.js入門 [#c9ea9210] 参考にしたサイト http://qiita.com/rgbkids/items/8ec309d1bf5e203d2b19 ***サンプルコード [#m8f918b6] https://gist.github.com/khayashi4337/05572e1da49c05e9fac6668b065dc6ec *部品 [#rcaf148c] http://elemental-ui.com/ * 試してみる [#tf3d114f] ** node.jsインストール [#w7cec886] *** node.js インストール [#t64ca64d] https://nodejs.org/en/ Node.jsをインストール 動作確認 コマンドプロンプトから下記のコマンドを実行します。 npm --version node.jsをインストールすれば、npmもインストールされます。 npm install -g react-tools srcのjsxファイルを変換しdestに保存 jsx -x jsx --watch src/ dest/ ** スケルトン [#p53d9aed] <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> </head> <body> // idを付けてdivを宣言してます <div id="content"> </div> // reactとreact-domのライブラリを読み込む <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js"> </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js"> </script> // babelを読み込む <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.10.3/babel.min.js"></script> <script type="text/babel"> </script> </body> </html> ** cliコマンドを使って、スケルトン作成 [#g91507f6] npm install -g create-react-app create-react-app my-app 以下のフォルダができる - node_modules - public - src 以下のファイルができる - package.json - package-lock.json - README.md とりあえずエディタは、VS CODE で、フォルダで、フォルダーを開くと、編集しやすいと思う。それは、さておき、 cd my-app いろいろと、いじくるので、gitでバックアップをとりはじめるならば、 git init git add . --all git commit -m 'first-commit' だろう * URLによる、ルーティング機能をあらかじめ、インストールしておこう。 [#fce11d4b] npm install react-router-dom --save * npm start の終了時の文字化け対策 [#s86a1a5d] git for windowで npm startをやると、最後に、文字化けで、おわってしまうが、これは、「バッチファイルを終了しますか Y/N」がUTF-8以外で、でているため。 なので、以下のコマンドで、UTF-8指定すると、この文言が、「Treminate bach job (Y/N)」に置き換わり、文字化けが出なくなる。 /c/Windows/System32/chcp 65001