PS：由于工作的原因，基本使用的是vue，想要自学react，就萌生了边学边做笔记的的想法，这样也算督促自己，也方便随时查看，想用的时候就直接能上手了。

react脚手架的意义

脚手架是开发现代Web应用的必备；
（注意：现代Web应用不再是直接创建一个文件夹，里面写个html页面，再加几个css，js就行了的，要考虑代码的规范，项目的打包上线、应用场景等等...，因此就需要有一套完整的方案来帮助我们开发项目的,这个方案就是脚手架）
充分利用Webpack、Babel、Ealint等工具辅助项目开发。
react是零配置，无需手动配置繁琐的工具就可以使用，开箱即用。
就有更多的时间关注业务，而不是工具配置。

使用react脚手架初始化项目

一、初始化项目：npx create-react-app my-app

npx create-react-app my-app，my-app是项目名，这个自定义项目的名字就好，直接按回车。（如果是第一次初始化react项目的话，速度会有点慢。）

看到字样，项目初始化就已经成功了。

二、启动项目：npm start

在项目的根目录中执行 npm start就可以启动项目了，当然终端上会有提示你用yarn start，如果安装的有yarn，也可以按照提示启动。

先切回项目根目录中

再启动项目

项目启动成功：

进到这个界面，就算是启动成功了

关于react脚手架初始化命令的介绍

npx 命令介绍： npm v5.2.0引入的一条命令；目的：提升包内提供的命令行工具的使用体验。

原来在npx命令之前，要先全局安装脚手架的包，然后才能使用脚手架的命令去初始化项目。如果是全局安装的脚手架包，长时间不用，放在那也没有任何的意义。

有了npx之后，就不需要提交安装脚手架的包，，直接通过命令就可以直接使用这个包提供的命令了。

推荐使用npx create-react-app my-app这个命令创建。create-react-app是脚手架的名字固定不能更改，my-app是项目名字

也可以 npm init create-react-app my-app 或者 yarn create create-react-app my-app，不过不推荐使用。

三、在脚手架中，使用react

1. 导入 react react-dom 两个包。（不用下载，项目初始化的时候，已经自动安装好了，导入使用的语法不再是scrict标签导入了，直接使用es6模块化语法导入。） 2. 调用React.createElement（）方法创建react元素 3. 调用ReactDOM.render（）方法渲染react元素到页面中

项目的根目录下已经生成好id为root的元素

效果如下：

ok！先讲到这里！

React 基础学习（二）