15 menit baca - 28 November 2025
Pelajari cara membuat aplikasi web full-stack menggunakan Django untuk backend dan React untuk frontend, dengan panduan langkah demi langkah.
Ingin membuat aplikasi web dengan backend yang kuat dan frontend yang dinamis? Memasangkan Django, sebuah framework Python, dengan React, sebuah library JavaScript, adalah cara terbaik untuk mencapai hal ini. Django menangani tugas-tugas backend seperti manajemen basis data dan pembuatan API, sementara React membuat antarmuka pengguna yang responsif dan interaktif.
Langkah-langkah Utama:
Siapkan Lingkungan Anda:- Instal Python 3.x untuk Django dan Node.js untuk React.
python --versi, node --versi, dan npm --versi.Mengatur Proyek Anda:- Buat folder terpisah untuk backend Django dan frontend React.
django-admin startproject untuk pengaturan backend dan npx create-react-app untuk inisialisasi frontend.Membangun Backend:- Membuat aplikasi Django, mendefinisikan model, dan menghasilkan migrasi.
django-cors-header untuk mengaktifkan komunikasi antara frontend dan backend.Mengembangkan Frontend:- Gunakan komponen React untuk mengelola tugas dan interaksi pengguna.
Hubungkan dan Uji:- Jalankan Django di localhost:8000 dan React di localhost:3000.
Pengaturan ini memungkinkan Anda untuk membangun aplikasi full-stack secara efisien dengan pemisahan yang jelas antara backend dan frontend. Ikuti langkah-langkah berikut untuk membuat aplikasi web interaktif yang dapat diskalakan.
Sebelum Anda mulai membangun aplikasi Django dan React, sangat penting untuk menyiapkan lingkungan pengembangan Anda dengan alat dan ketergantungan yang diperlukan. Landasan ini akan membantu Anda membuat, mengintegrasikan, dan menguji komponen Django dan React dengan lancar saat Anda melanjutkan.
Untuk memulai, mesin pengembangan Anda akan membutuhkan Python 3.x untuk Django dan Node.js untuk React. Secara khusus, Django 5.0 membutuhkan Python 3.x, sedangkan React bekerja dengan Node.js versi 12 atau lebih tinggi.
Menginstal Python: Anda dapat mengunduh Python secara langsung dari situs web resminya atau menggunakan package manager sistem Anda. Untuk pengguna macOS, Homebrew membuatnya sederhana dengan brew install python. Pengguna Windows harus mengambil penginstal dari python.org, sementara pengguna Linux dapat menginstalnya dengan perintah seperti apt install python3 di Ubuntu atau perintah serupa untuk distribusi lain.
Menyiapkan Node.js dan npm: Node.js dibundel dengan npm (Node Package Manager). Anda memerlukan npm versi 6 atau lebih tinggi, dengan versi 7.5.4 sebagai pilihan yang dapat diandalkan. Unduh Node.js dari nodejs.org, yang secara otomatis akan menyertakan npm.
Lingkungan Virtual Python: Menggunakan lingkungan virtual adalah kunci untuk mengelola ketergantungan khusus proyek tanpa konflik. Anda dapat menggunakan modul venv bawaan atau alat bantu seperti pipenv atau virtualenvwrapper untuk fitur yang lebih banyak. Jika Anda menggunakan Windows, paket virtualenvwrapper-win menyediakan fungsionalitas serupa.
Untuk mengonfirmasi instalasi Anda, jalankan perintah berikut di terminal Anda:
python --version node --version npm --version
Struktur proyek yang terorganisir dengan baik sangat penting untuk menjaga agar kode backend dan frontend Anda tetap terpisah dan mudah dikelola. Mulailah dengan membuat direktori utama untuk proyek Anda:
mkdir django-react-app cd django-react-app
Di dalam direktori ini, buatlah dua folder: satu untuk backend Django dan satu lagi untuk frontend React. Pemisahan ini memungkinkan Anda untuk memelihara dan menggunakan setiap bagian secara independen.
Siapkan lingkungan virtual Python Anda di dalam direktori proyek:
python -m venv venv
Aktifkan lingkungan virtual:
source venv/bin/activatevenv\Scripts\activateLangkah ini memastikan bahwa semua ketergantungan Python untuk proyek Anda terisolasi.
Dengan lingkungan Anda yang telah siap, saatnya untuk menginstal paket-paket yang diperlukan untuk Django dan React.
Paket-paket Backend Django: Ketika lingkungan virtual Anda aktif, instal Django dan library pendukungnya menggunakan pip:
pip install django pip install djangorestframework pip install django-cors-headers
Pengaturan Frontend React: Untuk mengatur lingkungan React Anda, gunakan alat create-react-app. Perintah ini menginisialisasi proyek React dan menginstal semua dependensi yang diperlukan:
npx create-react-app frontend
Perintah ini akan membuat sebuah proyek React baru di direktori frontend, lengkap dengan paket-paket penting, alat pengembangan, dan skrip build.
Paket Frontend Tambahan: Setelah menyiapkan proyek React Anda, masuk ke dalam direktori frontend dan instal Axios, sebuah library untuk membuat permintaan HTTP ke API Django Anda:
cd frontend npm install axios
Pada titik ini, lingkungan pengembangan Anda sudah dilengkapi dengan Python 3.x, Django, Node.js, React, dan semua alat yang diperlukan. Lingkungan virtual Python memastikan dependensi backend Anda terisolasi, sementara npm menangani paket JavaScript Anda secara terpisah. Sekarang Anda siap untuk mulai membangun aplikasi full-stack Anda!
Menyiapkan backend Django dengan model basis data, API endpoints, dan integrasi untuk frontend React.
Mulailah dengan membuat proyek Django, yang meliputi pengaturan, konfigurasi basis data, dan opsi khusus aplikasi. Di dalam proyek ini, Anda akan membuat aplikasi Django - sebuah paket Python yang didesain untuk tugas-tugas spesifik seperti mengelola data pengguna atau konten.
Arahkan ke direktori root proyek Anda (tempat lingkungan virtual Anda disiapkan) dan buat proyek Django:
django-admin startproject backend .
Perintah ini akan menghasilkan berkas proyek secara langsung di direktori saat ini, menghindari folder tambahan. Anda akan melihat berkas-berkas baru seperti manage.py (untuk menjalankan perintah-perintah Django) dan direktori backend yang berisi berkas-berkas seperti settings.py, urls.py, asgi.py, dan wsgi.py.
Selanjutnya, buat aplikasi untuk menangani fungsionalitas tertentu. Misalnya, sistem manajemen tugas:
python manage.py startapp tasks
Ini akan membuat direktori tugas dengan berkas-berkas penting seperti models.py, views.py, admin.py, dan folder migrasi. Pastikan untuk menghindari konflik penamaan dengan nama bawaan seperti "django" atau "test".
Daftarkan aplikasi di pengaturan proyek Anda dengan menambahkannya ke daftar INSTALLED_APPS di backend/settings.py:
INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'rest_framework', 'corsheaders', 'tasks', # Daftarkan aplikasi Anda]
Tentukan struktur data Anda dengan model-model Django. Sebagai contoh, model Tugas sederhana untuk aplikasi manajemen tugas dapat ditambahkan di tasks/models.py:
from django.db import models class Task(models.Model): title = models.CharField(max_length=200) description = models.TextField(blank=True) completed = models.BooleanField(default=False) created_at = models.DateTimeField(auto_now_add=True) updated_at = models.DateTimeField(auto_now=True) class Meta: ordering = ['-created_at'] def __str__(self): return self.title
Model ini mencakup bidang seperti CharField untuk teks pendek, TextField untuk konten yang lebih panjang, BooleanField untuk nilai benar/salah, dan DateTimeField untuk stempel waktu. Kelas Meta menentukan opsi seperti urutan default.
Terapkan model ke basis data Anda dengan menjalankan migrasi:
python manage.py membuat tugas migrasi python manage.py migrasi
Untuk mengonversi data model ke JSON, gunakan serializer Django REST Framework. Di tasks/serializers.py, tentukan serializer untuk model Task:
from rest_framework import serializers from .models import Task class TaskSerializer(serializers.ModelSerializer): class Meta: model = Task fields = ['id', 'title', 'description', 'completed', 'created_at', 'updated_at'] read_only_fields = ['created_at', 'updated_at']
ModelSerializer secara otomatis menghasilkan field dan metode berdasarkan model. Mencantumkan field secara eksplisit memastikan Anda tidak secara tidak sengaja mengekspos data sensitif.
Django REST Framework menyederhanakan pembuatan API. Untuk operasi CRUD standar, gunakan ViewSets dengan router untuk struktur RESTful yang bersih.
Di tasks/views.py, buatlah tampilan API:
from rest_framework import viewsets from rest_framework.permissions import AllowAny from .models import Task from .serializers import TaskSerializer class TaskViewSet (viewsets.ModelViewSet): queryset = Task.objects.all() serializer_class = TaskSerializer permission_classes = [AllowAny] # Hanya untuk pengembangan
ModelViewSet secara otomatis menangani daftar, membuat, mengambil, memperbarui, dan menghapus tugas.
Siapkan perutean URL di tasks/urls.py:
from django.urls import path, include from rest_framework.routers import DefaultRouter from .views import TaskViewSet router = DefaultRouter() router.register(r'tasks', TaskViewSet) urlpatterns = [ path('api/', include(router.urls)), ]
Sertakan URL ini di dalam berkas backend/urls.py utama:
from django.contrib import admin from django.urls import path, include urlpatterns = [ path('admin/', admin.site.urls), path('', include('tasks.urls')), ]
Untuk mengizinkan frontend React Anda (berjalan di port 3000) untuk berkomunikasi dengan backend Django (di port 8000), konfigurasikan Cross-Origin Resource Sharing (CORS). Tanpa ini, browser akan memblokir permintaan cross-origin untuk alasan keamanan.
Perbarui backend/settings.py untuk menyertakan konfigurasi CORS:
MIDDLEWARE = [ 'corsheaders.middleware.CorsMiddleware', # Tambahkan ini di bagian atas 'django.middleware.security.SecurityMiddleware', 'django.contrib.sessions.middleware.SessionMiddleware', 'django.middleware.common.CommonMiddleware', 'django.middleware.csrf.CsrfViewMiddleware', 'django.contrib.auth.middleware.AuthenticationMiddleware', 'django.contrib.messages.middleware.MessageMiddleware', 'django.middleware.clickjacking.XFrameOptionsMiddleware', ] # Pengaturan CORS untuk pengembangan CORS_ALLOWED_ORIGINS = [ "http://localhost:3000", # Server pengembangan React "http://127.0.0.1:3000", ] CORS_ALLOW_CREDENTIALS = True
Untuk pengujian cepat, Anda dapat menggunakan CORS_ALLOW_ALL_ORIGINS = True, tetapi menentukan asal yang diizinkan akan lebih aman.
Sebelum mengintegrasikan frontend React, uji coba endpoint API untuk memastikan bahwa endpoint tersebut bekerja sesuai dengan yang diharapkan. Mulai server pengembangan Django:
python manage.py runserver
Akses API di http://127.0.0.1:8000/api/tasks/. Gunakan API yang dapat diramban untuk menguji operasi seperti permintaan GET dan POST.
Sebagai alternatif, uji dengan cURL atau Postman:
# Uji permintaan GET untuk membuat daftar tugas curl -X GET http://127.0.0.1:8000/api/tasks/ # Uji permintaan POST untuk membuat tugas curl -X POST http://127.0.0.1:8000/api/tasks/ \ -H "Content-Type: application/json" \ -d '{"title": "Test Task", "description": "Ini adalah tugas pengujian"}'
Untuk pengujian otomatis, tambahkan kasus uji di tasks/tests.py:
from rest_framework.test import APITestCase from rest_framework import status from .models import Task class TaskAPITestCase(APITestCase): def test_create_task(self): # Tambahkan asersi dan logika pengujian Anda di sini pass
Dengan backend yang sudah siap, Anda siap untuk menghubungkannya ke frontend React.
Untuk membuat antarmuka yang menarik untuk backend Django Anda, Anda akan menggunakan React untuk mengelola interaksi pengguna - mulai dari melihat tugas hingga menambahkan tugas baru.
Mulailah dengan menyiapkan frontend React Anda menggunakan Create React App. Arahkan ke direktori root proyek Anda (di mana backend Django Anda berada) dan jalankan:
npx create-react-app frontend cd frontend
Perintah ini akan menyiapkan aplikasi React dengan berkas-berkas penting seperti package.json, src/App.js, dan public/index.html. Perintah ini juga menyertakan alat-alat seperti webpack untuk bundling, Babel untuk kompilasi JavaScript, dan server pengembangan untuk pengujian.
Selanjutnya, instal Axios untuk menangani permintaan HTTP ke API Django Anda:
npm install axios
Axios membuat pemanggilan API menjadi lebih sederhana dengan mengelola penguraian JSON dan menawarkan penanganan kesalahan yang lebih baik daripada fungsi fetch() bawaan. Axios juga mendukung fitur-fitur seperti pencegat permintaan dan respons.
Struktur folder Anda sekarang akan terlihat seperti ini:
project-root/ ├── backend/ │ ├── manage.py │ ├── backend/ │ └── tasks/ └── frontend/ ├── package.json ├── public/ └── src/
Untuk memastikan semuanya bekerja, jalankan server pengembangan React:
npm start
Ini akan meluncurkan aplikasi di http://localhost:3000, menampilkan halaman selamat datang React default. Biarkan server ini tetap berjalan selama pengembangan - server ini akan secara otomatis dimuat ulang ketika Anda melakukan perubahan.
Mari kita buat komponen TaskList untuk menampilkan tugas yang diambil dari API Django Anda. Tambahkan yang berikut ini ke src/components/TaskList.js:
import React from 'react'; const TaskList = ({ tasks, onToggleComplete, onDeleteTask }) => { return ( <div className="task-list"> <h2>Tugas Anda</h2> {tugas.length === 0 ? ( <p>Tidak ada tugas yang tersedia. Buat tugas pertama Anda!</p> ) : ( <ul> {tasks.map((tugas) => ( <li key={tugas.id} className={`tugas-item ${tugas.completed ? 'completed' : ''}`}> <div className="task-content"> <h3>{task.title}</h3> <p>{task.description}</p> <small>Created: {new Date(task.created_at).toLocaleDateString()}</small> </div> <div className="task-actions"> <button onClick={()=> onToggleComplete(task.id, !task.completed)} className={task.completed ? 'btn-undo' : 'btn-selesai'} > {task.selesai ? 'undo' : 'selesai'} </tombol> <tombol onClick={() => onHapusTugas(task.id)} className="btn-hapus" > Hapus </button> </div> </li> ))} </ul> )} </div> ); }; export default TaskList;
Selanjutnya, buat komponen TaskForm untuk menambahkan tugas baru. Tambahkan ini ke src/components/TaskForm.js:
import React, { useState } from 'react'; const TaskForm = ({ onAddTask }) => { const [title, setTitle] = useState(''); const [description, setDescription] = useState(''); const [isSubmitting, setIsSubmitting] = useState(false); const handleSubmit = async (e) => { e.preventDefault(); if (!title.trim()) return; setIsSubmitting(true); try { wait { await onAddTask({ title: title.trim(), description: description.trim() }); setTitle(''); setDescription(''); } catch (error) { console.error('Kesalahan menambahkan tugas:', error); } finally { setIsSubmit(false); } }; return ( <form onSubmit = {handleSubmit} className = "task-form"; > <h2> Tambah Tugas Baru </h2> <div className="form-grup"> <input type="text" placeholder="Task title" value={title} onChange={(e)=> setTitle(e.target.value)} disabled={isSubmit} required /> </div> <div className="form-group"> <textarea placeholder="Deskripsi tugas (opsional)" value="deskripsi" onChange={(e) => setDescription(e.target.value)} disabled={isSubmit} rows="3" /> </div> <button type="submit" disabled={isSubmit || !title.trim()}> {isSubmit ? 'Menambahkan...' : 'Tambah Tugas'} </button> </form> ); }; ekspor default TaskForm;
Untuk beberapa gaya dasar, buat file src/App.css dan tambahkan:
.task-list { margin: 20px 0; } .task-item { display: flex; justify-content: spasi-antara; align-items: center; padding: 15px; border: 1px solid #ddd; margin-bottom: 10px; border-radius: 5px; } .task-item.completed { background-color: #f0f8f0; text-decoration: line-through; opacity: 0.7; } .task-form { background: #f9f9f9; padding: 20px; border-radius: 5px; margin-bottom: 20px; } .form-group { margin-bottom: 15px; } .form-group input, .form-group textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 3px; } .btn-complete, .btn-undo, .btn-delete { margin-kiri: 10px; padding: 5px 10px; border: none; border-radius: 3px; cursor: pointer; } .btn-complete { background: #28a745; color: white; } .btn-undo { background: #ffc107; color: black; } .btn-delete { background: #dc3545; color: white; }
Hooks React seperti useState dan useEffect memudahkan Anda untuk mengelola state dan berinteraksi dengan backend Django Anda. Untuk memusatkan pemanggilan API, buat file layanan src/services/api.js:
import axios from 'axios'; const API_BASE_URL = 'http://127.0.0.1:8000/api'; const api = axios.create({ baseURL: API_BASE_URL, header: { 'Content-Type': 'application/json', }, }); export const taskAPI = { getTasks: () => api.get('/tasks/'), createTask: (taskData) => api.post('/tasks/', taskData), updateTask: (taskId, taskData) => api.put(`/tasks/${taskId}/`, taskData), deleteTask: (taskId) => api.delete(`/tasks/${taskId}/`), }; ekspor api default;
Terakhir, integrasikan semuanya di src/App.js:
import React, { useState, useEffect } from 'react'; import TaskList from './components/TaskList'; import TaskForm from './components/TaskForm'; import { taskAPI } from './services/api'; import './App.css'; function App() { const [tasks, setTasks] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { fetchTasks(); }, []); const fetchTasks = async () => { try { setLoading(true); const response = await taskAPI.getTasks(); setTasks(response.data); } catch (err) { setError(err); } finally { setLoading(false); } }; // Metode tambahan untuk menambah, memperbarui, dan menghapus tugas akan masuk ke sini }
Dengan pengaturan ini, frontend React Anda siap untuk menangani tugas secara interaktif sambil berkomunikasi dengan backend Django Anda.
Bosan dengan penerapan yang lambat atau batas bandwidth? Server FDC menawarkan daya khusus instan, jangkauan global, dan paket fleksibel yang dibuat untuk skala apa pun. Siap untuk meningkatkan?
Buka Kinerja SekarangSetelah backend dan frontend Anda aktif dan berjalan, langkah selanjutnya adalah memastikan komunikasi yang lancar di antara keduanya. Hal ini melibatkan pengaturan endpoint API, mengelola permintaan, dan mengatasi setiap hambatan integrasi.
Aplikasi React Anda perlu mengetahui di mana menemukan endpoint API Django. Untuk mencapai hal ini, perbarui file src/services/api.js dengan konfigurasi khusus lingkungan:
import axios from 'axios'; // Menentukan API base URL berdasarkan lingkungan const getApiBaseUrl = () => { if (process.env.NODE_ENV === 'production') { return process.env.REACT_APP_API_URL || 'https://your-production-domain.com/api'; } return 'http://127.0.0.1:8000/api'; }; const API_BASE_URL = getApiBaseUrl(); const api = axios.create({ baseURL: API_BASE_URL, header: { 'Content-Type': 'application/json', }, timeout: 10000, // timeout 10 detik }); export const taskAPI = { getTasks: () => api.get('/tasks/'), createTask: (taskData) => api.post('/tasks/', taskData), updateTask: (taskId, taskData) => api.put(`/tasks/${taskId}/`, taskData), deleteTask: (taskId) => api.delete(`/tasks/${taskId}/`), }; ekspor api default;
Untuk produksi, tambahkan berkas .env ke root proyek React Anda dengan konten berikut ini:
REACT_APP_API_URL = https://your-production-domain.com/api
Penyiapan ini memastikan aplikasi React Anda dapat berinteraksi dengan backend Django dengan lancar, baik saat Anda berada di lingkungan pengembangan lokal maupun saat men-deploy ke produksi. Dengan endpoint API yang telah dikonfigurasi, Anda siap untuk mengambil dan memanipulasi data backend.
Setelah konfigurasi API diatur, Anda dapat melakukan operasi CRUD untuk mengelola data antara React dan Django. Perbarui src/App.js untuk menangani operasi-operasi ini:
import React, { useState, useEffect } from 'react'; import TaskList from './components/TaskList'; import TaskForm from './components/TaskForm'; import { taskAPI } from './services/api'; import './App.css'; function App() { const [tasks, setTasks] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { fetchTasks(); }, []); const fetchTasks = async () =& gt; { try { setLoading(true); setError(null); const response = await taskAPI.getTasks(); setTasks(response.data); } catch (err) { setError('Gagal mengambil tugas. Silakan periksa koneksi Anda.'); console.error('Kesalahan mengambil tugas:', err); } finally { setLoading(false); } }; const handleAddTask = async (taskData) => { try { const response = await taskAPI.createTask(taskData); setTasks(prevTasks => [...prevTasks, response.data]); } catch (err) { console.error('Error adding task:', err); throw err; // Re-throw untuk membiarkan TaskForm menangani error } }; const handleToggleComplete = async (taskId, completed) => { try { const taskToUpdate = tasks.find(task => task.id === taskId); const updatedTaskData = { ...taskToUpdate, completed }; const response = await taskAPI.updateTask(taskId, updatedTaskData); setTasks(prevTasks => prevTasks.map(task => task.id === taskId ? response.data : task )); } catch (err) { console.error('Kesalahan memperbarui tugas:', err); } }; const handleDeleteTask = async (taskId) => { if (!window.confirm('Apakah Anda yakin ingin menghapus tugas ini?')) { return; } try { await taskAPI.deleteTask(taskId); setTasks(prevTasks => prevTasks.filter(task => task.id !== taskId)); } catch (err) { console.error('Kesalahan menghapus tugas:', err); } }; if (memuat) { return <div className = "memuat"; > Memuat tugas...</div>; } return ( <div className="App"> <header className="App-header"> <h1>Pengelola Tugas</h1> </header> <main className="container"> {error && <div className="error-message">{error}</div>} <TaskForm onAddTask={handleAddTask} /> <TaskList tugas={tugas} onToggleComplete={handleToggleComplete} onDeleteTask={handleDeleteTask} /> </main> </div> ); } ekspor Aplikasi default;
Kode ini menangani pembuatan tugas, pembaruan, penghapusan, dan manajemen kesalahan. UI segera diperbarui untuk pengalaman pengguna yang lancar, dan kesalahan dikelola dengan baik dengan mengembalikan perubahan atau menampilkan pesan yang sesuai.
Salah satu rintangan yang paling umum ketika menghubungkan Django dan React adalah berurusan dengan kesalahan CORS (Cross-Origin Resource Sharing). Hal ini terjadi karena browser memblokir permintaan antara sumber yang berbeda untuk alasan keamanan. Selama pengembangan, React biasanya berjalan di localhost:3000, sementara Django beroperasi di localhost:8000, menciptakan skenario cross-origin.
Untuk mengatasi masalah CORS, pastikan Anda telah mengonfigurasi header CORS di pengaturan Django Anda seperti yang diuraikan di bagian "Mengonfigurasi Header CORS". Setelah melakukan perubahan, mulai ulang server Django Anda untuk menerapkannya.
Berikut ini adalah beberapa kesalahan permintaan API yang umum terjadi dan solusinya:
pemilik tidak ada dalam permintaan. Selalu periksa kembali apakah frontend Anda mengirimkan semua field yang dibutuhkan oleh model Django.generics.RetrieveUpdateAPIView ke generics.RetrieveUpdateDestroyAPIView untuk menyertakan dukungan untuk permintaan hapus.Dengan terhubungnya backend Django dan frontend React Anda, saatnya untuk meluncurkan kedua server pengembangan dan menguji aplikasi. Hal ini melibatkan menjalankan dua server secara bersamaan dan memastikan bahwa semuanya bekerja sama dengan lancar.
Untuk menjalankan aplikasi Django-React, Anda memerlukan dua jendela terminal - satu untuk setiap server. Pengaturan ini memungkinkan backend dan frontend untuk beroperasi secara independen sambil berkomunikasi melalui panggilan API.
Memulai Server Backend Django:
Buka jendela terminal pertama dan arahkan ke direktori root proyek Django Anda.
Aktifkan lingkungan virtual Python Anda:
source venv/bin/activate
Mulai server pengembangan Django:
python manage.py runserver
Server akan tersedia di http://127.0.0.1:8000/.
Memulai Server Frontend React:
Buka jendela terminal kedua dan arahkan ke direktori proyek React Anda:
cd frontend
Luncurkan server pengembangan React:
npm start
Ini akan secara otomatis membuka jendela peramban di http://localhost:3000/.
Setelah kedua server berjalan, Anda dapat mulai menguji fungsionalitas aplikasi Anda.
Dengan server yang sudah aktif dan berjalan, serta CORS dan API endpoint yang sudah dikonfigurasi dengan benar, sekarang saatnya untuk memvalidasi aliran data antara frontend dan backend.
Verifikasi API Backend:
Uji endpoint API Django Anda secara langsung dengan mengunjungi:
http://localhost:8000/api/tasks
Ini akan menampilkan antarmuka API Django REST Framework yang dapat diramban, di mana Anda dapat melakukan operasi CREATE dan READ.
Akses antarmuka admin Django di:
http://localhost:8000/admin
Masuk dengan kredensial pengguna super Anda untuk membuat, mengedit, atau menghapus tugas. Anda juga dapat menguji operasi UPDATE dan DELETE dengan mengunjungi:
http://localhost:8000/api/tasks/{id}
Pengujian Integrasi Frontend-Backend:
http://localhost:3000 dan konfirmasikan bahwa aplikasi tersebut dimuat dengan benar, menampilkan tugas dari backend Django.Jika aplikasi Anda menyertakan filter atau fitur lainnya, uji secara menyeluruh untuk memastikan task ditampilkan seperti yang diharapkan.
Jika Anda menemukan masalah selama pengujian, berikut ini beberapa perbaikan umum yang bisa dicoba.
Kesalahan Koneksi API:
Pastikan kedua server berjalan pada port masing-masing: Django di http://localhost:8000 dan React di http://localhost:3000.
Gunakan alat pengembang peramban (tab jaringan) untuk mengidentifikasi kode status HTTP seperti 404 atau 500.
Periksa pengaturan proxy pada berkas package.json proyek React Anda:
"proxy": "http://localhost:8000"
Jika Anda melakukan perubahan, mulai ulang server React.
Masalah Startup Server:
Jika server Django tidak memulai, periksa apakah ada migrasi yang hilang:
python manage.py makemigrations python manage.py migrate
Untuk masalah server React, coba instal ulang dependensi:
npm install
Masalah Aliran Data:
console.log() di React atau pernyataan cetak di tampilan Django, untuk melacak aliran data./api/tasks/).Anda telah membuat aplikasi web yang menggabungkan Django dan React, memberikan Anda pengenalan yang solid untuk pengembangan full-stack. Proyek ini menyoroti konsep-konsep penting seperti memisahkan backend dari frontend, melakukan operasi CRUD, dan mengelola permintaan lintas-asal menggunakan pengaturan CORS. Sepanjang perjalanan, Anda telah bekerja dengan Django REST Framework untuk membangun API dan menggunakan hook React untuk manajemen state - keterampilan yang memungkinkan integrasi yang lancar antara dua alat yang kuat ini.
Membawa Aplikasi Anda ke Tingkat Berikutnya
Ada banyak ruang untuk memperluas fungsionalitas aplikasi Anda. Sebagai contoh, Anda dapat menambahkan otentikasi JWT menggunakan Django REST Framework untuk mengamankan data pengguna dan akses API. Hal ini akan memungkinkan Anda untuk menawarkan fitur-fitur khusus pengguna dan pengalaman yang dipersonalisasi.
Jika aplikasi Anda membutuhkan pembaruan secara real-time, pertimbangkan untuk menggunakan Django Channels untuk mengaktifkan dukungan WebSocket. Ini sempurna untuk fitur-fitur seperti dasbor langsung, sistem obrolan, atau notifikasi, mengubah aplikasi Anda menjadi platform yang lebih dinamis dan interaktif.
Seiring dengan pertumbuhan aplikasi Anda, visualisasi data tingkat lanjut menjadi penting. Dengan menggabungkan kemampuan rendering React dengan pengambilan data backend yang efisien, Anda akan dapat menangani dan menampilkan kumpulan data yang kompleks secara efektif.
Bersiap untuk Produksi
Ketika mempersiapkan aplikasi Anda untuk produksi, fokuslah pada penerapan, keamanan, dan performa. Meskipun penyiapan saat ini sangat bagus untuk pengembangan lokal, lingkungan produksi memerlukan langkah ekstra. Ini termasuk menyiapkan variabel lingkungan, mengoptimalkan basis data, dan menerapkan mekanisme penanganan kesalahan yang kuat.
Peningkatan ini dibangun di atas keterampilan yang telah Anda kembangkan - seperti desain API, arsitektur berbasis komponen, dan integrasi full-stack. Dengan menguasai teknik-teknik tingkat lanjut ini, Anda akan diperlengkapi dengan baik untuk menangani proyek-proyek tingkat perusahaan dan terus berkembang sebagai pengembang web.
Menggunakan Django untuk backend dan React untuk frontend menciptakan perpaduan yang kuat untuk mengembangkan aplikasi web modern. Django menyediakan kerangka kerja yang solid yang dikemas dengan alat yang menyederhanakan pengembangan backend, sementara React bersinar dalam membangun antarmuka pengguna yang dinamis dan interaktif.
Kombinasi ini mendorong pemisahan tanggung jawab yang jelas, yang membantu menjaga basis kode tetap terorganisir dan lebih mudah untuk dikembangkan dari waktu ke waktu. Struktur berbasis komponen React mendorong penggunaan ulang elemen UI, dan REST Framework Django menyederhanakan proses pembuatan API, memastikan komunikasi yang lancar antara frontend dan backend. Bersama-sama, keduanya menawarkan pendekatan yang cepat, efisien, dan berpusat pada pengguna untuk pengembangan aplikasi.
Untuk mengatasi masalah CORS antara frontend React dan backend Django, paket django-cors-headers adalah solusi yang praktis. Pertama, instal menggunakan pip. Kemudian, pada file settings.py Anda, tambahkan 'corsheaders' ke dalam daftar INSTALLED_APPS. Setelah itu, tambahkan 'corsheaders.middleware.CorsMiddleware' di bagian paling atas daftar MIDDLEWARE untuk memastikan urutan eksekusi middleware yang tepat.
Selama pengembangan, Anda dapat menyederhanakan berbagai hal dengan mengatur CORS_ORIGIN_ALLOW_ALL = True dalam settings.py Anda. Hal ini mengizinkan permintaan dari sumber mana pun. Namun, dalam lingkungan produksi, akan jauh lebih aman untuk mendefinisikan domain tepercaya tertentu menggunakan pengaturan CORS_ALLOWED_ORIGINS. Pendekatan ini membantu menjaga keamanan yang lebih ketat.
Dengan konfigurasi ini, aplikasi React Anda dapat berinteraksi dengan lancar dengan API Django sambil tetap mematuhi persyaratan CORS.
Untuk mempersiapkan aplikasi Django dan React Anda untuk produksi, mulailah dengan menyesuaikan pengaturan Django Anda untuk pengaturan yang aman. Hal ini termasuk mengatur DEBUG ke False dan menentukan ALLOWED_HOSTS untuk mengontrol domain mana yang dapat mengakses aplikasi Anda. Perubahan ini sangat penting untuk melindungi aplikasi Anda dalam lingkungan live.
Selanjutnya, pilih platform hosting yang dapat diandalkan untuk backend Django dan file statis Anda. Pastikan infrastruktur Anda dibangun untuk menangani lalu lintas dan permintaan tingkat produksi. Untuk frontend React, gunakan build tool yang sesuai untuk menghasilkan build produksi yang dioptimalkan.
Setelah aplikasi React Anda siap, siapkan server web seperti Nginx untuk melayani frontend React dan backend Django. Konfigurasi server yang tepat memastikan aplikasi Anda berjalan dengan efisien dan memberikan pengalaman yang mulus bagi pengguna.
Sebelum ditayangkan, uji aplikasi Anda secara menyeluruh di lingkungan produksi. Langkah ini membantu mengidentifikasi dan menyelesaikan masalah apa pun, memastikan aplikasi Anda bekerja dengan andal setelah diluncurkan.
Jelajahi alat pemantauan terbaik untuk server khusus dan VPS pada tahun 2025, dengan fokus pada AI, otomatisasi, dan analitik waktu nyata.
12 menit baca - 28 November 2025
10 menit baca - 15 Oktober 2025
Opsi yang fleksibel
Jangkauan global
Penerapan instan
Opsi yang fleksibel
Jangkauan global
Penerapan instan