官方文档 https://reactjs.org/docs/add-react-to-a-new-app.html
（如果yarn、npm安装太慢，请使用cnpm安装项目模块）
1.安装nodeJs是必备的
2.全局安装create-react-app模块
npm install -g create-react-app
YW3BM26R)8_QY4}[}@%3]HS.png
查看版本
create-react-app --version
or
create-react-app -V
1.png
3.创建项目
create-react-app my-project
~91V63QYH42RD~UXR{66BCF.png
2.png
)IITXIG%79WU%E}Q{KCV9{9.png
安装完成！
4.进入项目根目录，启动
cd my-project
yarn start
3.png
B7TG5RY@%O5T1GHKN3EBECT.png
5.项目目录
4.png
6.修改端口号，在package.json--->scripts--->start
6.png
7.配置css与处理器（less， sass，stylus），首先得安装相关的依赖，我个人喜欢使用 stylus，这里介绍stylus配置
安装stylus和stylus-loader
npm install stylus stylus-loader --save-dev
8.执行eject把配置文件下载下来
yarn eject
FZ1W%FIHTVH5U}6KYZRSHB1.png
输入命令之后，她问你是否确定要执行eject，晕，我不执行我输入命令干嘛！键入y
这时的package.json多了一大堆东西
8.png
9.现在正式配置stylus
开发依赖：config--->webpack.config.dev.js---->oneOf
{
test: /\.styl$/,
exclude: /node_modules/,
loaders: ['style-loader', 'css-loader', 'stylus-loader']
}
7I[9QZA~AU]6G9MARBX(YAS.png
生产依赖：config--->webpack.config.prod.js---->oneOf
{
test: /\.styl$/,
exclude: /node_modules/,
loaders: ['style-loader', 'css-loader', 'stylus-loader']
}
9.png
配置完成就可以使用stylus语法编写css了
10.如果打包不想要生成.map文件，在webpack.config.prod.js下找到devtool，注释该行
OO31LD3%ECNS6M%J`2H9K67.png
11.配置引用路径别名（为了减少组件内众多的../../）
在config--->paths.js下添加
component: path.resolve(__dirname, '../src/component')
%D~%AD64BY6T_NX`4$N3@AM.png
然后在webpack.config.dev.js和webpack.config.prod.js找到modules（大概在75行，后者大概在81行），添加paths.component
1.png
2.png
在组件中引入组件的时候，
以前需要
import Home from "./component/Home/Home";
现在只需要
import Home from "Home/Home";
12.本文到此结束，希望能帮到更多的人。
