はぜにっき

日記です。(毎日更新ではない)

Reactの雰囲気はわかってきたけどサクッと画面作れるっていうレベルになるまでは結構時間かかりそう

hazediary.hateblo.jp

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 -ypackage.json が生成される
    • package.jsonscripts が便利

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でロジックを定義する部分