1.项目生成create-react-appsaucxs-web生成项目cdsaucxs-web进入项目yarnstart启动项目2.项目部署本地开发yarnstart在线部署yarnbuild3.参考文档react英文文档[1]create-react-app[2]antUI库配置参考[3]react-router英文[4]react-router中文[5]4.配置项1，AntDesignUI库importyarnaddantd安装UI库yarnaddbabel-plugin-import实现按需importpackage.json/babel添加如下内容："plugins":[["import",{"libraryName":"antd","libraryDirectory":"es","style":"css"}]]组件使用如下：importReact,{Component}from'react';import{Button}from'antd'import'antd/dist/antd.css'classAppextendsComponent{render(){return(松宝写代码);}}exportdefaultApp;这时候可以使用UI库2的默认样式，自定义AntDesignUI库样式来安装less-loader使用命令yarnruneject暴露配置文件，在webpack中做如下修改。config.dev.js和webpack.config.prod.js：创建antModifyVars.js文件'usestrict'；constmodifyVars={'原色':'#E26A6A',}module.exports=modifyVars;创建较少的相关变量，参考默认sass配置：//stylefilesregexesconstcssRegex=/\.css$/;constcssModuleRegex=/\.module\.css$/;constsassRegex=/\.(scss|sass)$/;constsassModuleRegex=/\.module\.(scss|sass)$/;//添加less部分constlessRegex=/\.less/;constlessModuleRegex=/\.module\.less$/;在module.rules的一个下，添加一些代码，如sass://Opt-insupportforLESS(using.lessextensions).//Chainstheless-loaderwiththecss-loaderandthestyle-loader//toimmediatelyapplyallstylestotheDOM.//BydefaultwesupportLESSModuleswiththe//extensions.module.scssor.module。sass{test:lessRegex,exclude:lessModuleRegex,use:getStyleLoaders({importLoaders:2},'less-loader'),},//AddssupportforCSSModules,butusingSASS//usingtheextension.module.scssor.module.sass{test:lessModuleRegex,use:getStyleLoaders({importLoaders:2,modules:true,getLocalIdent:getCSSModuleLocalIdent,},'less-loader'),},在getStyleLoaders中处理less-loader下的配置//devif(preProcessor){letloader={loader:require.resolve(预处理器)}if(preProcessor==="less-loader"){loader.options.modifyVars=modifyVarsloader.options.javascriptEnabled=true}loaders.push(loader);}//prod下配置if(preProcessor){letloader={loader:require.resolve(preProcessor),options:{sourceMap:shouldUseSourceMap,},}if(preProcessor==="less-loader"){loader.options.modifyVars=modifyVarsloader.options.javascriptEnabled=true}loaders.push(loader);}3.ES6API支持，引入polyfills增加低版本浏览器和IE浏览器对ES6API、IE9、IE9+的支持方法一，安装yarnaddreact-app-polyfill//src/index.js[首先line]introducesupportforIE9andlaterimport'react-app-polyfill/ie9';//其他支持，如：supportforIE11andlaterimport'react-app-polyfill/ie11';方法二，安装yarnaddbabel-polyfill//webpack.base.conf.js引入：require("babel-polyfill")//webpack.base.conf.js配置：entry:{app:['babel-polyfill','./src/main.js']}4.引入react-router-dom路由react-router-dom依赖onreact-router，所以在使用npm安装依赖的时候，只需要安装相应环境下的库即可，无需显式安装react-router由于需要权限配置，增加AuthorizedRoute.js控制权限5.配置别名，@指向src目录下的webpack.base.conf.js与webpack.base.conf.js的配置一致，如下：定义resolvePath方法，以及新版本中的resolvename占用的functionresolvePath(dir){returnpath.join(__dirname,'..',dir)}//在resolve.alias中添加别名配置：'@':resolvePath('src')6.在package.json底部引入axios添加如下代码解决跨域问题//新版本需要使用http-proxy-middleware，在src下创建setupProxy.js，content://会被自动引用，不需要额外的配置constproxy=require('http-proxy-middleware')module.exports=function(app){app.use(proxy('/api',{target:'http://**********',changeOrigin:true}))}//定义多个入口：module.exports=function(app){app.use(proxy('/api',{target:'http://localhost:7001'}));app.use(代理('/api2',{target:'http://localhost:7001'}));}7.样式处理使用react-css-modules将组件内部样式与外部样式分离，使用：importReactfrom'react'importCSSModulesfrom'react-css-modules';import{Button}from'antd'importstylesfrom'./Header.module.scss'classHeaderextendsReact.Component{render(){return(松宝写代码
)}}exportdefaultCSSModules(Header,styles)注意：由于已经配置了最新版本的create-react-app，所以不需要修改webpack配置文件。上面的方法可以实现，同时使用antd风格，全局风格，组件私有风格，特别注意组件私有风格文件的命名[name].module.scss8，对于create-react-app之前的版本2.1.1、引入stylus安装stylus和stylus-loader使用命令yarnruneject暴露配置文件修改webpack.config.dev.js和webpack.config.prod.js的module/rules/oneOf中的代码：{test:/\.(css|styl)$/,使用:[require.resolve('style-loader'),{loader:require.resolve('css-loader'),选项:{importLoaders:1,},},{loader:require.resolve('postcss-loader'),options:{//NecessaryforexternalCSSImportstowork//https://github.com/facebookincubator/create-react-app/issues/2677ident:'postcss',sourceMap:true,plugins:()=>[require('postcss-flexbugs-fixes'),autoprefixer({browsers:['>1%','last4versions','FirefoxESR','notie<9',//React不支持IE8],flexbox:'no-2009',}),],},},{loader:require.resolve('stylus-loader'),options:{sourceMap:true,}},],},五、发达过程中遇到的问题1.warning提示：no-op参考内容[6]问题描述warning:Can'tperformaReactstateupdateonanunmountedcomponent.这是一个空操作，但它表明您的应用程序中存在内存泄漏。修复，在componentWillUnmount方法说明中取消所有订阅和异步任务no-op只能更新一个已挂载或挂载的组件。这通常意味着您在未安装的组件上调用了setState、replaceState或forceUpdate。对于组件中的状态更新操作，如异步请求、事件、定时器等，应该在componentWillUnmount生命周期中进行相应的取消处理。对于事件和定时器，只需要在componentWillUnmount方法中取消事件监听或者清除计时即可。服务端的运行对于异步操作带来的问题可以通过以下解决方案解决方案一：用一个变量[_isMounted]来控制是否更新状态/v1/search?query=react').then(result=>if(!this._isMounted)returnthis.setState({news:result.data.hits,}),)}componentWillUnmount(){//取消事件监听,清空Timer,控制异步请求this._isMounted=false}render(){return(...)}}exportdefaultnewComponent方案二：粗略的方法，直接改setState函数importReactfrom'react'classnewComponentextendsReact.Component{componentWillUnmount(){//取消事件监听，清除定时器，控制异步请求this.setState=()=>{return}}render(){return(...)}}exportdefaultnewComponent方案3，可以直接取消接口请求，如axios的CancelToken2，react-router4.0版本中，不同场景路由跳转参考[7]方案1，官方推荐结束，使用withRouterimportReactfrom'react'import{withRouter}from'react-router-dom'classNewComponentextendsReact.Component{AFunction(){this.props.history.push('/path')}render(){return(...)}}exportdefaultwithRouter(NewComponent)方案2，不推荐，使用contextimportReactfrom'react'importPropTypesfrom'prop-types'import{withRouter}from'react-router-dom'classNewComponenttextendsReact.Component{staticcontextTypes={router:PropTypes.object}constructor(props,context){super(props,context);}AFunction(){this.context.router.history.push('/path')}render(){return(...)}}exportdefaultNewComponent选项3，使用history在实际业务场景中，往往需要在非路由中使用路由react组件跳转，如：统一界面处理场景下，用户登录失败时，跳转到登录页面由于react-router4.0中提供的BrowserRouter组件默认创建了一个history，并没有暴露，所以在非react中使用history时将不起作用。因此：不使用BrowserRouter组件也可以自己创建一个history，如下：创建history//src/history.js必须放在src根目录importcreateHistoryfrom'history/createBrowserHistory'consthistory=createHistory()exportdefaulthistory?configurerouter//src/index.js注意historyimport{Router,Link,Routeonrouter}from'react-router-dom'importhistoryfrom'./history'ReactDOM.render(...,document.getElementById('root'),)?其他地方使用，如接口统一处理层importhistoryfrom'@/history';exportfunctionaddProduct(props){returndispatch=>axios.post('xxx',props,config).then(response=>{history.push('/cart')})}参考链接【1】react英文文档：https://reactjs.org/docs/getting-started.html[2]create-react-app:https://facebook.github.io/create-react-app/docs/getting-started[3]AntUI库配置参考：https://blog.csdn.net/qwe502763576/article/details/83242823[4]react-router英文：https://reacttraining.com/react-router/web/example/basic[5]react-router中文：http://router.happyfe.com/web/guides/quick-start[6]参考内容：https：//www.robinwieruch.de/react-warning-cant-call-setstate-on-an-unmounted-component/[7]参考：https://github.com/brickspert/blog/issues/3
