Configuration REACT x FLASK

QU'EST-CE QUE LE FLACON ?
FLASK est un framework Web léger pour Python qui vous permet de créer une application Web rapidement et avec un minimum de code passe-partout. Allons-y étape-.

COMMENÇONS ÉTAPE PAR ÉTAPE
Commençons par créer la configuration nécessaire. Allez sur Vite et copiez cette commande :

npm create vite@latest

J'utilise uniquement MAC, donc la configuration pour WINDOWS peut être un peu différente. Ensuite, ouvrez le terminal et collez le code que vous copiez depuis le site Web de Vite. Une fois que vous aurez exécuté le code, vous serez invité à ce qui suit :

? Project name: › vite-project

Remplacez le vite-project par votre propre nom de projet. Après lui avoir donné un nom, vous êtes invité à sélectionner le framework, dans mon cas, je sélectionnerai REACT comme framework, mais vous pouvez sélectionner le framework que vous connaissez et appuyer sur Entrée :

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

Une fois que vous avez sélectionné votre framework, vous pouvez maintenant sélectionner la variante (langue) de votre choix. Je connais JavaScript, je vais donc choisir cela. N'oubliez pas : vous devez choisir la variante que vous dominez le plus et appuyer sur l'onglet Entrée.

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

Une fois ces invites choisies, les commandes suivantes vous sont données pour les exécuter :

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

Si vous avez exécuté les codes ci-dessus avec succès, vous arriverez chez votre hôte local :

  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

Vous pouvez copier l'adresse http et la coller dans votre navigateur et vous verrez la page Vite React, que vous pouvez maintenant utiliser pour votre projet.

Ouvrez maintenant votre éditeur de code, j'utilise Visual Studio Code comme éditeur de code. Encore une fois, vous pouvez utiliser votre éditeur préféré. Ensuite, dans le terminal intégré de VSCode, vous devez exécuter ces commandes séparément pour obtenir votre adresse d'hôte local, pour modifier et commencer à créer votre application.

npm install
npm run dev

Mettons cd à l'intérieur de src et vous verrez les fichiers suivants

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

Dans 'App.jsx', vous pouvez modifier et/ou effacer le code contenu dans ce fichier et ajouter votre propre code en conséquence. Ce fichier contient le logo Vite et React.

Une fois que vous êtes familiarisé avec les fichiers que vous avez créés, nous pouvons maintenant configurer les répertoires frontend et backend. Créons ensuite en exécutant ce code :

mkdir backend; mkdir server; mkdir frontend

Faisons en sorte que la configuration de notre projet ressemble plus ou moins à ceci :

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

Ouvrez deux terminaux :
Un terminal sera pour le backend/serveur et l'autre sera pour le frontend/src.
Dans le backend/serveur, exécutez les commandes suivantes :

pipenv install && pipenv shell

pour vous assurer que toutes les dépendances sont installées et créer notre Pipfile.

Dans frontend/src, exécutez les commandes suivantes :

npm install
npm run dev

pour garantir que tous les fichiers nécessaires tels que nos fichiers package.json sont créés.

Partie 2 à venir....

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!