Maison > Article > interface Web > É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
réagir-boilerplate
réagir- redux-starter-kit
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
npm run eject2.
Installer less-loader et less
npm install less-loader less --save-dev3. 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émarragenpm start2 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 buildTestez 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 startC'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 buildAjoutez simplement un élément de configuration dans le fichier package.json.
8.ajax ?
Remplacer par fetch"proxy": http://localhost:3001/,
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!