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

ルーティング 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…

関数 使う前に定義する。 引数の数が違うとエラー。（明示すれば可変長にできる） def add(a, b): return a + b def menu(entree ,drink, dessert='cake'): print(entree, drink, dessert) #キーワード引数も対応 menu(entree='chikin', drink='beer') 型宣…

if インデントとしてスペース4つが必須。スペースの数が違うとエラー。if x print('') elif: print('') else: print('')cost = 0 if (ac == bc) else 1 演算子 / 除算 結果はfloat // 切り捨て除算 結果は整数だがfloatの可能性もある（要注意） % 余り 結果…

リスト（配列） list li = [5, 11, 40, 6, 55, 2, 7] li[-1] #最後尾 li[2] #3番目 li[:2] #0-3番目の手前まで li[:] #全部 len(li)list('abcde') で文字列をリストに変換li[::2] #全部を一つ飛ばしで取り出し li[::-1] #全部を逆順で取り出し リストの操作 …

print "python" でインタラクティブモード起動 print() type() #変数の型を確認 print('aaa', 'bbb', sep=',') 変数 varはなくていい 型は自動で決まる 型宣言はできるがエラーにはならず意味がないので不要nb: int = 1 num = 100 str = 'aaaa'定数はないけ…