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的对比
特点(优点):
- 虚拟DOM: React也是以数据驱动的,每次数据变化React都会扫码整个虚拟DOM树,自动计算与上次虚拟DOM的差异变化,然后针对需要变化的部分进行实际的浏览器DOM更新。
- 组件化: React可以从功能角度横向划分,将UI分解成不同组件,各组件都独立封装,整个UI是由一个个小组件构成的一个大组件,每个组件只关系自身的逻辑,彼此独立。
- 单项数据流:React设计者认为数据双向绑定虽然便捷,但在复杂场景下副作用也是很明显,所以React更倾向于单向的数据流动-从父节点传递到子节点。(使用ReactLink也可以实现双向绑定,但不建议使用)
- 丰富的javaScript库。
- 可扩展性。
- web或移动平台(react提供react native平台)
相同点:
- 良好的生态系统,轻量级。
- 虚拟dom。
- 数据驱动、组件化。
缺点:
陡峭的学习曲线:由于复杂的设置过程,属性,功能和结构,它需要深入的知识来构建应用程序。
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。