react-query ・サーバーからのデータ取得回数を減らす(fetch) （キャッシュに格納する） ・不要な再レンダリングを無くす 従来のstate管理 ●State management(useState, redux store) ・Server data(REST APIから取得したデータ) ・React app state(ローカル…

カスタムフックとは ・hooksの各機能を使用 ・コンポーネントからロジックを分離 ・使い回し、テスト容易、見通しが良くなる ・自由に作成できる カスタムフックなしで実装 $ mkdir ./src/components $ mkdir -p ./src/types/api $ touch ./src/components/U…

基本的な型 $ npx create-react-app <プロジェクト名> --template typescript /* eslint-disable @typescript-eslint/no-unused-vars */ /** TypeScriptの基本の型 */ // boolean let bool: boolean = true; // number let num: number = 0; // string let s…

グローバルなstate管理 グローバルなstate管理あり・なしで管理者の時は編集リンクを表示させ、 一般ユーザの時は編集リンクを表示させないことを実装する ツラい実装 まずはグローバルなstate管理なしで管理者の時は編集リンクを表示させ、 一般ユーザの時…

Atomic Designとは ・Brad Frost氏が考案したデザインシステム ・画面要素を５段階に分け、組み合わせることでUIを実現 ・コンポーネント化された要素が画面を構成しているという考え方 ・React、Vue用というわけではない ・モダンJavaScriptと相性がいい 5…

ページ遷移 // BrowserRouter このコンポーネントで囲った配下でルーティングを有効にする import { BrowserRouter, Link, Switch, Route } from "react-router-dom"; import { Home } from "./Home"; import { Page1 } from "./Page1"; import { Page2 } fr…

JSX // { } でJavaScriptの記法と認識される <button onClick={}>ボタン</button> // 外側の{ } はJavaScriptの記法と認識される // 内側の{ } はJavaScriptのオブジェクトのこと <h1 style={{ color: 'red' }}>こんにちは!</h1> イベント発火 export const App = () => { const onClickButton = () => alert(); return ( <div> <button onClick={onClickButton}></button></div>…

環境構築 npx create-react-app --scripts-version バージョン アプリ名 バージョン確認方法 npm info create-react-app 構築できたか確認（自動で立ち上がる） yarn start 基本 import React, { useState } from 'react'; const [count, setCount] = useSta…

構築 npx create-react-app . --template typescript npm start 立ち上がっていればOK 必要なライブラリをインストール npm i @material-ui/core npm i @material-ui/icons npm i firebase npm i react-router-dom @types/react-router-dom npm start 型をイ…