Maison > Article > interface Web > 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 ->
js est dans l'attribut de sortie, vers la ligne 60
css est déclaré dans la variable cssFilename au début, à propos ligne 38 ;
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 ; >
Aucun autre moyen de modifier la configuration sans éjection
react etc. ne sont pas emballés sous forme de variables globales
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é.
<!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) ?
Installer Sass ou moins (prendre Sass comme exemple)
npm install sass-loader node-sass --save-devou
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了
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
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!