前提
Reactについて学んだことを書いていきます。
本題
Reactとは
React.js とは、UI のパーツを作るためのViewの機能を提供するライブラリ。
Facebook が OSS として公開している。
特徴
Reactには、JSXという記法がある。
JavaScriptの構文でDOM要素を操作しようとすると読むのが大変だが、JSXによってHTMLとJavaScriptが合体することでDOM要素の設計図を人間が読みやすくなる。
差分だけ表示するため早い
Reactは、何らかの理由でページが書き換わったことを自動的に検知して、差分だけを再表示してくれるため、表示がとても早い。
単方向データフロー
Reactは、基本的に親コンポーネントから子コンポーネントにデータが一方通行で渡っていく。
この一方通行という思想があるおかげで、DOM要素間でデータの不整合が出ないよう管理しやすくなる。
Reactインストール
まずは、nodeとnpxがインストールされているか確認。
terminal.
$ node -v
$ npx -v
Reactアプリ作成
terminal.
$ npx create-react-app アプリ名
...
...
success Uninstalled packages.
✨ Done in 4.61s.
Initialized a git repository.
Success! Created アプリ名 at /Users/username/Desktop/works/アプリ名
Inside that directory, you can run several commands:
yarn start
Starts the development server.
yarn build
Bundles the app into static files for production.
yarn test
Starts the test runner.
yarn eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd アプリ名
yarn start
Happy hacking!
これでインストール完了！
作成したアプリケーションに移動し、サーバーを立ち上げる！
terminal.
$ cd アプリ名
$ npm start
localhost:3000にアクセスしReactの画面が立ち上がれば完了！