วิธีตั้งค่า Django + React Web Application โดยใช้ Webpack

กำลังมองหาวิธีสร้างเว็บแอปพลิเคชันด้วยส่วนหน้าของ React ที่มีประสิทธิภาพและส่วนหลังของ Django ที่ทรงพลังอยู่ใช่ไหม มองไม่เพิ่มเติม! คู่มือนี้จะช่วยคุณตั้งค่าเว็บแอปพลิเคชันภายในไม่กี่นาที

Django เป็นเฟรมเวิร์กเว็บ Pythonแบบโอเพ่นซอร์สระดับสูงที่สนับสนุนการพัฒนาอย่างรวดเร็วและการออกแบบที่ชัดเจนและใช้งานได้จริง React เป็นไลบรารี JavaScriptส่วนหน้าแบบโอเพ่นซอร์สฟรีสำหรับสร้างส่วนต่อประสานผู้ใช้ตามส่วนประกอบ UI ทำให้การพัฒนาส่วนต่อประสานผู้ใช้แบบโต้ตอบไม่ยุ่งยาก ด้วยการรวมเทคโนโลยีทั้งสองเข้ากับความช่วยเหลือของเครื่องมือบันเดิลที่เรียกว่าWebpackเราสามารถสร้างเว็บแอปพลิเคชันที่มั่นคงได้อย่างง่ายดาย มาเริ่มกันเลย!

ข้อกำหนดเบื้องต้น

คู่มือนี้มีสิ่งที่คุณต้องรู้ล่วงหน้าไม่มากนัก แต่การมีความเข้าใจพื้นฐานของ Python และ JavaScript ก่อนเริ่มโปรเจกต์นี้จะเป็นประโยชน์อย่างแน่นอน

ติดตั้ง Python, Virtualenv และ Django

เนื่องจาก Django เป็นเว็บเฟรมเวิร์กที่ใช้ Python เราจำเป็นต้องตรวจสอบให้แน่ใจว่าติดตั้ง Python บนอุปกรณ์ของเราก่อนดำเนินการต่อ ต่อไปนี้คือบทความบางส่วนที่จะช่วยคุณติดตั้ง Python บนแพลตฟอร์มที่เกี่ยวข้อง หากคุณยังไม่มี: Mac , Windows , Linux

เราจะใช้เครื่องมือ Python ที่เรียกว่าvirtualenvเพื่อช่วยเราติดตามและจัดการการพึ่งพาสำหรับโครงการ Django ของเราในสภาพแวดล้อมเสมือนจริง คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับเรื่องนี้ได้ที่นี่ เราสามารถติดตั้งได้โดยเรียกใช้pip install virtualenvในหน้าต่างเทอร์มินัล ให้เราติดตั้ง Django ด้วยการเรียกใช้pip install djangoในหน้าต่างเทอร์มินัล

ตั้งค่าสภาพแวดล้อมเสมือนจริงและสร้างโครงการ Django

• วิ่งdjango-admin startproject djangoreact

• วิ่งpython -m virtualenv <path-to-env>

• ทำงานsource <path-to-env>/bin/activateบน Mac หรือ<path-to-env>/Scripts/activateWindows

คุณสามารถเรียกใช้deactivateเพื่อปิดใช้งานสภาพแวดล้อมเสมือนจริงเมื่อใดก็ได้ในอนาคต

• วิ่งpip install django

สร้างและตั้งค่าส่วนหน้า

• ในdjangoreactไดเร็กทอรีรูท ให้รันdjango-admin startapp frontend

• เปิดdjangoreact/djangoreact/settings.pyไฟล์และเพิ่ม'frontend'ไปยังINSTALLED_APPSอาร์เรย์

• แก้ไขdjangoreact/djangoreact/urls.pyไฟล์ให้มีลักษณะดังนี้:

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('frontend.urls')),
]

• ภายในdjangoreact/frontend/templates/frontendไดเร็กทอรี ให้สร้างindex.htmlไฟล์และวางสิ่งต่อไปนี้:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Django React</title>
    {% load static %}
  </head>
  <body>
    <div id="root"></div>
    <script src="{% static "js/main.js" %}"></script>
  </body>
</html>

