buto > /dev/null

だいたい急に挑戦してゴールにたどり着かずに飽きる日々です

2021-09-01から1ヶ月間の記事一覧

react setState反映タイミングを調べてみる

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

react typeで型定義して使い回す

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

react Material-UI入門

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-…

react useEffectでライフサイクル入門

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

react コンポーネントでstate共有(カスタムフック)

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

react useState入門

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

React再入門<<急がば回れ>>

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