👀

React+Djangoの環境構築メモ

2024/05/08に公開

django

DjangoとReactの環境構築のメモを残していきます。

[React] 環境構築

Reactアプリの構築

npx create-react-app [プロジェクト名]

TypeScriptで作成したい場合

npx create-react-app [プロジェクト名] --template typescript

[React] React18からReact17へのダウングレード

package.jsonの中身の一部を変更する。

package.json

  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
+    "@testing-library/react": "^12.0.0",
-    "@testing-library/user-event": "^13.5.0",
+    "@testing-library/user-event": "^12.0.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.11.62",
-    "@types/react": "^18.0.21",
+    "@types/react": "^17.0.0",
-    "@types/react-dom": "^18.0.6",
+    "@types/react-dom": "^17.0.0",
-    "react": "^18.2.0",
+    "react": "^17.0.0",
-    "react-dom": "^18.2.0",
+    "react-dom": "^17.0.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.8.4",
    "web-vitals": "^2.1.4"
  },

変更後以下のコマンドを実行し更新する。

npm install

変更後index.tsxを以下に変更する。

index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
 
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

参考

[React] 脆弱性の警告の無視

package.jsonを以下のように変更する。

package.json

    {
      "name": "converter-front",
      "version": "0.1.0",
      "private": true,
-     "dependencies": {
+     "devDependencies": {
        "@testing-library/jest-dom": "^5.17.0",
        "@testing-library/react": "^12.0.0",
        "@testing-library/user-event": "^12.0.0",
        "@types/jest": "^27.5.2",
        "@types/node": "^16.18.96",
        "@types/react": "^17.0.0",
        "@types/react-dom": "^17.0.0",
        "react": "^17.0.0",
        "react-dom": "^17.0.0",
        "react-scripts": "5.0.1",
        "typescript": "^4.9.5",
        "web-vitals": "^2.1.4"
      },

変更後以下のコマンドを実行する。

npm audit --production

脆弱性表示がきになる場合は以下のコマンドを実行する。

npm install --no-audit

参考

[Django] 環境構築

Python仮想環境を構築

python -m venv venv
cd venv\Scripts
activate.bat

仮想環境に入ったあとにDjangoをインストールする。

(venv) pip install django

restframeworkなどを入れる場合は以下のコマンド

(venv) pip install djangorestframework
(venv) pip install django-cors-headers

Django導入後以下のコマンド

(venv) django-admin startproject [プロジェクト名] .

(venv) python manage.py startapp [アプリケーション名]
(venv) python manage.py migrate
(venv) python manage.py runserver

[Django] プロジェクト設定

settings.py

INSTALLED_APPS = [
   'django.contrib.admin',
   'django.contrib.auth',
   'django.contrib.contenttypes',
   'django.contrib.sessions',
   'django.contrib.messages',
   'django.contrib.staticfiles',
# rest_frameworkはpip install djangorestframeworkを実行していた場合に設定する
+    'rest_framework',
+    '[アプリケーション名]',
]

[Django]importエラー時

Vscodeのときかつpython仮想環境時にimport エラーが発生する時があるので以下を検索バーから実行して"python.exe"を指定する

>Python:Select Interpreter