réagir crée un projet basé sur create-react-app

Cet article présente principalement la création de projets React basés sur create-react-app. Maintenant, je le partage avec vous et le donne comme référence.

Qu'est-ce que create-react-app

create-react-app est une bibliothèque js qui peut être utilisée pour créer facilement des projets React sans avoir à créer React. Il est difficile de configurer le webpack, de déboguer le serveur, d'exécuter des scripts, etc. pendant le projet. Il vous suffit d'utiliser cette bibliothèque pour terminer la création et l'initialisation du projet React en un seul clic

D'abord. , utilisez create-react-app Pour créer un projet React, veuillez vous référer à https://github.com/facebookincubator/create-react-app

Remarque : tout ce qui est entouré de "[ ]" est contenu personnalisable, par exemple : cd [nom-projet] peut en fait être cd mon-application ou cd mon-projet. En bref, le contenu du package "[ ]" ne représente que les variables correspondantes dans le contexte.

npm install -g create-react-app 
 
create-react-app [project-name] 
cd [project-name]

Après avoir exécuté la commande ci-dessus, vous êtes déjà dans le projet nouvellement créé. Exécutez maintenant npm run start et npm run build. Cependant, toutes les configurations sont masquées par défaut. Pour personnaliser la configuration, vous devez exécuter une commande :

npm run eject

Vous serez invité : Cette commande est irréversible. Si vous souhaitez continuer, saisissez y pour que tous les éléments de configuration apparaissent. À ce stade, vous pouvez également effectuer des configurations personnalisées, telles que :

Modifier l'emplacement de sortie après la construction

Les ressources statiques telles que js/css/img seront sortie par défaut Sous build -> static, ses éléments de configuration sont dans config ->

1. js est dans l'attribut de sortie, vers la ligne 60

2. css est déclaré dans la variable cssFilename au début, à propos ligne 38 ;

3. L'image est dans la configuration du chargeur du module -> règles, à propos de la ligne 143;
   

La carte le fichier est généré par le contrôle d'attribut devtool, si vous ne voulez pas de carte, commentez-le simplement, à propos de la ligne 57

manifest.json est dans la configuration de ManifestPlugin, à propos de la ligne 294 ; >

Basique Le modèle est dans la configuration de HtmlWebpackPlugin, mais vous pouvez voir qu'il fait référence au fichier './paths.js', vous devez donc modifier l'attribut appHtml dans config -> js;

par défaut Le répertoire de construction sera effacé lors de la construction. L'élément de configuration est fs.emptyDirSync(paths.appBuild); dans les scripts build.js; supprimer les anciens fichiers (cela peut arriver lors de la version en niveaux de gris) Utilisé ;

Aucun autre moyen de modifier la configuration sans éjection

En plus de l'exécution de npm éjecter exposant tous les fichiers de configuration, il existe d'autres moyens de modifier la configuration. En raison du thème de cet article, nous ne le développerons pas et ne donnerons que des liens pertinents.

Une méthode plus élégante (certaines personnes pensent) consiste à introduire le plug-in react-app-rewired pour obtenir un remplacement de configuration. Vous devez créer un nouveau fichier config-overrides.js dans le répertoire racine et écrire ce que vous souhaitez configurer (pourquoi y a-t-il une autre configuration...) ? Vous devez également réécrire npm start et les autres commandes associées. Cliquez sur le lien. pour voir les détails.

Pour un autre exemple, reportez-vous à l'ajout d'un préprocesseur CSS (Sass, Less, etc.) recommandé sur la page d'accueil git de create-react-app. L'idée générale est d'installer d'abord un plug-in node-sass-chokidar capable de compiler sass dans l'environnement de nœud, puis d'utiliser npm-run-all pour exécuter npm start et watch-css (commandes pour surveiller les fichiers sass) au niveau du nœud. en même temps. Personnellement, j'ai l'impression que c'est un grand cercle, alors reparlons-en. . .

