qu'est-ce que create-react-app

create-react-app est un outil d'échafaudage officiel pour créer des applications React d'une seule page produites par l'équipe React de FaceBook ; il intègre Webpack et est configuré avec une série de chargeurs intégrés et de scripts npm par défaut. développer des applications React sans configuration.

Recommandé : "Tutoriel vidéo React"

Create React App est une création officiellement prise en charge de React sur une seule page modalités procédurales de candidature. Il fournit une configuration de construction moderne sans configuration.

Démarrage rapide

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

(npx vient de npm 5.2+ ou supérieur, vérifiez les instructions de l'ancienne version de npm)

Puis ouvrez http://localhost:3000/ pour consultez votre candidature.

Lorsque vous êtes prêt à déployer en production, utilisez npm run build pour créer un bundle compressé.

npm start

Commencez maintenant

Vous n'avez pas besoin d'installer ou de configurer des outils comme Webpack ou Babel. Ils sont préconfigurés et masqués pour que vous puissiez vous concentrer sur votre code.

Créez simplement un projet et c'est tout.

Création de l'application

Vous avez besoin de Node >= 6 sur votre machine de développement locale (mais pas sur le serveur). Vous pouvez facilement basculer les versions de Node entre les projets en utilisant nvm (macOS/Linux) ou nvm-windows.

Pour créer une nouvelle application, vous pouvez choisir l'une des méthodes suivantes :

npx
npx create-react-app my-app
(npx 来自 npm 5.2+ 或更高版本, 查看 npm 旧版本的说明)
npm
npm init react-app my-app
npm init <initializer> 在 npm 6+ 中可用
Yarn
yarn create react-app my-app
yarn create 在 Yarn 0.25+ 中可用

Output

L'exécution de l'une de ces commandes créera une nouvelle application nommée my-app dans le répertoire courant Table des matières. Dans ce répertoire, il générera la structure initiale du projet et installera les dépendances :

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js

Il n'y a pas de configuration ni de structure de dossiers complexe, juste les fichiers nécessaires à la construction de l'application. Une fois l'installation terminée, vous pouvez ouvrir le répertoire du projet :

cd my-app
Scripts

Dans le projet nouvellement créé, vous pouvez exécuter certaines commandes intégrées :

npm start 或 yarn start

Exécuter l'application en mode développement. Ouvrez http://localhost:3000 pour l'afficher dans votre navigateur.

Si vous modifiez le code, la page se rechargera automatiquement. Vous verrez des erreurs de build et des avertissements de charpie dans la console.

Build errors
npm test 或 yarn test

Exécutez l'observateur de test en mode interactif. Par défaut, les tests liés aux fichiers modifiés depuis la dernière validation sont exécutés.

En savoir plus sur les tests.

npm run build 或 yarn build

Créez l'application de production dans le répertoire de construction. Il conditionne correctement React en mode production et optimise la construction pour des performances optimales.

La build sera compressée et le hachage sera inclus dans le nom du fichier.

Votre application est maintenant prête à être déployée.

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!