*特徴 [#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

トップ   編集 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS