Integrasikan React ke dalam Django dengan lancar dengan reactify-django CLI

Menambah React pada projek Django boleh meningkatkan pengalaman pembangunan anda, membolehkan anda memanfaatkan kuasa pemaparan dan keselamatan bahagian pelayan Django dengan keupayaan bahagian pelanggan dinamik React. Dengan CLI reactify-django, penyepaduan ini menjadi mudah, membolehkan anda memanfaatkan bahagian belakang teguh Django sambil membina UI yang sangat interaktif dengan React. Selain itu, anda mempunyai fleksibiliti untuk mengkonfigurasi TypeScript untuk penaipan statik dan Tailwind CSS untuk penggayaan yang mengutamakan utiliti, membolehkan persediaan pembangunan moden yang diperkemas dari awal lagi.

Dalam panduan ini, kami akan meneroka sebab menggabungkan Django dan React adalah berfaedah, kemudian gunakan reactify-django untuk menyediakan React dalam kedua-dua projek Django baharu dan sedia ada.

Mengapa Pilih Persediaan Django-React Monolitik?

Seni bina Django-React monolitik memberikan anda yang terbaik dari kedua-dua dunia.
Inilah sebabnya pendekatan ini berfaedah:

• Rendering Sisi Pelayan (SSR): Enjin templat Django dan keupayaan hujung belakang yang berkuasa menawarkan pemaparan sisi pelayan di luar kotak, meningkatkan SEO dan kelajuan pemuatan halaman awal.
• Penghalaan dan Keselamatan Dipertingkat: Penghalaan terbina dalam Django dan ciri keselamatan yang mantap (seperti perlindungan CSRF dan pengendalian sesi) memudahkan pengurusan bahagian belakang, menjadikannya lebih selamat dan lebih mudah untuk mengendalikan penghalaan yang kompleks.
• Penggunaan Bersatu: Dengan React dan Django di bawah satu bumbung, anda boleh menggunakan sebagai satu aplikasi, mengurangkan kerumitan mengurus perkhidmatan bahagian hadapan dan bahagian belakang yang berasingan. Ia juga mengalih keluar keperluan untuk pengepala dan konfigurasi CORS kerana Django dan React berkongsi asal yang sama.

Menggunakan reactify-django untuk menyediakan React dalam Django bermakna pemulaan projek yang lebih pantas dan kurang kod boilerplate, membolehkan anda mula membina ciri dengan segera.

1. Bermula:

Pasang reactify-django
Untuk menggunakan reactify-django, anda memerlukan Node.js dipasang pada mesin anda. Sebaik sahaja anda mempunyai Node, anda boleh menjalankan reactify-django secara langsung dengan npx:
npx reactify-django

Gambaran Keseluruhan Arahan
CLI mempunyai dua arahan utama:

• init Sediakan projek Django baharu dengan React disertakan.
• tambah Adds React pada projek Django sedia ada.

2. Menyediakan Projek Django Baharu dengan React

Untuk bermula dari awal, gunakan arahan init untuk mencipta projek Django baharu yang dikonfigurasikan dengan React.

1. Jalankan Perintah:

npx reactify-django init

2. Jawab Gesaan Persediaan:
Anda akan diminta untuk menyediakan:

• Nama Projek: Nama untuk projek Django anda.
• Nama Apl: Nama untuk apl Django tempat React akan disepadukan.
• Persediaan Pilihan: Pilih sama ada untuk menggunakan TypeScript dan/atau Tailwind CSS dalam projek untuk keupayaan alatan dan penggayaan tambahan.

3. Penjanaan dan Konfigurasi Fail:

CLI akan menyediakan fail projek Django, mengkonfigurasi Webpack untuk penggabungan React dan menambah kebergantungan yang diperlukan untuk TypeScript dan/atau Tailwind jika dipilih. Ia secara automatik menjana fail templat/nama_aplikasi_anda/index.html sebagai titik permulaan untuk React, dipetakan ke URL akar dengan views.index.

Contoh Penggunaan:

npx reactify-django init -c ./my-new-project

Bendera -c (atau --cwd) membolehkan anda menentukan direktori sasaran jika anda tidak menjalankannya dalam folder projek yang anda inginkan.

