めも CentOS9にてpyenvで3.7系列のPythonはインストールできず。

axiosのpostメソッド const newTask=(task)=>{ const data={ title:task.title } axios.post(`http://localhost:8000/api/tasks/`,data,{ headers:{ "Content-Type":"application/json", "Authorization":"Token トークン", } }).then(res=>{setTasks([...ta…

axiosのメソッド .get() 第１引数にURL 第２引数にheaders:{"Authorization":"Token トークン"}を取る 続いて.then(res=>useState関数(res.data)とすることで 得られたデータをuseState変数に格納する .delete() 第１引数にURL 第２引数にheaders:{"Authoriz…

ReactでdjangoのAPIを取得する Django側 CORSのインストール Django側で行う docker-compose exec backend pip install django-cors-headers プロジェクト/settings.pynosettei CORSを設定する INSTALLED_APPS= 'corsheaders',を加える MIDDLEWARE= 'corshea…

urls プロジェクト/urls.py from django.contrib import admin from django.urls import path from django.conf.urls import include from rest_framework.authtoken.views import obtain_auth_token urlpatterns = [ path('admin/', admin.site.urls), path…

アプリ/views.py from rest_framework.authentication import TokenAuthentication from rest_framework.permissions import IsAuthenticated,AllowAny from rest_framework import generics from django.contrib.auth.models import User from rest_framewo…

シリアライザー シリアライズするためのライブラリ 入力でもらった情報を隠しながらDBに伝える 出力においても隠す アプリ/serializers.py 新規作成する from rest_framework import serializers from .models import Task from django.contrib.auth.models …

プロジェクト/settings.py INSTALLED_APPS プロジェクトの設定情報を記述したファイル rest_frameworkなどの外部のアプリ 自作したアプリケーションを登録できる manage.pyがある階層を原点として「/」の代わりに「.」で区切る。アプリの中のクラスについて…

今更ながらDockerとライブラリについて Dockerが共有できるのは環境だけ ライブラリなどはGitHubでソースコードを共有することに意味がある？ Dockerと本番環境 開発で使っていく AWSでは本番環境でdockerをうごかせるらしい…

combineReducers reducerが複数ある場合に困る reducerが複数あるのは別々の減り方をするときなど reduxをインストールする npm install reduc react-redux ファイル構成 src reducers index.js actionTypes.js reducerMeat.js reducerVegetable.js index.js…

useMemo 不要な再計算をスキップする useEffectは非同期に向いてる。 基本的にuseMemoの方が良い useMemoの使用 useMemoをimport useMemo()で囲う 第2引数にuseMemoを使わない（再計算するStateを入れる） useMemoをimport import{useMemo} from 'react'; us…

useRducerとuseContextを組み合わせる useReducerの状態管理は同一コンポーネントだけ useContextを使えば状態管理をグローバルにできる 親コンポーネントに処理を書く TypeScriptでは型を明示する必要があることに注意(今回は使用しない) useContextのconte…

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…