3/1-3

docker環境上でDjango+react

DockerでDjango・React環境を構築する - Qiita

 

dockerfileでaxiosを導入したいがうまくはいかない。

手動でreactアプリケーション内でnpm i axios@2.27.2でインストールできる

 

  • axiosの構文
    • useEffect内でAPIを取得する 
    • axios.get("URL").then(res=>setPosts(res.data)
    • useEffectの第2引数は[]（空）にすることでページ読み込み時に取得する

 

JavaScriptのFetchメソッドによるAPI取得

  • JavaScriptのFetchメソッドの構文
    • fetch("https://jsonplaceholder.typicode.com/posts",{method:'GET'})
    • .then(res=>res.json()).then(data=>{setPosts(data)})
      • fetch("URL",{method:"GET")
        • で呼び出す
      • .then(res=>res.json())
        • 呼び出されるのはHTMLであるからjson形式に変換する
      • .then(data=>{setPosts(data)})
        • json形式のdataをsetPostsに入れる

 

json形式のデータを表示する

<ul>
{
posts.map(post=><li key={post.id}>{post.title}</li>)
}
</ul>
  • postsを分解して<li>のキーをidとする
  • titleを並べるようにしている

 

3/1-2

useEffect

最初の一回だけ処理をしたい

特定のstateが変化した時だけデータを処理したい

API処理に使われる

 

useEffectのタイミング

レンダリングの直後に実行される。

 

useEffectの構文

  •     useEffect(()=>{console.log("useEffect invoked")},);
    • 第2引数（空）
      • 最初に読み込んだ時のみuseEffectを行う

 

useEffctの第2引数の効果

  • []内にuseStateの変数を入れればその変数が切り替わったタイミングでしかuseEffectは起きない
  • ex),[count]
  • ページ更新のタイミングでは必ずuseEffectが実行される
  • 複数の変数に対応させるには？[,]とかく

 

useEffectのcleanup

 

3/1-2

useStateでオブジェクト（辞書、ディクショナリ）を使う

formで変更できるようにする

 

  1. useStateの初期値で空のディクショナリを定義する
  2. formタグ内にinputタグで処理する

 

 

 

  • 処理
const [product,setProducts] = useState({name:"",price:""})

 

<form>
<input type="text" value={product.name} onChange=   

                                                    {evt=>setProducts({...product,name:evt.target.value})}/>
<br></br>
<input type="text" value={product.price} onChange=

                                                  {evt =>setProducts({...product,price:evt.target.value})}/> 
</form>
        <h1>Product name is {product.name} </h1>
        <h1>Product name is {product.price}</h1>

 

 

  • value={product.name}
    • valueで空のオブジェクトの要素を指定する

  • onChange= {evt=>setProducts()}

    • 状態が変更された時次の処理をおこなう
  • {...product,price:evt.target.value}
    • ...product
      • オブジェクトを丸ごと呼び出す
    • ,price: 
      • オブジェクトのpriceを指定
    • evt.target.value
  • {product.price}
    • productオブジェクトのpriceを呼び出す

 

 

3/1-1

UseState

コンポーネントの状態を表すStateを扱うための機能

 

手順

  1. src/components/コンポーネントでuseStateをimportする
  2. useStateを定義する
  3. useStateで定義した関数を定義する
  4. stateを使う

 

 

  • useStateを定義する
    • const [count,setCount]=useState(0);

 

  • useStateで定義した関数を定義する
    • 関数を使用する位置で定義する
      • <button onClick={()=>setCount(count+1)}>

 

  • stateを使う
    • タグ内で{count}と書いて使う

29-4

props

動的に値を変化させたい時に用いる

 

手順

  1. src/App.tsx内のコンポーネントタグにname属性として値を付与
  2. src/components/コンポーネント内で　引数にpropsを記入
  3. src/components/コンポーネント return()内で　{props.name}をタグ内に記入

 

イベントハンドラー

ボタンなどのイベント処理

 

手順

  1. src/components/コンポーネント内で　関数clickHAndlerを定義
  2. src/components/コンポーネント return()で　<button onClick={clickHandler}>Click</buttun>を記入

 

  • 関数clickHAndlerを定義
    • const clickHandler=()=>{
      • console.log("clicked");   //処理
    • };

2/29-3

ReactHooksアプリケーションのフォルダ構造

 

  • public
    • index.html
      • ブラウザ上に表示される大元
  • src
    • App.js(App.tsx)
      • メインで開発していくもの
    • index.js(index.tsx)
      • public/index.htmlとsrc/App.tsxをルーティングしている
        • const root = ReactDOM.createRoot(
            document.getElementById('root') as HTMLElement
          );

 

コンポーネント

ファンクショナルコンポーネントだけを使う。

 

ファンクショナルコンポーネントの作成

 

ファンクショナルコンポーネントの記述

  • 「rafce」の雛形を使う
  • return()内は一つのタグで囲う（<div></div> or <></>）

 

2/29-2

GitHub復習

  1. リモートでリポジトリを作る(GitHub上)
  2. ローカルでリポジトリを作る
  3. ステージングする
  4. コミットする
  5. プッシュする
  •  

 

2.ローカルでリポトリを作る

  • 「git init」

3.ステージングする

  • 「git add .」

4.コミットする

  • 「git commit -m "コメント"」

5.リモートリポジトリを登録する

  • 「git remote add origin https://......」
    • originという名前で登録された
    • 次回からorigin でプッシュできる

6.プッシュする

  • 「git push origin master」
    • origin(リモートリポジトリ)にmasterブランチをプッシュ
      • masterブランチは初期のブランチ

 

ブランチを切る

  1. ブランチを作成
  2. ブランチを切り替える
  3. ブランチをプッシュ

 

1.ブランチを作成

  • 「git branch 名前」

2.ブランチを切り替える

  • git checkout 名前

3.ブランチをプッシュ

  • 「git push origin 名前」

 

 

ブランチの作成とブランチの切り替えを同時に行う

  • 「git checkout -b 名前」

 

ブランチの派生元を指定する

  • リモートにあるブランチを派生元として新規でブランチを作成する
    • 「git branch 新規ブランチ名　派生元ブランチ名」