特徴

必須条件

HTML5対応のブラウザ

使いどころ

入力した値を即座に表示するような画面

メリット

規模が大きくなっても管理しやすいといわれている

紹介ブログ

出来る限り短く説明するReact.js入門

参考にしたサイト

http://qiita.com/rgbkids/items/8ec309d1bf5e203d2b19

サンプルコード

https://gist.github.com/khayashi4337/05572e1da49c05e9fac6668b065dc6ec

部品

http://elemental-ui.com/

試してみる

node.jsインストール

node.js インストール

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/

スケルトン

<!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

以下のフォルダができる

以下のファイルができる

とりあえずエディタは、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
トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2019-06-17 (月) 15:53:58 (176d)