- 追加された行はこの色です。
- 削除された行はこの色です。
*特徴 [#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
