Étapes détaillées pour créer un environnement de développement React à l'aide de create-react-app

Cette fois, je vais vous donner un guide détaillé étape par étape sur l'utilisation de create-react-app pour créer un environnement de développement React. Quelles sont les précautions pour utiliser create-react-app pour créer. un environnement de développement React. Voici des cas pratiques.

Échafaudages couramment utilisés

1. réagir-boilerplate

2. réagir- redux-starter-kit

3. create-react-app (le plus suivi sur git)

Utiliser create-react -app construit rapidement un environnement de développement React

create-react-app vient de Facebook Avec cette commande, nous pouvons rapidement créer un environnement de développement React sans configuration.

Le projet créé automatiquement par create-react-app est basé sur Webpack + ES6.

Exécutez la commande suivanteCréer un projet :

$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ npm start

conseils :

Si l'utilisation de npm est très lente, vous pouvez utiliser le cnpm personnalisé de Taobao ( gzip compression support) outil de ligne de commande au lieu du npm par défaut :

$ npm install -g cnpm --registry=https://registry.npm.taobao.org
$ npm config set registry https://registry.npm.taobao.org

Comment compiler moins

1. > Fichier de configuration

npm run eject

2.

Installer less-loader et less

npm install less-loader less --save-dev

3. Modifier la configuration du webpack

Modifier webpack.fichiers de configuration config.dev.js et webpack.config-prod.js

test: /\.css$/ 改为 /\.(css|less)$/

Trouvez une utilisation sous ce test, ajoutez un chargeur

{
  loader: require.resolve('less-loader') // compiles Less to CSS
}

et réexécutez le projet moins .

Structure du projet

répertoire src

le répertoire src est utilisé pour stocker le nôtre. Pour le code, vous pouvez créer des sous-répertoires sous src. Seuls les fichiers du répertoire racine src seront compilés par webpack, les fichiers doivent donc être placés sous le répertoire racine src, sinon ils ne seront pas reconnus.

répertoire public

Seuls les fichiers du répertoire public seront référencés par public/index.html

astuce : index sous public et src. Le fichier html doit exister et ne peut pas être renommé

Commandes communes

1 Commande de démarrage

npm start

2 Commande de compilation et de package. Compilez le code dans l'environnement de production et placez-le dans le répertoire de construction pour empaqueter correctement le code, optimisez, compressez et utilisez le hachage pour renommer le fichier

npm run build

Testez après la modification du fichier

4. Commandes de structure. La commande de configuration de webpck est exposée à l'origine dans l'échafaudage, l'élément de configuration est invisible et doit être modifié avant d'exécuter cette commande (il s'agit d'une commande unique, une fois structurée, elle est irréversible.)

npm test

5.https Run

npm run eject

6. Compilation en ligne

set HTTPS=true&&npm start

C'est un gros point fort de create-react-app. Il permet à votre application de tromper et de traduire le code qui s'exécute dans le. environnement de production en ligne. Le fichier compilé est très petit et le nom du fichier a également une valeur de hachage, ce qui est pratique pour nous de le mettre en cache, et il fournit également un serveur afin que nous puissions voir des effets similaires à l'environnement de production en ligne localement, ce qui c'est vraiment super pratique.

Une seule ligne de commande :

Développement 7.api

npm run build

Ajoutez simplement un élément de configuration dans le fichier package.json.

8.ajax ?

Remplacer par fetch

"proxy": http://localhost:3001/,

Outil de débogage des outils de développement React (https://github.com/facebook/react-devtools)

npm install whatwg-fetch

import 'whatwg-fetch'
fetch('/power-mnjy-mobile/intf/h5/user/login?mobile=13000000001&pwd=a111111&ignoreCsrfToken=true')
  .then(res => res.json())
  .then((data) => {
   this.setState({ value:data });
  });

Ajouter une extension dans Chrome React Developer outils, pensez à redémarrer le navigateur (redémarrez, redémarrez, dites trois fois les choses importantes), l'option de réaction apparaîtra dans les outils de développement Chrome.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser AngularJS pour implémenter le changement d'onglet

Comment utiliser Koa2 pour développer WeChat 2D Scan le QR code pour payer

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!