社内用Reactワークショップ / In-house React Workshop

12/1に開催した社内向けのReactワークショップの資料

CodeSandBox（触りたい方は、Forkしてからお願いします！）
https://codesandbox.io/s/2jw2l907wj

Transcript

1. React Workshop 2018/12/1
2. 今回のWorkshop - Reactの仕組みを理解する - Reactで「Hello World」する - ReactでQiitaの記事一覧を表示させてみよう！ 2
3. 今回のWorkshop - Reactの仕組みを理解する - Reactで「Hello World」する - ReactでQiitaの記事一覧を表示させてみよう！ 3
4. Reactって何？ - Facebook製のJavaScriptライブラリ (OSS) - 効率的にUIを構築するためのライブラリ - Virtual DOMによる高いパフォーマンス - 堅牢でメンテナンスしやすいコード 4
5. jQuery 手続き型でどんどん +α していくイメー ジなので、DOM要素が「今」どういう状況 であるかは気にしない よって規模が大きくなればなるほど、加 速的にコードが煩雑化する jQueryとの比較 React 常にDOM要素をプレーンなオブジェクト として保持している（Virtual DOM）ため、 状態を管理しやすい コンポーネントという単位で各UIパーツ を構成するため、規模が大きくなっても コードの見通しが良く管理しやすい 5
6. Virtual DOM ??
7. Virtual DOMとは？ Reactはオブジェクト（構造体）を基にHTMLを生成する このオブジェクトのことを 「Virtual DOM」 と呼ぶ 画面を更新したい場合、オブジェクトに変更を加えるだけ （メッセージの表示非表示・ページの切り替え etc...） Reactが変更を検知して、前のオブジェクトとの差分を算出し、差分を埋 めるようにパッチを当てて画面を更新する 7
8. 現在のDOM (Virtual DOM) <div>　　　　　　　　　 <span>Virtual DOM!</span> <span>Hello React<span/> </div> Virtual DOM に追加 <Message>　　　　　　　 <p>New Message!</p> </Message> 更新後のVirtual DOM <div>　　　　　　　　　 <span>Virtual DOM!</span> <span>Hello React<span/> </div> <Message> <p>New Message!<p> </Message> ここが更新前のDOMとの差分！ React内部で、この差分を補うよう なDOMの操作を行う
9. つまり、Reactが保持しているオブジェクトを変更す るだけで、DOMに反映される！
10. Reactが保持しているオブジェクトは 「コンポーネント」 という単位で管理することができる
11. コンポーネントとは？ 「再利用が可能なUIパーツ」というイメージ 複数のコンポーネントを1つのコンポーネントにまとめることも可能 コンポーネントは関数やクラスとして実装することができる クラスとして実装した場合、 そのコンポーネントは「状態」を保持する 11
12. 今回のWorkshop - Reactの仕組みを理解する - Reactで「Hello World」する - ReactでQiitaの記事一覧を表示させてみよう！ 12
13. 実際にエディタ上でReactに触れてみよう！ https://codesandbox.io/s/2jw2l907wj 左上の「Fork」から各々コードを触ってみてください！
14. 今回のWorkshop - Reactの仕組みを理解する - Reactで「Hello World」する - ReactでQiitaの記事一覧を表示させてみよう！ 14
15. 環境構築 1. npm -v (v >= 5.2.0) 2. npx create-react-app react-workshop 3. cd react-workshop 4. yarn start 15
16. 記事一覧を表示する時の考え方 - Reactでは「UIパーツ」をコンポーネントとして扱う - 記事の一覧も、Webページの一パーツとして捉える事が出来る - タイトル・URL・投稿したユーザーなどを一覧表示する 「記事一覧」(ArticleList) というコンポーネントを作ると良さそう - ArticleListコンポーネントが描画されたタイミングでAPIを叩く必要がありそう → どうやって描画されたタイミングを取得する？ 16
17. Reactのライフサイクル - Reactには「ライフサイクル」という概念が存在する - コンポーネント毎にライフサイクルが存在している - 「コンポーネントのマウント」「コンポーネントの更新」といった任意のタイミング に、処理をフックさせることが出来る - コンポーネントが初期描画された際に一回だけ、APIを叩く処理を行う場合は 「componentDidMount」を使用する 17
18. https://twitter.com/dceddia/status/999670221165203457
19. 実際にコードを書いてみよう！！
20. Advanced - Articleコンポーネントを作成し、複数のArticleコンポーネントから成るArticleList コンポーネントにしてみよう！ - 記事の表示・非表示を切り替えてみよう！ - 簡易な検索機能をつけてみよう！ - 色々いじってみよう！！ 20