useReducer 状態遷移を管理する currentStateとactionをもとにreducerが新しいStateを返す useReducerの使い方 useRedcerをimportする initialStateを定義する reducer関数を定義する useReducerを定義する dispatch関数に値を送る countに値が返ってくる us…

文字列の中に変数を埋め込む `URL/${id}` useContext propsDrilling問題propsのために途中通過点を経由しなければならない useContext+useReducerで解決する useContextを使う src/contextsを作成 AppContext.jsを作成 AppContext.jsを記述 App.tsxでimport <AppContext.Provider value={"value from App.js"}></appcontext.provider>…

docker環境上でDjango+react DockerでDjango・React環境を構築する - Qiita dockerfileでaxiosを導入したいがうまくはいかない。 手動でreactアプリケーション内でnpm i axios@2.27.2でインストールできる axiosの構文 useEffect内でAPIを取得する axios.get…

useEffect 最初の一回だけ処理をしたい 特定のstateが変化した時だけデータを処理したい API処理に使われる useEffectのタイミング レンダリングの直後に実行される。 useEffectの構文 useEffect(()=>{console.log("useEffect invoked")},); 第2引数（空） …

useStateでオブジェクト（辞書、ディクショナリ）を使う formで変更できるようにする useStateの初期値で空のディクショナリを定義する formタグ内にinputタグで処理する 処理 const [product,setProducts] = useState({name:"",price:""}) <form><input type="text" value={product.name} onChange= {evt=>setProducts({...</form>…

UseState コンポーネントの状態を表すStateを扱うための機能 手順 src/components/コンポーネントでuseStateをimportする useStateを定義する useStateで定義した関数を定義する stateを使う src/components/コンポーネントでuseStateをimportする import {u…

props 動的に値を変化させたい時に用いる 手順 src/App.tsx内のコンポーネントタグにname属性として値を付与 src/components/コンポーネント内で 引数にpropsを記入 src/components/コンポーネント return()内で {props.name}をタグ内に記入 イベントハンド…

ReactHooksアプリケーションのフォルダ構造 public index.html ブラウザ上に表示される大元 src App.js(App.tsx) メインで開発していくもの index.js(index.tsx) public/index.htmlとsrc/App.tsxをルーティングしている const root = ReactDOM.createRoot( d…

GitHub復習 リモートでリポジトリを作る(GitHub上) ローカルでリポジトリを作る ステージングする コミットする プッシュする 2.ローカルでリポトリを作る 「git init」 3.ステージングする 「git add .」 4.コミットする 「git commit -m "コメント"」 5.リ…

複数のコンテナを作るためにDockerfileを分ける ファイル構造 reactdjango docker-compose.yaml docker react Dockerfile docker-compose.yaml version : '3.9' services: react-app build: context: . dockerfile: ./docker/react/Dockerfile volumes : - .…

ディレクトリ構造 ReactDjango |--Dockerfile |--docker-compose.yaml |--reactApp Dockerfile FROM node:16.15.0-alpine WORKDIR /usr/src/app docker-compose.yaml version: '3.9' services: react-app: build: context: . dockerfile: Dockerfile volumes…