一、什么是React?
React 是一个用于构建用户界面的 JavaScript 库。
如果从 MVC 的角度来看,React 仅仅是视图层(V),也就是只负责视图的渲染,而并非提供了完整的 M 和 C 的功能。
React 起源于 Facebook 的内部项目,后又用来架设 Instagram 的网站,并于 2013 年 5 月开源。
二、React的特点
1.声明式设计 −React采用声明范式,可以轻松描述应用。
2.高效 −React通过对DOM的模拟,最大限度地减少与DOM的交互。
3.灵活 −React可以与已知的库或框架很好地配合。
4.组件 − 通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中。
5.单向响应的数据流 − React 实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单。
三、React的安装
安装命令:npm i react react-dom
- react 包是核心,提供创建元素、组件等
四、react的使用
(1) 引入 react
和 react-dom
两个 js 文件
<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
(2)创建 React 元素
(3) 渲染 React 元素到页面中
<div id="root"></div>
<script>
const title = React.createElement('h1', null, '尽职尽责,一丝不苟,认真教学')
ReactDOM.render(title, document.getElementById('root'))
</script>
输出的结果为:
五、React脚手架的使用
1、使用 React 脚手架初始化项目
1.初始化项目,命令为:npx create-react-app my-app
2.启动项目,在项目根目录执行命令:npm start
npx 命令介绍:
npm v5.2.0 引入的一条命令
- 目的:提升包内提供的命令行工具的使用体验
- 原来:先安装脚手架包,再使用这个包中提供的命令
- 现在:无需安装脚手架包,就可以直接使用这个包提供的命令
2、 在脚手架中使用 React
1、导入 react 和 react-dom 两个包。
import React from 'react'
import ReactDOM from 'react-dom'
2、 调用 React.createElement()
方法创建 react 元素。
const title = React.createElement('h1', null, '在其位谋其职')
3、调用 ReactDOM.render()
方法渲染 react 元素到页面中。
ReactDOM.render(title, document.getElementById('root'))
运行结果为: