カスタムフックとは ・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>…