Nota tentang Konfigurasi URL:
Secara lalai, arahan init dalam reactify-django memetakan apl Django anda ke URL akar (""). Konfigurasi ini berbeza sedikit daripada pengesyoran biasa Django, yang mencadangkan penggunaan awalan khusus apl untuk URL, seperti:

from django.urls import include, path

urlpatterns = [
    path("your_app_name/", include("your_app_name.urls")),
    path("admin/", admin.site.urls),
]

Walau bagaimanapun, untuk kesederhanaan, persediaan yang dijana termasuk URL apl anda terus pada peringkat akar:

from django.urls import include, path

urlpatterns = [
    path("", include("your_app_name.urls")),
    path("admin/", admin.site.urls),
]

Pendekatan ini menyediakan titik masuk tahap asas yang bersih untuk aplikasi satu halaman. Ia boleh diubah suai untuk memasukkan awalan nama apl jika anda lebih suka mengikuti konvensyen Django atau jika anda merancang untuk mempunyai berbilang apl Django.

3. Mengintegrasikan React ke dalam Projek Django Sedia Ada

Jika anda sudah mempunyai projek Django, anda boleh menggunakan arahan tambah untuk menyediakan React dalam apl Django sedia ada.

1. Navigasi ke Direktori Apl Anda:

laluan cd/ke/apl-django-anda

2. Jalankan Perintah:

npx reactify-django add

3. Pilih pilihan tambahan:

Anda akan digesa untuk konfigurasi TypeScript dan Tailwind, membolehkan anda menyesuaikan persediaan React anda mengikut keperluan anda.
Perintah ini menjana webpack.config.js dalam direktori apl anda dan meletakkan berkas JavaScript dalam static/your_app_name/js/ sebagai bundle.js. Untuk memasukkan React dalam templat anda, anda boleh memuatkan berkas ini seperti berikut:

{% beban statik %}
<div>



<p><strong>Contoh Penggunaan:</strong></p>

<p>npx reactify-django add -c ./path/to/app</p>

<h2>
  
  
  4. Menjalankan dan Membina Projek
</h2>

<p>Setelah persediaan selesai, anda boleh mula membangunkan serta-merta:</p>

• Mod Pembangunan

1. Mulakan Pelayan Pembangun Webpack:
Dalam direktori apl Django anda (di mana package.json terletak), jalankan:

npm mula

Ini akan melancarkan pelayan pembangunan Webpack, yang menggabungkan kod React anda pada setiap simpan dan mengeluarkannya ke folder statik Django.

2. Jalankan Pelayan Pembangunan Django:
Dalam sesi terminal yang berasingan, mulakan pelayan Django dengan:

python manage.py runserver

Kini anda boleh mengakses apl React daripada pelayan pembangunan Django, membenarkan pembangunan sisi pelayan dan sisi klien secara serentak.

• Bina Pengeluaran

Apabila anda bersedia untuk menggunakan, cd ke dalam direktori apl Django dan jalankan:

npm run build

Ini akan menggabungkan apl React untuk pengeluaran, meletakkan JavaScript yang dioptimumkan dalam direktori statik/ untuk Django disiarkan.

5. Menyesuaikan Persediaan Anda

Selepas menjalankan reactify-django, fail konfigurasi (cth., tetapan webpack.config.js dan Django) tersedia untuk penalaan halus. Fleksibiliti ini membolehkan anda melaraskan tetapan agar sesuai dengan keperluan projek anda dengan lebih baik.

Kesimpulan

CLI reactify-django memudahkan proses menambahkan React pada projek Django, sama ada memulakan baharu atau menambahkan React pada apl sedia ada. Dengan menggabungkan kekuatan bahagian belakang Django dengan fleksibiliti bahagian hadapan React, anda boleh mencipta aplikasi monolitik yang teguh dan kaya dengan ciri.
Untuk mencubanya, pasang CLI menggunakan npx reactify-django dan terokai cara ia boleh menyelaraskan proses pembangunan anda. Nikmati pengekodan dengan yang terbaik daripada Django dan React!

Saya harap anda mendapati alat ini berguna untuk projek anda. Anda boleh mencari projek ini di GitHub. Jangan ragu untuk menyumbang atau melaporkan sebarang isu!

Atas ialah kandungan terperinci Integrasikan React ke dalam Django dengan lancar dengan reactify-django CLI. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!