特徴 †
- Facebookが開発したJSXを使う
- リアクティブプログラミング
- 関数型言語（プログラミング）
必須条件 †
HTML5対応のブラウザ
使いどころ †
入力した値を即座に表示するような画面
メリット †
規模が大きくなっても管理しやすいといわれている
紹介ブログ †
出来る限り短く説明するReact.js入門 †
参考にしたサイト
http://qiita.com/rgbkids/items/8ec309d1bf5e203d2b19
サンプルコード †
https://gist.github.com/khayashi4337/05572e1da49c05e9fac6668b065dc6ec
部品 †
試してみる †
node.jsインストール †
node.js インストール †
Node.jsをインストール
動作確認
コマンドプロンプトから下記のコマンドを実行します。
npm --version
node.jsをインストールすれば、npmもインストールされます。
npm install -g react-tools
srcのjsxファイルを変換しdestに保存
jsx -x jsx --watch src/ dest/
スケルトン †
<!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コマンドを使って、スケルトン作成 †
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による、ルーティング機能をあらかじめ、インストールしておこう。 †
npm install react-router-dom --save
npm start の終了時の文字化け対策 †
git for windowで npm startをやると、最後に、文字化けで、おわってしまうが、これは、「バッチファイルを終了しますか Y/N」がUTF-8以外で、でているため。
なので、以下のコマンドで、UTF-8指定すると、この文言が、「Treminate bach job (Y/N)」に置き換わり、文字化けが出なくなる。
/c/Windows/System32/chcp 65001
Last-modified: 2019-06-17 (月) 15:53:58 (1775d)