フック 関数コンポーネントに機能を追加するための仕組み 副作用フック コンポーネントを描画、破棄するタイミングで何らかの処理を実行させる フックは必ず関数コンポーネントのトップレベルで呼び出すこと。 ループ、条件分岐、入れ子関数では機能しません…

ルーティング URLに応じて処理を渡す先を変える SPAではページ遷移もアプリが担う インストール npm install react-router-dom 基本 SwitchからRouteになりました。Routeを入れ子にして階層構造を作る。 子ルートは親ルートのパスに連結して定義される。 親…

フォーム 制御コンポーネント Controlled Component useStateを使い、stateで値を保持する name属性とstateプロパティの名前を一致させる 値はvalueに設定する。 const [form, setForm] = useState({email："xx@xx"}) <input name="email" value={form.email} /> 算出プロパティ名。変数を[]で囲うとプ…

state 基本 Props:コンポーネントに値を渡すためのもの。読み取り専用で変更不可 State:状態管理のためのもの。変更可能。フォームの入力など。 使い方 関数コンポーネントではthisではなくuseStateを使う。 useStateを使い、変数、更新関数、初期値を設定す…

分岐条件と繰り返し 繰り返し Array#mapを使ってコンポーネントを返す {articles.map((article) => return <MyArticle {...article} key={article.url}/> )} key リストなどはタグにkeyをつけることで更新、追加の判別が可能となり、無駄な処理がなくなる。 keyはユニークであれば何でも良い。 分岐 ?: 3</myarticle>…

コンポーネント 関数コンポーネントとクラスコンポーネントがある hooksができたので関数コンポーネントがおすすめ 関数コンポーネント returnでReact要素を返す propsを引数で受け取る クラスコンポーネント Componentクラスを継承 renderでReact要素を返す…

環境構築 雛形を作る（webpackも入る） npx create-react-app xxx npm start npm run build 本番環境用にコンパイルしbuildに出力 npm run eject webpack/babelの設定情報をconfigに出力 React.StrictMode 非推奨の警告を出してくれる機能 JSX: タグをjavasc…