第一个react

个人觉着react和vue是很相似的，之前还转载过一篇介绍两个异同点的文章，那个时候还完全不懂react，现在才慢慢开始接触，所以只能总结一些个人的心得，首先自然是react的优点了，个人觉着主要有以下几点吧。

• React 可以开发单页面应用 spa（单页面应用）
• react 组件化模块化 开发模式
• React通过对DOM的模拟(虚拟dom)，最大限度地减少与DOM的交互 （数据绑定）
• react灵活 React可以与已知的库或框架很好地配合。
• react 基于jsx的语法，JSX是React的核心组成部分，它使用XML标记的方式去直接声明界面， html js混写模式

接下来就是对自己的第一个react项目的记录了。

创建项目

和vue一样，react也离不开node和npm，这里就不再提，主要是创建react项目的两种方法：脚手架和npx，下面分别演示两种方法。

脚手架创建项目

1，在第一次使用脚手架的时候，需要全局安装脚手架，方便后期在不同的目录中使用脚手架创建项目，第一次安装成功后，以后就不必安装了。

全局安装脚手架的命令：npm install -g create-react-app

2，打开命令行，切换在自己放项目的目录里，执行创建项目的命令：create-react-app 项目名

这里创建的项目名称是reactdemo，所以执行的命令是：create-react-app reactdemo

3，运行项目，项目创建后，在命令行工具将目前切换到项目的根目录，执行npm start，项目就跑起来了。后期再次需要打开项目的时候，只需要执行这一步就可以了。

vue的默认端口是8080，而react的默认端口是3000；另外当vue的默认端口会占用时，会立即报错，然后你需要去更改端口，重启项目，但是在react的项目中，当默认端口被占用的时候，命令行会出现提示，按回车后，会默认给你切换到距离3000端口最近且空闲的端口上。

还有的地方提出使用yarn替代npm，这也就是为什么上面的截图中都会出现yarn的原因。在使用yarn的时候，首先需要全局安装：npm install -g yarn，安装成功后，执行上面的前两步，最后一步的时候，可以使用yarn来运行项目：yarn start。

npx创建项目

使用npx创建项目的时候，不需要脚手架，所以只有两步：

1，创建项目：npx create-react-app reactdemo

2，运行项目：npm start 

然后就可以得到和上面一样的效果了。

这里简单提一下npx，它是npm v5.2.0引入的一条命令（npx），引入这个命令的目的是为了提升开发者使用包内提供的命令行工具的体验。在使用npx创建项目的时候，npx create-react-app reactdemo这条命令会临时安装 create-react-app 包，命令完成后create-react-app 会删掉，不会出现在 global 中。下次再执行，还是会重新临时安装。npx 会帮你执行依赖包里的二进制文件。

项目结构

项目的根目录结构如下图：

个人感觉还是和vue比较类似的，重点是public和src，首先开看一下public：

其中favicon.ico是一个图标，就是浏览器地址栏处的图标：

其次是index.html，是一个入口文件。

最后是manifest.json，允许将站点添加至主屏幕，是 PWA 提供的一项重要功能，当前 manifest.json 的标准仍属于草案阶段，Chrome 和 Firefox 已经实现了这个功能，微软正努力在 Edge 浏览器上实现，Apple 目前仍在考虑中。

接下来看一下src文件夹：

这里只需要打开index.js这个react入口文件就可以了。

更改目录结构

目前，资源比较少，将所有的东西都放在src下其实也还好，但是一旦项目变大了，东西就会越来越多，这样就会显得结构很混乱，因此，和vue一样，要在src中新建文件components存放组件，在src中新建文件assets存放资源 ，在assets下新建文件css和 images将相关资源移入到对应的文件夹中，然后在引用这些资源的位置更改一下路径就可以了。

组件

在项目创建成功并运行后，默认会打开一个页面，这个页面里面的内容便是App.js这个文件里面的根组价里面写的内容：

这里不讨论jsx语法，只分析项目结构，因为react也是组件化的思想，所以并不建议将太多的东西都写在根组件里面，而是当组件单独提出来写，最后挂载到根组件就可以了。

下面，首先需要在components文件夹里面新建一个文件Home.js，然后在这个组件中写入一下简单的内容，并在最后将该组件暴露出来

然后在App.js中引入该组件并挂载：

保存后，我们就会发现浏览中已经发生了变化，因为这个也热加载的，不需要手动刷新。

完整代码下载：点这里