react creates a project based on create-react-app

This article mainly introduces the creation of react projects based on create-react-app. Now I share it with you and give you a reference.

What is create-react-app

create-react-app is a js library that can be used to easily create react projects without having to create react It is troublesome to configure webpack, debug the server, run scripts, etc. during the project. You only need to use this library to complete the creation of the react project with one click. Initialization project

First, use create-react-app To create a react project, please refer to https://github.com/facebookincubator/create-react-app

Note: Everything wrapped with "[ ]" is customizable content, for example: cd [project-name] may actually be cd my-app or cd my-project. In short, the contents of the "[ ]" package only represent the corresponding variables in the context.

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

After running the above command, you will already be in the newly created project. At this time, run npm run start and npm run build. However, all configurations are hidden by default. To customize the configuration, you need to run a command:

npm run eject

You will be prompted with this command. Irreversible, do you want to continue? Enter y so that all configuration items will appear. At this time, you can also make some customized configurations, such as:

Modify the output location after build

js / css / img and other static resources will be output to by default Below build -> static, its configuration items are in config -> webpack.config.prod.js.

1. js is in the output attribute, about line 60;

2. css is declared in the cssFilename variable at the beginning, about line 38 ;

3. The picture is in the loader configuration of module -> rules, about line 143;
   

map file is generated by devtool Attribute control, if you don’t want map, just comment it out, about line 57;

manifest.json is in the configuration of ManifestPlugin, about line 294;

Basic The template is in the configuration of HtmlWebpackPlugin, but you can see that it refers to the './paths.js' file, so you need to modify the appHtml attribute in config -> paths.js;

The default is The build directory will be cleared when building. The configuration item is fs.emptyDirSync(paths.appBuild); in scripts -> build.js; commenting out this sentence will not delete the old files (this may happen during grayscale release) Used);

No other ways to modify the configuration without eject

In addition to npm run eject exposing all configuration files, there are other ways to modify the configuration, Due to the theme of this article, we will not expand it and only give relevant links.

A more elegant method (some people think) is to introduce the react-app-rewired plug-in to achieve configuration override. You need to create a new config-overrides.js file in the root directory, and write whatever you want to configure (why is there another configuration...)? You also need to rewrite npm start and other related commands. Click the link to view the details.

For another example, refer to the Adding a CSS Preprocessor (Sass, Less etc.) recommended on the git homepage of create-react-app. The general idea is to first install a plug-in node-sass-chokidar that can compile sass in the node environment, and then use npm-run-all to run npm start and watch-css (commands to monitor sass files) at the same time. Personally, I feel like it's a big circle, so let's discuss it again. . .

react, etc. are not packaged as global variables

In order to use cdn, we often reference the script tags of react or other similar libraries in the page, so that when browsing There are corresponding global variables in the server environment, while reducing the size of js. Let's take react as an example.

First add the following code to the configuration of config -> webpack.config.prod.js:

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

key corresponds to the name of the library, and value corresponds to the name of the global variable. It should be noted here that the name of the global variable must be consistent with the name of the import in the code, and must be standardized.

In addition, the template file of the html-webpack-plugin plug-in configuration needs to be modified here. Because global variables need to be added, just add the corresponding script. Take public -> index.html as an example:

<!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: Since there are global variables in the browser, such as window.React, Then there is no need to import React from 'react' in the code. Furthermore, if there is no need to import react, then what is the use of setting externals (this place is very clear, is this the reason)?

Answer: If you remove import and external as mentioned above, the built file can run smoothly on the browser side. But if the server is started during development, then the server side cannot analyze the references, and hot updates cannot be performed. In addition, for front-end and back-end isomorphism, the server side cannot find dependencies. Therefore, if you turn on static file monitoring and refresh the browser manually, there is no problem in theory without import and external.

Install sass or less (take sass as an example)

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

or

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中实现图片和文件上传的示例代码

The above is the detailed content of react creates a project based on create-react-app. For more information, please follow other related articles on the PHP Chinese website!