Qu'est-ce que create-react-app ? create-react-app crée des applications pour l'environnement de développement React

Qu'est-ce que create-react-app ? Que peut faire create-react-app ? Cet article vous expliquera comment créer un environnement de développement React à l'aide de create-react-app.

1. Qu'est-ce que create-react-app ?
Il est très difficile pour les débutants de construire un projet React et de construire son environnement de développement ! Par conséquent, Facebook a spécialement développé la commande create-react-app pour créer l'environnement de développement du projet React !

create-react-app est créé sur la base de webpack+ES6.

2. Comment utiliser.
Exécutez les commandes suivantes sur la ligne de commande dans l'ordre pour terminer la construction du projet.

cnpm install -g create-react-appcreate-react-app my-app 
//这里的my-app是随便起的一个项目名称而已。
cd my-app/
npm start

Le répertoire final du projet est le suivant :

Le rendu est comme ceci :

Description du répertoire du projet :

3. 🎜 >Dossier public : l'index.html à l'intérieur est le modèle de projet de la page d'entrée d'index qui est finalement empaqueté pour l'ensemble du projet React. Mais cela n'a rien à voir avec l'écriture de notre code, et est lié à l'affichage final de la page.

dossier src : c'est là que nous écrivons le code.

src/index.js : C'est le fichier js d'entrée de l'ensemble du projet.
src/app.js : C'est un composant introduit par index et est également représenté par un fichier js.
src/index.css : fichier de style dans index.js.

src/app.css : C'est le fichier de style de app.js.

logo.svg : Il s’agit d’un fichier image svg. Utilisé pour l'affichage de l'interface.

4. Cependant, personnellement, je ne serai pas satisfait d'une telle structure, et elle n'est pas adaptée au développement. Ce qui suit est une première transformation que j'ai effectuée :

Changer le répertoire, changer le chemin du projet et continuer notre travail de développement de projet dans ce répertoire.

Recommandations associées :
Tutoriel du mini programme WeChat Configuration du mini programme

Différences comparatives entre le mini programme WeChat et le mini programme Alipay Présentation

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!