■stateをオブジェクトとしてまとめて取り扱うプロセス import { useState } from "react"; export default function App() { const [state, setState] = useState({ pip: false, playing: true }); return ( <div className="App"> <p>あああ</p> </div> ); } このようにstateをオブジェクト形…

ディベロッパーツールの「要素」から「プロパティ」をみると、非常に興味深い状態になっていた。

コードに悩む場面の多くが、Typescriptで遭遇するエラーが理解できないときである。 明示的な型定義の本の一部だけしか理解していなかったためである。色々調べてみた。 React + TypeScript に入門したので基本をまとめてみた https://cloudpack.media/57935…

■まずはRefについて Refとは、renderメソッドで作成されたDOMノードもしくはReact要素の参照を保持するオブジェクトであり、Refオブジェクトのcurrent属性を参照することでノードにアクセスできる。 Refを利用するユースケースは以下。 フォーカス、テキスト…

（参考URL） next.js + typescript で Redux Toolkit を使う最小サンプル Getting Started with Redux（公式） Redux Toolkit TypeScript Quick Start Next.js + typescript のインストール npx create-next-app . --ts reduxtoolkitとreact-reduxのインスト…

■CodeSandBox（一番便利） https://codesandbox.io/s/new ■Json Place Holder https://jsonplaceholder.typicode.com/ https://jsonplaceholder.typicode.com/users?id=1 ■Reactフック チートシート useState / useEffect / useReducer / useRef / useCallBa…

最新の Node.js がインストールされていることを確かめる Create React App のインストールガイドに従って新しいプロジェクトを作成する。 npx create-react-app my-app ※以下でも同じらしい npm init react-app プロジェクト名 そのあとでプロジェクト名に…

参考URLはこちら。 React公式はこちら。 dev/my_project/react-express 大まかに分けてやることは 全体の環境構築 backendのExpressサーバの構築 APIのエンドポイントの作成 frontendのReactの設定 React初期画面 ReactからExpressサーバへのアクセス になる…