7月末にパンダの本でReactをちょっとやったんだけど、完全に記憶から消し飛んでいたからもう一回やりました。
最後はそれのメモが書いてあります。参考になれば。
タイトルの話
とりあえずイメージしている画面をサクッと作れるようになるまではひたすら演習っぽい感じでUIを作り続けるしかなさそう semantic-ui-reactしか使ってないけど、それっぽい感じの画面になるしひとまず慣れるまではこれで良いか感
ひとまずまだ本読みながら演習やるしかしてないから、自分で適当にAPIとUI考えて作ってみよう
React.Component
- 表示要素の単位。UIとロジックをまとめて定義してる
Props
State
- コンポーネントにおける状態をあらすための変数
- constractorで初期値をセットする
ライフサイクル
- Componentが
- Mountされたら
- Unmountされたら
- Propsを受け取ったら
- Updateされたら
- など
- を条件にして実行されるメソッド群を使って、ライフサイクルに沿った処理を行うことで画面を描画したり変更したりする
shouldComponentUpdate(nextProps, nextState)
- 基本的に, propsやstateが変更されたらComponentは再レンダリングされるが、しなくても良い場合があったりする
- shouldComponentUpdateはprops, stateが変更されたら呼ばれて、trueを返却したらレンダリングして、falseを返すと何もしないように処理を分けることができる
this.props.foo !== nextProps.foo
みたいな条件でやっていく
npm init -y
でpackage.json
が生成される- package.jsonの
scripts
が便利
- package.jsonの
npmでとってくるものたち
$ npm i react@16.2.0 react-dom@16.2.0 $ npm i react-router@4.2.0 react-router-dom@4.2.2 $ npm i semantic-ui-react@0.78.3 $ npm i axios@0.18.0
$ npm i -D @types/react@16.0.40 @types/react-dom@16.0.4 $ npm i -D @types/react-router@4.0.22 @types/react-router-dom@4.2.4 $ npm i -D typescript@2.7.2 ts-loader@4.0.1 $ npm i -D webpack@4.1.1 webpack-cli@2.0.10 webpack-dev-server@3.1.0
$ npm i -D tslint@5.9.1 $ npm i tslint-config-typings@0.3.1
- react-router: routing機能のパッケージ
- semantic-ui-react: UIコンポーネントのパッケージ
- axios: httpクライアント
使うAPI Server
https://us-central1-haze-development.cloudfunctions.net/v1
Endpoint
/channels/:cname/messages
- GET: メッセージ一覧の取得
- POST: メッセージ送信
ディレクトリ構成
. ├── dist │ ├── img │ │ └── avatar.png │ ├── index.html │ └── js ├── package-lock.json ├── package.json ├── src │ ├── Routes.tsx │ ├── client.ts │ ├── components │ │ ├── ChannelList.tsx │ │ ├── MessageFeed.tsx │ │ ├── MessageForm.tsx │ │ └── index.ts │ └── containers │ ├── Channel.tsx │ └── index.ts ├── tsconfig.json └── webpack.config.js + node_modules
dist/
が実際にブラウジングする際に使われるところdist/js/
にbuildされたjsが吐かれる
src/components
がcomponentsでsrc/containers
がcomponentsを束ねた上位のcomponentでロジックを定義する部分