😺

【Django】Pythonで作るRest API【２５Vite + React】

2023/02/12に公開

django

Python

tech

【２５Vite + React】

YouTube: https://youtu.be/dtE_47_vfFw

https://youtu.be/dtE_47_vfFw

今回は「Vite」で「React」のセットアップを行います。

まずは、「django」のアプリでローカルサーバーを起動して、
ポスト一覧のページを表示しておきます。

http://localhost:8000/posts/

そうしましたら、
デスクトップに「react-app」というフォルダを作成して、
もう一枚、新しくVSコードのウィンドウを起動して、
こちらで上記のフォルダを表示します。

ここまででできましたら、

https://ja.vitejs.dev/guide/

こちらのページから以下のコマンドをコピーして、
「react-app」の方のターミナルで実行します。

npm create vite@latest

プロジェクト名の部分は「.」を
テンプレートは「react」を
言語は「Javascript」を選択します。

次にフォルダとファイルのDLができましたら、

npm install

を実行して、ライブラリのインストールを行います。

「Vite」で作成した「React」のアプリケーションは

npm run dev

で起動します。

ここまでできましたら、
「React」側から「django」側にポスト一覧取得のリクエストを送信してみましょう。

App.jsxに以下のコードを追加します。

react-app/src/App.jsx

import { useState, useEffect } from 'react'
import reactLogo from './assets/react.svg'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  useEffect(() => {
    const getPosts = async () => {
      const res = await fetch('http://localhost:8000/posts/')
      const data = await res.json()
      console.log(data);
    }
    getPosts()
  }, [])

  return (
    <div className="App">
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src="/vite.svg" className="logo" alt="Vite logo" />
        </a>
        <a href="https://reactjs.org" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.jsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </div>
  )
}

export default App

今回は「django」側で「cors」の設定をしていないので、
コンソールにエラーが出ていることが確認できます。

次回は「django」側に「cors」の設定を行い、
こちらの問題を解決します。

【２５Vite + React】

Discussion