REACT x persediaan FLASK

APA ITU FLASK?
FLASK ialah rangka kerja web yang ringan untuk Python yang membolehkan anda membina apl web dengan cepat dan dengan kod boilerplate yang minimum. Mari melangkah-.

MARI MULAKAN LANGKAH DEMI LANGKAH
Mari mulakan dengan membuat persediaan yang diperlukan. Pergi ke Vite dan salin arahan ini:

npm create vite@latest

Saya menggunakan MAC sahaja, jadi persediaan untuk WINDOWS mungkin berbeza sedikit. Seterusnya, buka terminal dan tampal kod yang anda salin dari tapak web Vite. Sebaik sahaja anda menjalankan kod anda akan digesa kepada perkara berikut:

? Project name: › vite-project

Ganti vite-project dengan nama projek anda sendiri. Selepas anda memberikannya nama, anda digesa untuk memilih rangka kerja, dalam kes saya, saya akan memilih REACT sebagai rangka kerja saya, tetapi anda boleh memilih rangka kerja yang anda kenali dan tekan enter:

? Select a framework: › - Use arrow-keys. Return to submit.
    Vanilla
    Vue
❯   React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Others

Setelah anda memilih rangka kerja anda, kini anda boleh memilih varian (bahasa) pilihan anda. Saya biasa dengan JavaScript jadi saya akan memilihnya. Ingat: anda perlu memilih varian yang lebih anda kuasai dan tekan tab enter.

? Select a variant: › - Use arrow-keys. Return to submit.
    TypeScript
    TypeScript + SWC
❯   JavaScript
    JavaScript + SWC
    Remix ↗

Selepas gesaan ini dipilih, terdapat arahan berikut yang diberikan kepada anda untuk menjalankannya:

Scaffolding project in /Users/Marlon/Development/code/practice-phase-4/flask_app_dev/my-app...

Done. Now run:

  cd my-app
  npm install
  npm run dev

jika anda berjaya menjalankan kod di atas, anda akan sampai ke hos tempatan anda:

  VITE v5.4.8  ready in 1455 ms

  ➜  Local:   http://127.0.0.1:5555/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

Anda boleh menyalin alamat http dan menampalnya dalam penyemak imbas anda dan anda akan melihat halaman Vite React, yang kini anda boleh gunakan untuk projek anda.

Sekarang buka editor kod anda, saya menggunakan Kod Visual Studio sebagai editor kod saya. Sekali lagi, anda boleh menggunakan editor kegemaran anda. Seterusnya, di dalam terminal bersepadu VSCode, anda perlu menjalankan arahan ini secara berasingan untuk mendapatkan alamat hos setempat anda, untuk mengedit dan mula membina apl anda.

npm install
npm run dev

Mari cd di dalam src dan anda akan melihat fail berikut

src % tree
.
├── App.css
├── App.jsx
├── assets
│   └── react.svg
├── index.css
└── main.jsx

Di dalam 'App.jsx' anda boleh mengedit dan/atau memadamkan kod di dalam fail itu dan menambah kod anda sendiri dengan sewajarnya. Fail ini mengandungi logo Vite dan React.

Setelah anda membiasakan diri dengan fail yang telah anda buat, kini kami boleh menyediakan direktori bahagian hadapan dan bahagian belakang. Mari buat kemudian dengan menjalankan kod ini:

mkdir backend; mkdir server; mkdir frontend

Mari dapatkan persediaan projek kami agar kelihatan lebih kurang seperti ini:

my-app/
├── backend/
|       server/
│       ├── app.py
│       ├── models.py
│       ├── requirements.txt
├── frontend/
│   ├── src/
│   ├── public/
│   ├── package.json

Buka dua terminal:
Satu terminal adalah untuk bahagian belakang/pelayan dan satu lagi untuk bahagian hadapan/src.
Bahagian belakang/pelayan jalankan arahan berikut:

pipenv install && pipenv shell

untuk memastikan semua kebergantungan dipasang dan untuk mencipta Pipfile kami.

Di dalam frontend/src jalankan arahan berikut:

npm install
npm run dev

untuk memastikan semua fail yang diperlukan seperti fail package.json kami dicipta.

Bahagian 2 Akan Datang....

Atas ialah kandungan terperinci REACT x persediaan FLASK. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!