react etc. ne sont pas emballés sous forme de variables globales

Afin d'utiliser cdn, nous citons souvent les balises de script de React ou d'autres bibliothèques similaires dans la page , de sorte que lors de la navigation Il existe des variables globales correspondantes dans l'environnement du serveur, tout en réduisant la taille de js. Prenons l'exemple de réaction ci-dessous.

Ajoutez d'abord le code suivant à la configuration de config -> webpack.config.prod.js :

module.exports = { 
 ... 
 externals: { 
 'react': 'React', 
 'react-dom': 'ReactDOM' 
 }, 
 ... 
}

Key correspond au nom de la bibliothèque, et value correspond au nom de la variable globale. A noter ici que le nom de la variable globale doit être cohérent avec le nom de l'import dans le code, et doit être standardisé.

De plus, le fichier modèle de configuration du plug-in html-webpack-plugin doit être modifié ici. Parce que des variables globales doivent être ajoutées, ajoutez simplement le script correspondant. Prenons l'exemple de public -> index.html :

<!DOCTYPE html> 
<html lang="en"> 
 <head> 
 <meta charset="utf-8"> 
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
 <meta name="theme-color" content="#000000"> 
 <!-- 
  code here 
 --> 
 </head> 
 <body> 
 <noscript> 
  You need to enable JavaScript to run this app. 
 </noscript> 
 <p id="root"></p> 
 <!-- 
  code here 
 --> 
<!-- 新插入的两个js --> 
 <script src="http://st01.chrstatic.com/themes/chr-cdn/react/v0.14.8/react.min.js"></script> 
 <script src="http://st01.chrstatic.com/themes/chr-cdn/react/v0.14.8/react-dom.min.js"></script> 
 </body> 
</html>

Q : Puisqu'il y a des variables globales dans le navigateur, telles que window . React, alors il n'est pas nécessaire d'importer React depuis 'react' dans le code. De plus, s'il n'est pas nécessaire d'importer React, alors à quoi sert de définir des paramètres externes (cet endroit est très déroutant, est-ce la raison) ?

Réponse : Si vous supprimez l'importation et l'externe comme mentionné ci-dessus, le fichier construit peut s'exécuter correctement sur le navigateur. Mais si le serveur est démarré pendant le développement, le côté serveur ne peut pas analyser les références et les mises à jour à chaud ne peuvent pas être effectuées. De plus, pour l'isomorphisme front-end et back-end, le côté serveur ne peut pas trouver de dépendances. Par conséquent, si vous activez la surveillance statique des fichiers et actualisez le navigateur manuellement, il n'y a en théorie aucun problème sans importation et externe.

Installer Sass ou moins (prendre Sass comme exemple)

npm install sass-loader node-sass --save-dev

ou

npm install less-loader less --save-dev

安装后修改config -> webpack.config.dev.js 和 webpack.config.prod.js，分别在css的loader配置里面修改两处：
一是 test: /\.css$/ 增加scss和sass；二是use里面最后再加个loader，直接加 "sass-loader" 就可以了，也不用配置别的了（less同）。

//test: /\.css$/ 
test: /\.(css|scss|sass)$/ 
... 
use:[ 
 { 
 ... 
 }, 
 "sass-loader" 
]

添加ant-design

安装antd及按需加载的插件babel-plugin-import，参考https://ant.design/docs/react/introduce-cn

npm install antd babel-plugin-import --save-dev

在config -> webpack.config.dev.js 和 webpack.config.prod.js 里（或者 .babelrc 文件）的babel-loader的options配置里，加入如下代码：

plugins: [ 
 ['import', { libraryName: 'antd', style: 'css' }] // `style: true` 会加载 less 文件 
]

如果启用了 style:true 那就必须是装less了

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

Vue实现搜索 和新闻列表功能简单范例

vue axios 表单提交上传图片的实例

vue中实现图片和文件上传的示例代码

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!