昨日の記事でMaterial-UIのTableを使ってオブジェクト配列を持つstate変数の値を表示しましたが 最初にsetState()でセットしたオブジェクトが表示されていませんでした components/DataTable.tsx useItem.tsxで取得したstate変数をDataTable.tsxで定義したst…

typeでオブジェクト型を定義する typescriptではtypeキーワードで作成したオブジェクトを型として扱うことができます 「key: プリミティブ型」の書き方で定義していきます type Item = { id: number, category: string, item: string, price: number }; API…

Material-UIはreactで利用できるデザインライブラリです 早速インストールして使ってみます！ yarn add @material-ui/core@next @emotion/react @emotion/styled could not find a declaration file for module 'react/jsx-runtime' 上記コマンドでMaterial-…

今日はuseEffectフックを使って関数を実行するタイミングを操作します useEffectフック useEffect(() => {実行したい処理}, [state変数]); このように書くとstate変数が変更されたタイミングで実行したい処理が実行されます 第2引数（[state変数]のところ）…

昨日はuseStateを使って入力した名前を画面に表示するところまでできました 今日はstateをロジック処理に移動、入力コンポーネントと表示コンポーネントを分けます コンポーネント間でstate変数を共有する方法は何種類もありそうでしたが、カスタムフックを…

昨日に引き続きreactHooksの練習をします まずはよく使うuseStateから！！ useStateフック state変数とsetState関数の定義をするフック（API）です 「useState<型>(初期値)」で使います const [name, setName] = useState<string>('risa'); ＜練習＞state変数に初期</string>…

モダンJSについてほぼ忘れたので今日はReactのそもそもを学び直します プロジェクト作成 せっかくなのでTypeScriptバージョンの記事にならいました React × TypeScript 入門 私の環境ではcreate-react-appのバージョンが4.0.3だったので--templateが必要でし…