React勉強1日目

本で読んで実習していく形にする
「モダンJavaScriptの基本から始めるReact実践の教科書」
チャプター、付録合わせて10個なので、1日2こペース目標

1.Reactを始める前に知っておきたいモダンJavaScriptの基礎

• モダンJavaScriptとは

  • 仮想DOM

  • React,Vue,Angular

  • パッケージマネージャ(npm/yarn)

  • モジュールハンドラー(webpack…)

  • トランスパイラ(Babel…)

  • SPA(SinglePageApplication)

2.DOM 仮想DOM

• Document Object Model HTMLを木構造で表現したもの

• 仮想DOM

  • Javascriptのオブジェクトでつくられた仮想的なDOM

  • 実際のDOMと、仮想DOMの差分更新を行う

3.パッケージマネージャ(npm/yarn)

• パッケージの管理・インストール・アップグレード等をしてくれる管理ツール

• JavaScript npm / Ruby gem / php composer …

• package.json(設計書)→展開→「node_modules」(＊githubにはあげない)

• package-lock.json / yarn.lock 展開時に自動で生成される。依存関係、バージョンの解決

• NPM:パッケージの公開レジストリ

• npm install [パッケージ名]　／　yarn add [パッケージ名]

• (package.json/package-lock.json) ➡ npn install / yarn install ローカル環境に「node_modules」フォルダに展開される

4.ECMAスクリプト

• javascriptの標準化 ECMA ECMA6からモダンJavaScriptとよばれる

5.モジュールバンドラー、トランスパイラ

• モジュールバンドラー

  • ビルドして、JavaScriptモジュールを１ファイルにまとめてくれる　webpack …

• トランスパイラ

  • JSX記法(Reactの記法)でかかれたJavascriptファイルをブラウザが認識できる形に変換する　Babel…

• Vite　ビルドツール

6.SPAとは

• シングルページアプリケーション

  • サーバサイドへの通信は、差分データのみのやりとりになり、ページのリフレッシュがおこらない状態で画面を変換していくので、HTMLページが１ページ（single）になる