React基础

一、什么是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'))

运行结果为：