Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

00abd6de977630fc827ab520f693bbbd?s=47 Toxoxi
December 01, 2018

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

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

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

00abd6de977630fc827ab520f693bbbd?s=128

Toxoxi

December 01, 2018
Tweet

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