{{tag>book}}

====== Pure React ======

10 15 26 36 50 60 141 150 207

Reactはいくつものライブラリを同時に使う。

これは学びやすさとは程遠い。
学ぶときには1つずつやったほうがわかりやすい。

だからReactだけに集中した、という趣旨の本。

読む前にjavascriptを理解しておく必要があるとのことなので後回し…どこまでがjsでreactなのかわからなくなるから。

===== Hello world =====

JSXはhtmlライクな文法？で、jsに変換される。DOMエレメントを作る。変換するために使うのがbabel。

===== Tweet =====

無名関数だとreturnや{}を省略できる。記法が用意されてる。arrow function

letはmutable、varはimmutable

すげえ…一気にできていく…。

===== Props =====

htmlエレメントはattributesを持つ。Reactコンポーネントはprops(=properties)を持つ。違う名前だが本質的に同じもの。

関数が引数を持つとき、コンポートネントはpropsを持つ。

===== Tweet With Props =====

すごいな出来た…。

演習で便箋も作れた。クレカもやりたかったが時間ないのでスキップ。

childrenの説明がよくわからず。エクササイズも飛ばす。

===== GitHubのファイルリスト =====

GitHubのファイルリストを作る。childrenのことがなんとなくわかる。

===== clickカウンタ =====

はじめて状態を保存するやつだがあまりよくわかってない。
123

134演習ぜんぜんわからん。ヒントなさすぎでは…。

146演習3未

===== 外からの状態変化 =====

Accrodion自体は自身がisOpenか知る必要がない。外の状態によって変化する…。

自動リロード

<code>npm install -g nodemon</code>
<code>npm install -g livereload</code>

package.jsonのscriptに追加。
<code>"live": "nodemon src/index.js"</code>

<code>npm start</code>
<code>livereload . -w 1000 -d</code>

ブラウザのlivereloadボタンを押す。

[[https://www.it-swarm-ja.tech/ja/node.js/nodejs%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%81%AB%E3%83%A9%E3%82%A4%E3%83%96%E3%83%AA%E3%83%AD%E3%83%BC%E3%83%89%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B%E3%81%AB%E3%81%AF%E3%81%A9%E3%81%86%E3%81%99%E3%82%8C%E3%81%B0%E3%82%88%E3%81%84%E3%81%A7%E3%81%99%E3%81%8B/832890753/|node.js — nodejsサーバーにライブリロードを追加するにはどうすればよいですか]]

===== 状態保存 =====

reducerを使う。Reduxはグローバルな状態保存＋コンテキストで、また使いどころが違う…らしい。

172の演習問題。

236の演習問題。