1.快速入门：全局安装脚手架：$npminstall-gcreate-react-app通过脚手架搭建项目：$create-react-app启动项目：$cd$npmrunstart2.查看项目package.json配置2.1package.jsonlist{......"homepage":".","dependencies":{"react":"^16.4.0","react-dom":"^16.4.0","react-scripts":"1.1.4"},"scripts":{"start":"react-scriptsstart","build":"react-scriptsbuild","test":"react-scriptstest--env=jsdom","eject":"react-scriptseject"}}2.2可用脚本命令说明：首先，执行下面通过npmrun命令实际运行的是node_modules/react-srcipt/script下对应的脚本文件；npmrunstart：启动项目，通过http://localhost:3000访问项目；npmrunbuild：将项目打包并在生产环境编译代码，放到build目录下；所有代码都将使用哈希正确打包、优化、压缩和重命名；在执行这条命令之前，需要添加一个新的配置“homepage”：“.”在package.json（上面已经给出了配置文件），构建的项目需要在server下访问；否则，它将打开一个空白页面；npmruntest：以交互监控方式启动测试运行器；npmruneject：导出隐藏配置；你需要知道的是，create-react-app脚手架本质上是使用react-scripts来配置项目，所有的配置文件信息都是隐藏的（node_modules/react-scripts）；当需要手动修改扩展的webpack配置时有时需要在配置时暴露隐藏的配置；特别需要注意的是，这个操作是单向操作，一旦使用了eject，就无法恢复（再次隐藏配置）；3.自动生成的项目目录和文件分析：node_modules：项目依赖包目录；public：公共目录，该目录下的文件不会被webpack加载、解析和打包；当通过npmrunbuild打包时，这个项目中的所有文件都会被直接复制到build目录中；favicon.ico：为网站图标【可替换删除】index.html：页面模板，webpack打包后将输出文件导入到模板中；补充：index.html使用环境变量%PUBLIC_URL%指向公共目录路径；manifest.json：PWA将应用程序添加到桌面的功能的实现依赖于manifest.json。可以通过manifest.json文件配置图标、名称等信息。src：为源码目录，该目录下除index.jsApp.test.jsregisterServiceWorker.js文件有一定含义外，其余文件均为demo，可直接删除。index.js：是整个项目的入口文件；App.test.js：测试单元的demo文件，暂时未知；可以直接删除；registerServiceWorker.js：serviceworker是后台运行的线程，可以用来处理离线缓存、消息推送、后台自动更新等任务；registerServiceWorker是为react项目注册一个serviceworker，用于资源缓存，方便下次访问时更快的获取资源。并且因为缓存了资源，即使离线也可以访问应用（此时使用的资源是之前缓存的资源）。注意registerServiceWorker注册的serviceworker只在生产环境生效，该功能只能在https下生效；.gitignore:这个文件是github过滤文件配置README.md:这个文件是github描述文件package.json:定义项目需要的各个模块，以及项目的配置信息（比如名称，版本、许可证和其他元数据）。一些依赖模块被隐藏；yarn.lock：每次添加依赖或者通过yarn更新包版本时，yarn都会将相关的版本信息写入yarn.lock文件；npm也有类似的功能，npm也可以生成锁文件，就用上面的noyarn方便4.扩展webpack配置（以less为例）4.1方法一：暴露webpack配置，修改暴露的配置文件：$npmruneject说明：执行eject脚本后，会在项目下添加或修改一些配置文件进行修改；脚本文件存放在工程下的script目录下，配置文件存放在config目录下。下载并安装依赖：less-loaderless$npminstallless-loaderless-dev修改config目录下的webpack配置文件：//同时修改以下两个文件：//开发环境中的配置文件：webpack.config.dev.js//生产环境中的配置文件：webpack.config.prod.js//两个文件修改内容相同，对应修改内容如下（三个地方需要被修改)...{//[1]修改文件以匹配常规测试:/\.(css|less)$/,use:[require.resolve('style-loader'),{loader:require.resolve('css-loader'),options:{//[2]将原来的编号1改为编号2importLoaders:2,},},{....},//[3]添加新的加载configurationobject{loader:require.resolve('less-loader'),}],}...4.2方法二：使用react-app-rewired自定义webpack配置（覆盖或添加）安装依赖包react-app-重新布线：$npminstallreact-app-rewired--save-dev修改package.json中的脚本命令：修改如下"scripts":{"start":"react-app-rewiredstart","build":"react-app-rewiredbuild","test":"react-app-rewiredtest--env=jsdom","eject":"react-app-rewiredeject"}在项目根目录新建配置文件config-overrides.js（与package.json同级）,并添加如下内容module.exports=functionoverride(config,env){//此处添加配置returnconfig;}安装依赖包react-app-rewire-less，通过它实现对less的支持：$npminstallreact-app-rewire-less--save说明：不需要单独安装额外的依赖包：less-loaderless修改config-overrides.js配置文件，配置lessconstrewireLess=require('react-app-rewire-lessforwebpack');module.exports=functionoverride(config,env){//只需要一条配置信息就可以支持lessconfig=rewireLess(config,env);//下面的注释用于配置加载器参数//config=rewireLess.withLoaderOptions(someLoaderOptions)(config,env);returnconfig;}5.在create-react-app中使用Antd5.1一般使用方法（不推荐）构建项目：$create-react-appdemo$cddemo$npmrunstartimportsantd依赖包：$npminstallnpmneeds在导入antd组件之前导入antd样式（在项目入口导入所有样式）：importantd/dist/antd.cssimportantdcomponentimport{Button}from'antd'在项目中；5.2按需加载——上述导入组件和样式的方法会一次加载所有样式，并导入组件中所有对应的模块；-这种导入方式会影响应用的网络性能；-对应的导入方式需要改变组件和样式，实现按需加载样式和组件；-下面将介绍三种按需加载组件样式的方法：5.2.1方法一：精准加载组件importButtonfrom'antd/lib/button';import'antd/lib/button/style';//或者通过importantd/lib/button/style/css来加载style5.2.2方法二：通过暴露配置和babel-plugin-import插件实现按需加载babel-plugin-import是一个babel插件-in用于按需加载组件代码和样式公开配置$npmrunejectinstallplugin:$npminstallbabel-plugin-import--save-devmodifypackage.json"babel":{"presets":["react-app"],"plugins":[["import",{"libraryName":"antd","libraryDirectory":"es","style":"css"}]]}，配置后直接可以导入antd组件，无需导入css样式；从'antd'导入{Button}；95.2.2方式三：通过babel-plugin-import+react-app-rewired实现按需加载（官网推荐）react-app-rewired：使用上面已经介绍过；主要用于非暴露配置情况下扩展webpack的配置；babel-plugin-import是一个babel插件安装依赖包，用于按需加载组件代码和样式：babel-plugin-import$npminstallbabel-plugin-import--save-devpass通过react-app-rewired扩展webpack配置，增加新的babel插件，修改（增加）config-overrides.js中如下内容：//引入react-app-rewired增加babel插件的功能-inconst{injectBabelPlugin}=require('react-app-rewired');module.exports=functionoverride(config,env){config=injectBabelPlugin(['import',{libraryName:'antd',libraryDirectory:'es复制代码',样式:'css'}],配置);返回配置；}；配置完成后，可以直接导入antd组件，无需引入额外的css样式；从'antd'导入{Button}；95.3通过react-app-rewired扩展webpack实现antd自定义主题主要使用less-loader的modifyVars参数进行主题配置安装配置：react-app-rewired（我上面已经详细介绍了，不再赘述这里）安装依赖包react-app-rewire-less:implementless添加对modifyVars的支持同时加载参数设置$npmreact-app-rewire-less--save-dev修改config-overrides.js配置文件constrewireLess=require('react-app-rewire-less');const{injectBabelPlugin}=require('react-app-rewired');module.exports=functionoverride(config,env){//扩展webpack==>支持lessconfig=rewireLess(config,env);//配置加载器参数config=rewireLess.withLoaderOptions({//修改默认颜色实现自定义主题modifyVars:{"@primary-color":"#1DA57A"},})(config,env);//antd按需加载配置config=injectBabelPlugin(['import',{libraryName:'antd',libraryDirectory:'es',style:true}],config);returnconfig;}5.4通过插件babel-plugin-transform-decorators-legacy5.4实现对装饰器的支持。1通过暴露配置实现暴露配置$npmrunejectinstallplugin:$npminstall--save-devbabel-plugin-transform-decorators-legacymodifypackage.json"babel":{"presets":["react-app"],"plugins":[["transform-decorators-legacy"]]},5.4.2使用插件react-app-rewired扩展配置，实现对装饰器的支持。react-app-rewired的使用详见上文：安装插件：$npminstall--save-devbabel-plugin-transform-decorators-legacy编写config-overrides.js配置文件//导入函数添加babel插件const{injectBabelPlugin}=require('react-app-rewired');module.exports=functionoverride(config,env){//使用webpack配置...//装饰器扩展（添加babel插件：transform-decorators-legacy)config=injectBabelPlugin('transform-decorators-legacy',config)returnconfig;};6.常见问题：6.1使用react-app-rewired进行扩展配置时，启动项目后没有效果？在确保配置没有问题的情况下：请确认脚本命令是否修改正确。要使用react-app-rewired扩展配置，需要修改script命令{...."scripts":{"start":"react-app-rewiredstart","build":"react-app-重新构建”，“测试”：“react-app-rewiredtest--env=jsdom”，“eject”：“react-app-rewiredeject”}，...}
