React¶
永遠に入門している。
大体いつも作りたいものは管理画面なので、自分の中にセットを作っておきたいという思い。
Quick start¶
- OS: ubuntu 20.04 LTS
- node: v10.19.0 (from apt)
- npm: 6.14.4 (from apt)
https://qiita.com/ekzemplaro/items/10e8c1a08fa897a18cf0
https://bezkoder.com/react-crud-web-api/
$ sudo apt install -y nodejs npm
$ sudo npm install -g create-react-app
$ create-react-app --version
3.4.1
$ create-react-app hello-world
# Typescriptにする場合: $ create-react-app hello-world --template typescript
$ cd hello-world
$ npm start
UI Framework¶
Material-UI¶
npx create-react-app material-ui-sandbox --template typescript
cd material-ui-sandbox
npm install @material-ui/core
react-admin¶
npx create-react-app react-admin-sandbox --template typescript
cd react-admin-sandbox
npm install react-admin
Routing¶
npm install --save react-router-dom
でインストールする。
以下のように使う。パスの細かい指定ルールは https://reactrouter.com/web/api/Route/path-string-string を見る。
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
...
<snip>
...
return (
<Router>
<Switch>
<Route path="/products" component={ProductPage} exact />
<Route path="/products/:id" component={ProductInfoPage} exact />
<Route path="/support" component={SupportPage} exact />
<Route path="/" component={HomePage} exact />
</Switch>
</Router>
)
Output¶
コンソールログに吐く¶
console.log("a")
map(JSON)を文字列として出力する¶
Reactとは無関係に JSON.stringify(map)
を使う
REST APIを叩く¶
npm install --save axios
でインストールする。
- この動画が凄く参考になる: https://www.youtube.com/watch?v=12l6lkW6JhE
const
とlet
の違いがよくわからん- apiをコンポーネントにするより、描画パーツとAPIをセットにした方が良さそう
- BaseURLの設定はApp.tsxにするのが適切っぽい?
- その場合、コンポーネントにapiをpropとして渡すことになる?
- Typescriptでも
this.
で書けるの?
- React.FC は関数型だからconstructorは無い
- 巷のサンプルコードはJSかつクラスベースが多くて混乱する
単にGETしてコンソールログに吐くだけ¶
import React, { useEffect } from "react";
import axios from 'axios';
function App() {
const url = 'http://localhost:3001/services';
useEffect(() => {
const fetch = async () => {
const response = await axios.get(url)
console.log(response.data)
}
fetch()
}, [])
return();
}
GETしたデータをrenderに使いたい¶
import React, { useState, useEffect } from "react";
import axios from 'axios';
function App() {
const url = 'http://localhost:3001/services';
const [response, setResponse] = useState({});
useEffect(() => {
const fetch = async () => {
const response = await axios.get(url)
setResponse(response.data)
}
fetch()
}, [])
return({JSON.stringify(response)});
}
GETしたデータをrenderにmapして使ったら Property 'id' does not exist on type 'never'. TS2339
が出た¶
interfaceを設定してその型のリストをuseStateの期待する型としたうえで初期値を空のリストにしないと、
異なる型のリストをnever扱いにしてしまうのでmapの先の処理で TS2339 が出る。
入力ダイアログ(モーダル)を作る¶
Material UIの場合は Modal を使うんじゃなくて、もっと便利な Dialog を使いな、って話。
最終更新日: 2021-06-06 09:29:57