From JavaScript to Reactを読む
https://nextjs.org/learn/foundations/from-javascript-to-react
9ページある
1ページ目
https://nextjs.org/learn/foundations/from-javascript-to-react
レンダリングのこと
DOM とはなにか
2ページ目
https://nextjs.org/learn/foundations/from-javascript-to-react/updating-ui-with-javascript
JS と DOM のメソッドでUIを更新する
HTML と DOM
3ページ目
https://nextjs.org/learn/foundations/from-javascript-to-react/getting-started-with-react
React での始め方
JSX について
Babel をプロジェクトに追加する
JSX は JS にコンパイルが必要
4ページ目
https://nextjs.org/learn/foundations/from-javascript-to-react/essential-javascript-react
React には JS が必要
関数とアロー関数
オブジェクト
配列と配列メソッド
Destructuring (破壊?) - MDN
テンプレートリテラル
三項演算子
ESモジュールと Import/Export 構文
5ページ目
https://nextjs.org/learn/foundations/from-javascript-to-react/react-core-concepts
React のコアコンセプト
Components
Props
State
6ページ目:Componentsについて
https://nextjs.org/learn/foundations/from-javascript-to-react/building-ui-with-components
コンポーネントの作り方と使い方
7ページ目:Propsについて
https://nextjs.org/learn/foundations/from-javascript-to-react/displaying-data-with-props
Props を使って情報を表示する
Props はオブジェクトなので関数パラメータに { } で中身を渡せる
出力するときは{} で囲む(↑と別物)
Props はコンポーネントに情報を渡すためのもの
8ページ目:Stateについて
https://nextjs.org/learn/foundations/from-javascript-to-react/adding-interactivity-with-state
ステートと対話性の追加
イベントをリッスンする
イベントの処理:handleClick
状態とフック
状態の管理方法
9ページ目:つぎ
https://nextjs.org/learn/foundations/from-javascript-to-react/continue-learning-react
React の学習を継続する方法
レンダリングのこと
参照( ref )のこと
State の管理方法
入れ子のデータ
API フック