Cách thiết lập ứng dụng web Django + React bằng Webpack

Jan 19 2023

Bạn đang tìm cách xây dựng ứng dụng web với giao diện người dùng React mạnh mẽ và chương trình phụ trợ Django mạnh mẽ? Đừng tìm đâu xa! Hướng dẫn này sẽ giúp bạn thiết lập ứng dụng web của mình trong vòng vài phút. Django là một khung web Python mã nguồn mở, miễn phí và cấp cao, khuyến khích sự phát triển nhanh chóng và thiết kế thực dụng, rõ ràng.

Bạn đang tìm cách xây dựng ứng dụng web với giao diện người dùng React mạnh mẽ và chương trình phụ trợ Django mạnh mẽ? Đừng tìm đâu xa! Hướng dẫn này sẽ giúp bạn thiết lập ứng dụng web của mình trong vòng vài phút.

Django là một khung web Python mã nguồn mở, miễn phí và cấp cao , khuyến khích sự phát triển nhanh chóng và thiết kế thực dụng, rõ ràng. React là thư viện JavaScript giao diện người dùng mã nguồn mở và miễn phí để xây dựng giao diện người dùng dựa trên các thành phần giao diện người dùng, giúp việc phát triển giao diện người dùng tương tác trở nên dễ dàng. Bằng cách kết hợp hai công nghệ với sự trợ giúp của công cụ gói có tên là Webpack , chúng tôi có thể dễ dàng xây dựng một ứng dụng web vững chắc. Bắt đầu nào!

điều kiện tiên quyết

Không có quá nhiều điều bạn cần biết trước cho hướng dẫn này, nhưng chắc chắn sẽ rất hữu ích nếu bạn có hiểu biết cơ bản về Python và JavaScript trước khi bắt đầu dự án này.

Cài đặt Python, Virtualenv và Django

Vì Django là một khung web dựa trên Python nên chúng tôi cần đảm bảo rằng Python đã được cài đặt trên thiết bị của chúng tôi trước khi tiếp tục. Dưới đây là một số bài viết giúp bạn cài đặt Python trên nền tảng tương ứng nếu bạn chưa có: Mac , Windows , Linux

Chúng tôi sẽ sử dụng một công cụ Python được gọi virtualenvđể giúp chúng tôi theo dõi và quản lý các phụ thuộc cho dự án Django của chúng tôi trong môi trường ảo. Bạn có thể tìm hiểu thêm về nó ở đây . Chúng ta có thể cài đặt nó bằng cách chạy pip install virtualenvtrong cửa sổ đầu cuối. Chúng ta cũng hãy cài đặt Django bằng cách chạy pip install djangotrong cửa sổ đầu cuối.

Thiết lập môi trường ảo và tạo dự án Django

Chạydjango-admin startproject djangoreact

Chạypython -m virtualenv <path-to-env>

Chạy source <path-to-env>/bin/activatetrên máy Mac hoặc <path-to-env>/Scripts/activatetrên Windows

Bạn có thể chạy deactivateđể hủy kích hoạt môi trường ảo tại bất kỳ thời điểm nào trong tương lai.

Chạypip install django

Tạo và thiết lập Frontend

Trong djangoreactthư mục gốc, chạydjango-admin startapp frontend

Mở djangoreact/djangoreact/settings.pytệp và thêm 'frontend'vào INSTALLED_APPSmảng

Sửa đổi djangoreact/djangoreact/urls.pytập tin để trông giống như sau:

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

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

Trong djangoreact/frontend/templates/frontendthư mục, tạo một index.htmltệp và dán đoạn sau vào đó:

<!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>

Mở djangoreact/djangoreact/settings.pytệp và thay đổi STATIC_URLbiến từ /static/thành/frontend/static/
Sửa đổi djangoreact/frontend/views.pyđể trông giống như sau:

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),
]

Để có thể chạy React và Webpack, chúng ta cần cài đặt Node trên thiết bị của mình. Bạn có thể tham khảo trang web chính thức tại đây để tìm hiểu thêm về cách bạn có thể cài đặt nó trên loại thiết bị của mình.

Cài đặt và thiết lập React

Tạo một srcthư mục bên trong djangoreact/frontendthư mục và một thư mục bên trong thư mục componentsnàydjangoreact/frontend/src

Đối với các bước sau, hãy đảm bảo rằng bạn hiện đang làm việc bên trong djangoreact/frontendthư mục

Khởi tạo một dự án npm vớinpm init -y
Cài đặt tất cả các phụ thuộc cho giao diện người dùng React của chúng tôi bằng các lệnh sau:

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>
);

Điều hướng đến djangoreactthư mục gốc và chạy:

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

Trong cửa sổ terminal mới, điều hướng đến djangoreact/frontendthư mục và chạynpm run dev
Mở trình duyệt web và truy cập http://localhost:8000và bạn sẽ thấy “Django React Setup Works”

Bạn cũng có thể thêm ứng dụng khác bằng cách sử dụng lệnh like django-admin startapp apivà sửa đổi INSTALLED_APPSmảng để tạo ứng dụng Django cho phần phụ trợ của ứng dụng web. Tuy nhiên, các chi tiết về điều đó nằm ngoài phạm vi của hướng dẫn này và bạn có thể tham khảo một hướng dẫn Django trực tuyến khác để giúp bạn đạt được điều đó.

Bây giờ bạn đã sẵn sàng để xây dựng một số giao diện người dùng React điên rồ với phần phụ trợ Django mạnh mẽ! Mã hóa vui vẻ!