react学习(一)-初始项目

安装脚手架

开始一个项目，我们一般都希望使用最快最简单的方式来快速生成项目结构，然后在此基础上进行快速的开发。这个时候就要使用脚手架了，也就是根据现在的社区经验，得出来最佳初始实例。使用 react开发的时候，我们就可以使用官方提供 create-react-app 脚手架来进行快速的开发。

这里我们使用 npm 来进行安装。

npm install -g create-react-app

# 国内用户建议使用 cnpm 进行安装
cnpm install -g create-react-app

稍等片刻我们就可以看到 create-react-app安装结束，这个时候我们就可以使用它进行脚手架的搭建了。

初始化项目

我们可以运行create-react-app来进行项目的初始化

# 使用这条命令来初始化一个项目， $projectName 指的是项目的名字
create-react-app $projectName

当看到这里的时候就说明项目已经初始化成功了。同时我们可以看到四条script命令

• yarn start
• yarn build
• yarn test
• yarn eject

这四条命令是脚手架提供的，我们可以试试。当然，我们也可以使用 npm 来执行这些命令

• npm run start
• npm run build
• npm run test
• npm run eject

首先，进行到项目目录中。

cd $projectName

项目结构

.
├── README.md # 当前脚手架的说明文档，里面详细的介绍了脚手架的信息
├── node_modules # 包的安装目录
├── package.json # 项目信息
├── public # 静态资源
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json # PWA的配置文件
├── src # 代码目录，主要在里面进行开发，可以在里面自由修改目录结构
│   ├── App.css # 样式
│   ├── App.j