react学习笔记（一）

1、react简介

• React起源于Facebook的内部项目，该公司积极尝试引入HTML5技术用来架设Instagram网站，开发中发现HTML5的性能下降明显，达不到预期的效果。他们就自己开发了React框架。
• ReactJS官方地址：https://facebook.github.io/react/
• GitHub地址：https://github.com/facebook/react
• 文档地址：https://react.docschina.org/docs/getting-started.html

2、react的特点以及和vue的对比

特点（优点）：

1. 虚拟DOM: React也是以数据驱动的，每次数据变化React都会扫码整个虚拟DOM树，自动计算与上次虚拟DOM的差异变化，然后针对需要变化的部分进行实际的浏览器DOM更新。
2. 组件化： React可以从功能角度横向划分，将UI分解成不同组件，各组件都独立封装，整个UI是由一个个小组件构成的一个大组件，每个组件只关系自身的逻辑，彼此独立。
3. 单项数据流：React设计者认为数据双向绑定虽然便捷，但在复杂场景下副作用也是很明显，所以React更倾向于单向的数据流动-从父节点传递到子节点。（使用ReactLink也可以实现双向绑定，但不建议使用）
4. 丰富的javaScript库。
5. 可扩展性。
6. web或移动平台（react提供react native平台）

相同点：

1. 良好的生态系统，轻量级。
2. 虚拟dom。
3. 数据驱动、组件化。

缺点：

陡峭的学习曲线：由于复杂的设置过程，属性，功能和结构，它需要深入的知识来构建应用程序。

3、搭建一个简单的react项目

1）第一步，node.js的安装

在开始前，请确保你的电脑安装了node，不知道装没装，就命令行工具node -v 一下，显示版本号是成功安装的

图1

如果没有安装，也不用着急，打开node中文网址：http://nodejs.cn/，下载对应你电脑的版本，这里一定要下载稳定版，切记！！！（如下图，不过现在版本很高了，一般用10 - 12 差不多了）

 

图2

2）通过脚手架create-react-app 搭建初始项目

有两种方式：

第一种

npm install -g create-react-app
create-react-app myapp

图3

图4

第二种

npx create-react-app myapp

以上myapp 是项目名，你也可以自定义。

 

3）等安装完成后，进行项目的初始化

指令：

cd myapp
npm start

图5

切到项目下面就好，然后 npm start 就可以启动了。但是我个人喜欢用yarn。

这里扩展一下yarn的安装，npm i -g yarn ，全局安装yarn，这样就可以用 yarn start 启动项目了

以下是启动后的效果图：

 

图6

图7

这样一个简单的react项目就搭建好了，下一篇讲解项目目录结构，记得点赞关注~~一起学习react。