npm root -g to see if the global download root directory has created-react-app installed
The front-end development of the mainstream framework of the react project construction
1. The first step
global installation of react
executes npm install -g create-react-app
2. The second step
create project
execute: create-react-app my-app
3. The third step installs routing Control
execution: npm install react-router-dom --save (--save) install to local
4, install axios less-lodar
(axios) call interface (less-lodar) to convert less to css conversion identification and conversion Processing
execute npm install axios less-loader --save
5. The fifth part exposes webpack and other file configurations
run: npm run eject generates configuration files
(If you report an error Remove untracked files, stash or commit any changes, and try again.
Npm ERR! Code ELIFECYCLE ...) Please refer to (https://blog.csdn.net/weixin_41606276/article/details/85123919)
6. After the fifth step of the sixth part of the installation is successful, the config file is generated and configured in webpack.config.js Syntax
First define two constants
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
The rules configuration under the module should be placed on the top of the test: cssModuleRegex, otherwise it will not take effect
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders ({
importLoaders: 2,
sourceMap: isEnvProduction? ShouldUseSourceMap: isEnvDevelopment,
},
'less-loader'
),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},
// Adds support for CSS Modules (https://github.com/css-modules/css-modules)
// using the extension .module.css
{
test: lessModuleRegex,
use: getStyleLoaders ({
importLoaders: 2,
sourceMap: isEnvProduction ? shouldUseSourceMap: isEnvDevelopment,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
},
'less-loader'),
},
7, Part 7: Install Ali UI library antd and
execute yanr add antd (npm install antd --save) is over the wall Download all suggestions using yanr add antd
8, the eighth step: antd demand loading download babel-plugin-import
performed: Yarn the Add babel-plugin-import
. 9, Step Nine: antd demand loading configuration in webpack
module.rules.oneOf.options.plugins: Configuration
[
'import',
{libraryName: 'antd', style: 'css'}
]
10. Step 10: Install jquery
execution: Method one: npm install jquery --save (component uses import $ from 'jquery')
Method two: You can also add windos before using the jquery library in index.html. For example, windos. $
11, the eleventh step routing configuration entry file import import {HashRouter, Route, Switch} from 'react-router-dom'
import React from ' react ';
import {HashRouter, Route, Switch} from' react-router-dom '
// import APP from' ../App.jsx '
import Login from' ../component/login/login.jsx '
import Home from '../component/home/home.jsx'
import TaskAgentsTaskAgents from '../component/Ceshi/Ceshi.jsx'
import Num404 from '../component/num404/num404.jsx'
export default class router extends React.Component {
render() {
return (
<HashRouter>
<Route exact path="/" component={Login}/>
<Route path="/home"
render={()=>
<Home>
<Route path="/home/TaskAgentsTaskAgents" component={TaskAgentsTaskAgents}></Route>
<Route component={Num404}></Route>
</Home>
}
/>
</HashRouter>
);exact: This is an exact match. Remember that if there is a sub-route, this attribute cannot be added because it is an exact match. All sub-route configurations will not take effect.
}
Secondly, react-router-dom 4.0 version can be based on dom. The focus is on dom package, so the package can be written like this
<HashRouter>
<Route exact path = "/" component = {Login} />
<Route path = "/ home"
render = {() =>
<Home>
<Homerouter /> // This is the effect of the component after the introduction of the package Same as above
</ Home>
}
/>
</ HashRouter>
12. If you encounter local configuration of the reverse proxy front end
Configure {"proxy": "XXXXXXXX"} in package.json
13. IE11 compatible: execute yarn add react-app-polyfill
at the top of src / index.js
import 'react-app-polyfill / ie11';
import 'react-app-polyfill / stable';
add ie11
"browserslist" to browserlist under packge.json file : {
"production": [
"> 0.2%",
"not dead",
"not op_mini all",
"ie 11"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version",
"ie 11"
]
},
After the basic architecture is completed in the next steps , the routing configuration will be updated later.
ES6 creates a component method export default class login extends React.Component {}
(note: index.html is introduced into other JS libraries to obtain the method. You must declare windos such as windos. $ ('A ') All the configuration (that is, the JS file you referenced) file needs to be configured in Build. There is currently no way to find an automated packaging configuration file)