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を並べるようにしている