Créer une application React: Obtenez des projets React Ready rapidement

Créer une vue rapide React App (CRA)

L'outil de ligne de commande de Facebook Créer une application React (CRA) simplifie la création de projets React. Il a préconfiguré le processus de construction WebPack, éliminant la difficulté de créer des pipelines de construction complexes.

CRA peut être exécuté à partir de NPM ou de fil, et il configure une structure de projet contenant le package react-scripts, qui contient tous les scripts de configuration et de construction. L'outil comprend également un serveur de développement local et prend en charge les fonctionnalités ES6 et ES7, les modules CSS, les tests d'unité de plaisanterie et Eslint.

Utiliser npm run build pour créer un package d'environnement de production, générer une version d'application optimisée et se préparer au déploiement. Il prend également en charge les variables d'environnement, la segmentation du code, le dactylographie, les applications Web progressives et la mesure des performances à l'aide de web vitals.

Si l'ARC fournit des fonctionnalités insuffisantes, l'utilisateur peut choisir d'exécuter npm run eject, qui copiera la configuration de WebPack et créera des scripts dans le projet, permettant la personnalisation. Alternativement, les utilisateurs peuvent emballer react-scripts et maintenir leurs propres branches, en ajoutant les fonctionnalités requises.

comment créer le travail de réact de l'application

Créer l'application React est un outil autonome qui peut être exécuté à l'aide de NPM ou de fil. Générer et exécuter une nouvelle application React dans un nouveau dossier avec seulement quelques commandes:

en utilisant npm:

npx create-react-app new-app
cd new-app
npm start

en utilisant du fil:

yarn create react-app new-app
cd new-app
yarn start

Créer l'application React définira la structure du projet suivante:

<code>new-app
├── .gitignore
├── node_modules
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── README.md
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   ├── reportWebVitals.js
│   └── setupTests.js
└── yarn.lock</code>

Il ajoute également un package react-scripts à votre projet avec tous les scripts de configuration et de construction. En d'autres termes, votre projet dépend du package react-scripts, pas du create-react-app lui-même. Une fois l'installation terminée, vous pouvez démarrer le serveur de développement et commencer le traitement de votre projet.

fonctions principales

• Server de développement local: npm start Un serveur de développement WebPack sera démarré, y compris un observateur, qui rechargera automatiquement l'application après avoir modifié le contenu. À partir de V4, créez l'application React prend en charge la rafraîchissement rapide de React comme alternative au remplacement des modules chauds.

• ES6 et ES7 Prise en charge: Utilisez babel-preset-react-app pour prendre en charge les fonctionnalités ES6 et ES7, telles que async/await, les propriétés d'objet / propagation, dynamique import(), etc.

• Importation des ressources: Les fichiers, images ou polices CSS peuvent être importés à partir de modules JavaScript. Une fois l'application construite, l'application Create React copie les fichiers dans le dossier de construction.

• Style: prend en charge l'importation de fichiers CSS, et tous les fichiers CSS sont fusionnés dans un seul package lors de la construction. Prend en charge les modules CSS (*.module.css) et les fichiers SASS (.scss, et doit être installé séparément node-sass).

• Test unitaire: npm test Exécutez le test avec la plaisanterie et démarrez un observateur pour relancer le test lorsque vous modifiez le contenu.

• eslint: Pendant le processus de développement, le code sera analysé statiquement via Eslint.

• Créer un package d'environnement de production: npm run build Créez un ensemble d'environnement de production optimisé.

• Déploiement: Le résultat de build généré est un fichier statique qui peut être facilement déployé dans divers environnements.

• Variables d'environnement: prend en charge l'utilisation des variables d'environnement commençant par REACT_APP_.

• Proxy inversé: Vous pouvez proxy les demandes en configurant le champ package.json dans proxy.

• Segmentation de code: prend en charge Dynamic import() pour la segmentation du code.

• TypeScript Prise en charge: Les projets TypeScript peuvent être créés à l'aide de l'option --template typescript.

• Prise en charge des applications Web progressives (PWA): Vous pouvez utiliser les options --template cra-template-pwa ou --template cra-template-pwa-typescript pour créer des projets PWA.

• WEB VITALS: Utilisez la bibliothèque web-vitals pour suivre les métriques Web Vitals.

Abandonnez en utilisant CRA

Si l'ARC n'est pas suffisamment fonctionnelle, vous pouvez utiliser npm run eject pour copier la configuration Webpack et créer des scripts dans votre projet de personnalisation. Alternativement, vous pouvez emballer react-scripts> et maintenir vos propres succursales.

Résumé

Créer l'application React est un outil pratique pour démarrer un nouveau projet React, simplifier le processus de construction et fournir des fonctionnalités riches. Qu'il s'agisse d'un prototype rapide ou d'un grand projet, il fait gagner beaucoup de temps de développement.

(La partie FAQ est omise car elle est dupliquée avec l'article et est trop longue.)

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!