React introduntion
- 2. React 入門
- 5. もくじ 1. Reactとは 2. Reactの特徴 3. プロジェクトを作ろう 4. JSXとは 5. componentとは 6. Reduxとは
- 6. 1. Reactとは 2. Reactの特徴 3. プロジェクトを作ろう 4. JSXとは 5. componentとは 6. Reduxとは
- 8. 1. Reactとは 2. Reactの特徴 3. プロジェクトを作ろう 4. JSXとは 5. componentとは 6. Reduxとは
- 10. コンポーネント指向とは コンポーネント = UIを部品化したもので ページを構成する ← つまり、こういうこと
- 17. なんで仮想DOMは速いの？
- 21. 1. Reactとは 2. Reactの特徴 3. プロジェクトを作ろう 4. JSXとは 5. componentとは 6. Reduxとは
- 22. HackMDの資料へ！
- 23. 1. Reactとは 2. Reactの特徴 3. プロジェクトを作ろう 4. JSXとは 5. componentとは 6. Reduxとは
- 30. 1. Reactとは 2. Reactの特徴 3. プロジェクトを作ろう 4. JSXとは 5. componentとは 6. Reduxとは
- 37. 1. Userという関数コンポーネント(親)を作る 2. Userにname属性、email属性を持たせる 3. Userを描画する関数コンポーネントAppを作る 4. Appコンポーネント内で、Userコンポーネント （子）を呼び出し、描画の際にname属性、email 属性に具体的な値を持たせる。 やること
- 39. やること 1. Counterクラスコンポーネントを作る 2. CounterをConstructorで初期化 3. 初期化の際にstateの設置 4. countUpというstateを更新するメソットを作る 5. renderでstateの値を表示する 6. countUpメソットを実行するボタンを作る
- 40. Counterを別ファイルに！ 1. App.jsと同じ階層にCounter.jsを作る 2. Counter.jsにCounter Classを移動 3. Counter Classをexport 4. App.jsでCounter Classをimport
- 42. 休憩(10分)
- 43. 1. Reactとは 2. Reactの特徴 3. プロジェクトを作ろう 4. JSXとは 5. componentとは 6. Reduxとは
- 44. Redux Set Up
- 48. Reduxの仕事 1. 共通の値の保存場所storeの管理。 2. 管理というのは、 • storeの用意 • 各componentでのstoreの呼び出し • storeの更新
- 50. Reduxの構成要素 A. state … storeに入っている値 B. store … 共通データの保管庫 C. provider … storeを各componentに受け 渡す仕組み D. reducer … stateを変更する仕組み E. Action … アプリケーションで何が起きたか を示すデータ
- 55. Actionの用意手順 1. src/actionsを作る 2. actions/index.jsを作る 3. index.jsにactionを書いていく 4. countUp,coutDownのActionを書く 5. それぞれのActionをexportする
- 60. storeとは • 共通データの保管庫 • アプリケーションに一つしかないもの • どのコンポーネントからも呼び出せる
- 61. storeの用意の手順 1. src/index.jsを編集 2. createStoreをimport 3. prodiverをimport 4. reducerをimport 5. createStoreを使って、storeを定義 6. Providerを使って、storeを各コンポー ネントから参照できるようにする。
- 64. 描画できたら、おわり！