• เปิดdjangoreact/djangoreact/settings.pyไฟล์และเปลี่ยนSTATIC_URLตัวแปรจาก/static/เป็น/frontend/static/
• แก้ไขdjangoreact/frontend/views.pyให้มีลักษณะดังต่อไปนี้:

from django.shortcuts import render

def index(request):
    return render(request, 'frontend/index.html')

from django.urls import path
from .views import index

urlpatterns = [
    path('', index),
]

เพื่อให้สามารถรัน React และ Webpack ได้ เราจำเป็นต้องติดตั้งNodeบนอุปกรณ์ของเรา คุณสามารถดูเว็บไซต์ทางการได้ที่นี่เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับวิธีการติดตั้งบนอุปกรณ์ประเภทของคุณ

ติดตั้งและตั้งค่าการตอบสนอง

• สร้างsrcไดเร็กทอรีภายในdjangoreact/frontendไดเร็กทอรีและcomponentsไดเร็กทอรีภายในdjangoreact/frontend/srcไดเร็กทอรี นี้

สำหรับขั้นตอนต่อไปนี้ ตรวจสอบให้แน่ใจว่าคุณกำลังทำงานในdjangoreact/frontendไดเร็กทอรี

• เริ่มต้นโครงการ npm ด้วยnpm init -y
• ติดตั้งการพึ่งพาทั้งหมดสำหรับส่วนหน้า React ของเราด้วยคำสั่งต่อไปนี้:

npm install webpack webpack-cli --save-dev
npm install @babel/core babel-loader --save-dev
npm install @babel/preset-env @babel/preset-react --save-dev
npm install @babel/plugin-proposal-class-properties
npm install react react-dom --save-dev

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "10"
        }
      }
    ],
    "@babel/preset-react"
  ],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

const path = require("path");
const webpack = require("webpack");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "./static/js"),
    filename: "[name].js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  },
  optimization: {
    minimize: true
  },
  plugins: [
    new webpack.DefinePlugin({
      "process.env": {
        // This has effect on the react lib size
        NODE_ENV: JSON.stringify("production")
      }
    })
  ]
};

"scripts": {
    "dev": "webpack --mode development --watch",
    "build": "webpack --mode production"
 },

import React from "react";

const App = (props) => {
  return (
    <div className="App">
      <h1>Django React Setup Works</h1>
    </div>
  );
};

export default App;

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./components/App/App";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
 <React.StrictMode>
  <App />
 </React.StrictMode>
);

• ไปที่djangoreactไดเรกทอรีรากและเรียกใช้:

python manage.py migrate && python manage.py runserver

• ในหน้าต่างเทอร์มินัลใหม่ ไปที่djangoreact/frontendไดเร็กทอรีและเรียกใช้npm run dev
• เปิดเว็บเบราว์เซอร์และhttp://localhost:8000ไปที่ "Django React Setup Works"

คุณยังสามารถเพิ่มแอปอื่นโดยใช้คำสั่ง เช่นdjango-admin startapp apiและแก้ไขINSTALLED_APPSอาร์เรย์เพื่อสร้างแอปพลิเคชัน Django สำหรับส่วนแบ็คเอนด์ของเว็บแอปพลิเคชัน อย่างไรก็ตาม รายละเอียดนั้นอยู่นอกขอบเขตของบทช่วยสอนนี้ และคุณสามารถอ้างอิงบทช่วยสอน Django ออนไลน์อื่นเพื่อช่วยให้คุณบรรลุผลดังกล่าวได้

ตอนนี้คุณพร้อมที่จะสร้างส่วนหน้าของ React ที่บ้าคลั่งด้วยแบ็กเอนด์ Django อันทรงพลังแล้ว! มีความสุขในการเข้ารหัส!

ทรัพยากร

• github.com/Dhananjayan-PN/Django-React-Setup-Guide
• djangoproject.com
• reactjs.org
• webpack.js.org

ขอบคุณที่เป็นส่วนหนึ่งของชุมชนของเรา! ก่อนที่คุณจะไป:

• ปรบมือให้กับเรื่องราวและติดตามผู้เขียน
• ดูเนื้อหาเพิ่มเติมในสิ่งพิมพ์ Level Up Coding
• ติดตามเรา: Twitter | LinkedIn | จดหมายข่าว