コンテンツにスキップ

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
    • constlet の違いがよくわからん
    • 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 が出た

https://stackoverflow.com/questions/63740774/converting-from-react-js-to-react-tsx-property-id-does-not-exist-on-type-neve

interfaceを設定してその型のリストをuseStateの期待する型としたうえで初期値を空のリストにしないと、
異なる型のリストをnever扱いにしてしまうのでmapの先の処理で TS2339 が出る。

入力ダイアログ(モーダル)を作る

Material UIの場合は Modal を使うんじゃなくて、もっと便利な Dialog を使いな、って話。


最終更新日: 2021-06-06 09:29:57