DjangoとReactを使ったアプリケーションを作ってみる②(React側の準備)

前回の続き。今回はReact側の準備を行っていく。
React初心者のため、とりあえずDjango側からデータを受け取るところまでの作成を目標とする。

Django側の準備：
Djangoを使ってみる①(環境構築～プロジェクト作成) - doramochi blog

Reactプロジェクトの作成

Node.jsはインストール済みの状態からスタートのため、手順は省略。
下記の様なコマンドを実行し、バージョンが表示されればインストール不要。

インストールされていない場合は、下記からダウンロード可
nodejs.org

「django_react」フォルダ直下にて下記コマンドを実施。
create-react-appがインストールされていない場合、インストールするかどうかを聞かれるので「y」を押して実行。

npx create-react-app frontend

問題がなければ、下記のようにプロジェクトの作成が実行される。

インストールが終わると下記の様な構成になっている。

作成されたフォルダへ移動し、サーバを起動

cd frontend
npm start

http://localhost:3000にアクセスして、下記のようなページが表示されればOK。

frontend/src/App.jsの編集

今回はaxiosというパッケージを使用するのでインストールしておく。

npm install axios

ソースコードを見てみると、App.jsというファイルに先ほどのページの描画処理が記述されているのでとりあえずこれを編集してみる。
データを取得し、postsに格納。postsの中身を展開して表示という処理。

import './App.css';
import axios from 'axios';
import React, { useState, useEffect } from 'react';

function App() {
  const [posts, setPosts] = useState([])

  useEffect(() => {
    axios
    .get('http://localhost:8000/api/home/')
    .then(res=>{setPosts(res.data);})
    .catch(err=>{console.log(err);});
  }, []);

  return (
    <div className="App">
      {posts.map(post => (
        <div key={post.id}>
          <h1>{post.title}</h1>
          <p>{post.description}</p>
        </div>
      ))}
    </div>
  );
}

export default App;

再度React側、Django側両方のサーバーを起動し、http://localhost:3000/へアクセス。
下記のように表示されれば無事連携完了。

次回からはReactを勉強して体裁を整えていく。