从创建一个全新的 react 项目开始
准备：开发环境的检查
在开始一切操作之前, 请检查你的 vscode 工作路径是否有包含中文, 如果有, 请修改它们至你硬盘的某个分区的根目录下，并将其命名为 example 或 workspace。以避免我们在开发的过程中会遇上一些奇怪且棘手的错误。
检查你的 nodejs 的版本号
检查你的 npm 的镜像地址
检查你的 yarn 的镜像地址
node-vnpm config list// 如果显示 metrics-registry = "http://registry.npmjs.org/"// 执行 npm config set registry https://registry.npm.taobao.orgyarn config list// 同样的, 如果发现镜像不在taobao的, 修改它// 执行 yarn config set registry https://registry.npm.taobao.org
使用 react 脚手架创建项目
使用 npx create-react-app 来创建项目. 请注意，这里是 npx 而不是 npm; npx 是 npm 的一个新工具，它可以将远程 node 项目拉回到本地临时文件里运行，完成后再删除掉这个临时文件。它最大的好处是减少了我们全局安装某些脚手架的操作。
例如 npx create-react-app 这个命令与你之前通过全局安装 create-react-app 然后再创建项目是一样的概念, 只是 npx 是执行了下面这三个步骤, 这样我们的硬盘里就不需要一直保留着 create-react-app 这个脚手架。
npm install -g create-react-app
create-react-app 你的项目名
npm uninstall -g create-react-app
// 创建项目, 注意你的项目名，必须是英文字母开头可以包含数字和下划线，不允许出现其它字符npx create-react-app 你的项目名// 如果你要建的是一个ts项目, 在后面加上--typescript// react中文文档这块有点小问题, ts项目需要 --template typescript 后缀而不是npx create-react-app 你的项目名--template typescript//// 项目创建完成后, 通过终端进入你的项目文件夹cd 你的项目名
安装依赖之前
npm 是我们平常开发时用来管理项目依赖的一个工具，它有很多的命令，我们在这里只需要记一些常用命令就行：
npm 常用命令与参数
npm-v// 查看 npm 版本号npm config list// 查看 npm 配置npm init// 在当前目录下创建一个 package.json 文件npm install<依赖名>||npm i// 安装依赖，以下都以别名i为准npm i<依赖名>[@版本号]// 安装指定版本号的依赖，注意，这种方式会安装当前大版本的最高版本npm i<依赖名>-S// 安装依赖到项目生产环境npm i<依赖名>-D// 安装依赖到项目开发环境npm i<依赖名>-g// 安装依赖到本地代码库npm uninstall<依赖名>// 卸载依赖npm cache clean// 清除项目依赖缓存
npm 因为国内的网络问题，可能需要切换代码仓库
npmgetregistry// 获取代码仓库的镜像地址npm configsetregistry// 切换代码仓库的镜像地址npm configsetregistry https://registry.npm.taobao.org// 切换仓库到 taobaonpm configsetregistry https://registry.npmjs.org// 切换仓库到 npm
也可以使用 nrm 来进行仓库管理
npm i-g nrm// 全局安装 npm 镜像管理工具nrm ls// 获取代码仓库的镜像nrm test// 测试代码仓库的响应时间nrm use npm// 切换仓库到 npmnrm use taobao// 切换仓库到 taobao
我们也可以使用 yarn 管理工具，它是为了弥补 npm 的一些缺陷而开发出来的新的 js 包管理工具，它使用了并行安装的方式所以比 npm 更快；它有离线下载模式，也就是说当某个依赖曾经被安装过，再次安装时会从本地缓存库中下载等很多的优点。
npm i-g yarnyarn add<依赖名>// 安装依赖到生产环境yarn add<依赖名>-D// 安装依赖到开发环境yarn remove<依赖名>// 卸载依赖yarn cache clean// 清除缓存
常用依赖安装
每一次新建项目, 第一件事不是 start, 而是 install。所以不要急着运行你的项目, 你需要做的第一件事是安装一些必要的依赖
// react-router-dom是react-router的扩展版，增加了一些对于dom操作的扩展npm i-Sreact-router-dom// redux 看你项目的情况决定是否要安装, 这里我们先安装, 因为它是我们专高6课程的核心部分npm i-Sredux react-redux redux-promise redux-thunk redux-persist// decorators 因为我们的项目需要使用装饰器，所以这个必须安装npm i-S@babel/plugin-proposal-decorators// axios 目前用的比较多的http库, 基于promise, 可以同时运行在node和浏览器中, 有极其丰富的配置项npm i-Saxios moment// 看你项目的情况, 安装antd或者antd-mobile, 专高6的核心是antd, 所以这里我们安装antdnpm i-Santd// antd-mobile与它的依赖// npm i -S antd-mobile postcss-px2rem-exclude rc-form// 以下的内容只在开发环境依赖, 所以我们通过-D指令将它们安装在devDependencies里面// reactAppRewired与customize-cra是比较重要的插件, 一定要安装// react-app-rewired是让你在不执行"npm run eject"指令也能改变内置的webpack中的配置的一个插件；// customize-cra 是依赖于 react-app-rewired 的库, 通过 config-overrides.js 来修改底层的 webpack, babel配置npm i-Dreact-app-rewired customize-cra// antd的按需加载, 无论你是使用antd还是antd-mobile, 都需要安装npm i-Dbabel-plugin-import// 安装对于less的支持npm i-Dless less-loader// 我们还需要很多依赖, 其它的依赖会在后续的课程中根据需要来安装
增加配置文件
我们刚刚安装了"react-app-rewired"与"customize-cra"这两个依赖, 也说到了, customize-cra 是能通过一个叫 config-overrides.js 的文件来修改你的 webpack 的配置而不再需要运行 npm run eject 来暴露 webpack 配置文件。 所以, 现在我们要在你的根目录增加 config-overrides.js 文件, 增加装饰器、less、antd 与路径别名的相关配置。
constpath=require("path");const{override,addWebpackAlias,// 别名配置，为了解决在文件层级过深时，使用相对路径不是很方便的问题addLessLoader,// less解析插件，没有它我们的项目就无法解析lessaddDecoratorsLegacy,// 使用装饰器的插件fixBabelImports,// antd按需加载overrideDevServer,// 开发服务器}=require("customize-cra");/**
* 代理配置
* 注意，addProxy返回的是一个回调函数，当customize调用这个文件时，就会将当前的服务器相关配置传入这个回调函数，
* 我们在这个回调函数中对这个配置作出一些修改后再返回给customize
*/constaddProxy=()=>(config)=>{return{...config,// 代理，主要用于解决跨域，它的作用是强行将我们的http请求中的域名部分修改成target属性对应的值proxy:{// 代理对象中的单个属性被称之为拦截器, 这里的意思是将我们项目中以"/api"开头的http请求拦截下来"/api":{// 我们想要修改成的http服务器地址及端口号target:"我们的接口baseUrl地址",// 是否需要修改origin, 当我们的接口涉及到跨域时，这个属性必须设置为truechangeOrigin:true,// 是否对拦截器的关键字进行修改pathRewrite:{"^/api":"",},},},};};module.exports={webpack:override(// 使用修饰器addDecoratorsLegacy(),// 加载less文件addLessLoader({lessOptions:{javascriptEnabled:true,},sourceMap:true,}),// antd按需加载工具, 具体用法参考以下链接// https://github.com/ant-design/babel-plugin-importfixBabelImports("import",{libraryName:"antd-mobile",style:"css",}),// 路径别名addWebpackAlias({"@":path.resolve(__dirname,"src"),})),// 开发环境服务器代理, 一般情况下不需要我们自己配devServer:overrideDevServer(addProxy()),};
修改配置文件
因为使用了"react-app-rewired", 所以, 我们需要修改 package.json 中的 scripts 属性中的值, 将其中的"react-scripts"统一修改成"react-app-rewired"。
运行项目
运行项目, 确认以上的修改正确无误。
以后我们在业务中修改/增加依赖的时候也要记得, 一次只修改几个相关的依赖, 不要把所有的依赖一次性改完, 出现错误的时候都不知道从哪里查起
修正因为别名造成的自动完成路径功能丢失
在项目的根目录, 新建一个 jsconfig.json 文件, 内容如下
{"compilerOptions":{"experimentalDecorators":true,"baseUrl":"./","paths":{"@/*":["src/*"]}},"exclude":["node_modules","dist"]}
调整你的项目文件夹
当上面的内容修改完成, 调整你的文档结构如下图所示
首先我们看一下根目录, 除了刚才增加的 config-overrides.js 与 jsconfig.json 以外, 还多了一个.prettierrc.json 文件, 这个文件, 是配给 prettierrc 插件使用的, 主要是对于一些其它同事 coding 时未遵循规范, 代码可读性较差时, 可以顺手帮忙右键格式一下。内容如下：
{"bracketSpacing":true,// 在对象中属性冒号的右侧添加空格"printWidth":100,// 超过最大值换行"useTabs":false,// 缩进不使用tab, 使用空格"tabWidth":2,// 缩进字节数"semi":true,// 句尾添加分号"singleQuote":true,// 使用单引号代替双引号"arrowParens":"avoid",// (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号}
然后我们的主要改动在 src 目录下, 一个个来, 我们先看文件：reportWebVitals.js 与 setupTests.js, 这两个文件是用于性能监测和测试的, 我们不管它
store.js 这个文件是将来用于状态管理的, 我们应该会在第三天或第四天讲到, 先不管它
index.js, 这个文件一会要进行一些小小的改动, 先保留着
然后, 我们将其它的所有文件全部删除。
现在, 我们先来建立三个文件夹: assets, 用于放置你将来的 css 和图片等媒体文件, pages, 用来放置你所有的页面文件(业务组件), components, 用来放置你所有的功能组件。这就是我们一个 react 项目最核心的文件夹了, 后续会有更多的文件夹, 我们先不用着急, 用的时候再一个个建立。
新建我们的首页
在 pages 文件夹中, 新建一个 HomePage 的文件夹, 文件夹名称以帕斯卡形式（大驼峰）命名, 在这个文件夹下, 新建 index.jsx,style.less 两个文件；
这里需要注意的是, 在我们的 components 与 pages 两个文件夹下, 所有的子文件夹都需要以帕斯卡形式命名, 而其内部至少有一个 index.jsx 的文件, 我们的主逻辑就在这个文件里实现。
为什么要这样？因为我们要保证文件名与导出的模块名一致, 而我们的 pages 与 components 中每一个文件夹下的内容都是一个或多个独立的组件, 而组件名只能以帕斯卡方式命名：
// Homepage/index.jsximportReact,{Component}from'react';import'./style.less';exportdefaultclassHomePageextendsComponent{constructor(props){super(props);this.state={msg:'这是我的首页',};}render(){const{msg}=this.state;return<div className="homepage">{msg}</div>;}}// router/index.jsimportReactfrom'react';import{BrowserRouter,Route,Switch}from'react-router-dom';// 为什么要用index.jsx? index在Js, Html中, 代表了索引页, 也是当前目录的默认首页。所以, 在这里我们不需要指定文件名就能直接将目录中的index导入, 可以减少文件名称的输入以减少因为文件名输入错误造成的一些问题importHomepagefrom'@pages/Homepage';functionRouter(){return(<BrowserRouter><Switch><Route exact path="/"component={Homepage}/><Route exact path="/homepage"component={Homepage}/></Switch></BrowserRouter>);}exportdefaultRouter;
将上面两个文件保存后, 我们再来修改根目录的 index.jsx 文件
// react项目的核心文件, 每一个文件都需要引入它importReactfrom"react";// 核心文件也包括ReactDOM, 但它不需要在其它文件中引用importReactDOMfrom"react-dom";// 路由配置, 我们刚刚写的importRouterfrom"./router";// 全局的样式文件import"@/assets/style.less";ReactDOM.render(// 对每一个模块都执行严格模式检查<React.StrictMode><Router/></React.StrictMode>,document.getElementById("docwrap"));
