2019/07/19の勉強会で発表されたものです

1. Hello, React!! まで導く
Reactの基礎
2019年7月19日 ふみたろう

2. Reactとは？
• UI構築のためのJavaScriptライブラリ
→ 効率的にUI構築が可能

3. Reactの特徴は？
1. 開発途中から導入可能
2. シングルページアプリケーション（SPA）
3. コンポーネント指向
4. 仮想DOM

4. 開発途中から導入可能
• 開発途中から利用することを念頭において開
発された
• 新しい機能（UI）を追加するとき、既存のコ
ードを書き換えることなく、部品単位で追加
可能

5. Reactの特徴は？
1. 開発途中から導入可能
2. シングルページアプリケーション（SPA）
3. コンポーネント指向
4. 仮想DOM

6. SPA
• サーバにリクエストを送ることなくレンダリ
ングするアプリケーション
• ブラウザに左右されない多彩なUIの実現
• 高速なページ遷移でパフォーマンスの向上

7. Reactの特徴は？
1. 開発途中から導入可能
2. シングルページアプリケーション（SPA）
3. コンポーネント指向
4. 仮想DOM

8. コンポーネント指向
• 部品単位で管理することができる
• UIひとつひとつを部品化して管理することが
可能

9. Reactの特徴は？
1. 開発途中から導入可能
2. シングルページアプリケーション（SPA）
3. コンポーネント指向
4. 仮想DOM

10. 仮想DOM
• メモリ上にDOMの状態を仮想DOMとしてキャ
ッシュしておき、差分発生時にDOMに差分の
みを反映させる仕組み
• 必要な部分だけが更新されるため、非常に高
速で効率的

11. React導入方法
1. homeblewのインストール（割愛）
2. パッケージマネージャ(yarn)のインストール
3. ディレクトリ作成・移動（割愛）
4. React雛形Appの作成
• 1、3項については割愛

12. パッケージマネージャの
インストール
• homeblew入ってるよね（威圧）
• $ brew install yarnを実行
• 必要なNode.js*1もついでにインストールしてくれる
• これだけでOK！
*1 サーバサイドJavaScript

13. React雛形APPの作成
• ディレクトリ作った？移動した？洗った？
• yarn create react-app sample-app --typescript
を実行
• —typescriptがなければjsベースでプロジェクト
が作られる
• これだけでOK！

14. 起動確認
• まずは、プロジェクトディレクトリに移動
• $ yarn startを実行
• 自動で3000番ポートでアプリが起動して、ペ
ージが表示される

15. アプリの編集
• 開いたページに書いてある、src/App.tsxを編
集して保存する
• アプリサーバは立てたままでもOK！
<p>
Edit <code>src/App.tsx</code> and save to reload.
<p>
↓
<p>
Hello, React!!
<p>

16. Hello, React!!

17. 最後に
• App.tsxがメイン部分
• .tsxファイルでUIを管理
• 作成済みアプリをローカル環境で動作させる
場合は初めに「$ yarn install」コマンドを使用

18. ご清聴
ありがとうございました。