React 概述

用于构建用户界面的 JavaScript 库
是一个将数据渲染为 HTML 视图的开源 JavaScript 库

React 特点

声明式

只需要描述 UI（HTML）看起来是什么样子，就像写 HTML 一样,React 负责渲染 UI，并在数据变化时更新 UI

const jsx = <div clssName="app">
                <h1>Hello React! 动态变化数据：{ count }</h1>
            </div>

基于组件

1. 采用组件化模式、声明式编码，提高开发效率及组件复用率
2. 在 React Native 中可以使用 React 语法进行移动端开发
3. 使用虚拟DOM+优秀的Diffing算法，尽量减少与真实DOM的交互

React 的基本使用

安装React

• react 是核心包，提供创建元素、组件等功能
• react-dom 包提供 DOM 相关功能等

# 16.8.6
npm i react react-dom

使用 React

先引入 react 后引入 react-dom 两个 js 文件

创建 React 元素、渲染 React 元素到页面中

<div id="root"></div>
<script>
    // 创建 React 元素
    // 参数一：元素名称
    // 参数二：元素属性
    // 第三以及以后的参数：元素的子节点
    const title = React.createElement('h1', null, 'Hello React')
    // 渲染 React 元素到页面中
    // 参数一：要渲染的 react 元素
    // 参数二：挂载点
    ReactDOM.render(title, document.querySelector('#root'))
</script>

React.createElement()

// 返回值：React 元素
// 参数一：要创建的 React 元素名称
// 参数二：该 React 元素的属性
// 第三以及以后的参数：该 React 元素的子节点
const el = React.createElement('h1', { title: '标题' }, 'Hello React', React.createElement('p', null , 'p 标签'))

ReactDOM.render()

// 参数一：要渲染的 React 元素
// 参数二：DOM对象，用于指定渲染到页面中的位置
ReactDOM.render(el, document.querySelector('#root'))

React 脚手架的使用

全局安装React脚手架

npm i -g create-react-app

使用 React 脚手架初始化项目

#初始化项目
npx create-react-app 项目名

#启动项目
npm start

npx create-react-app 项目名
npm init react-app 项目名
yarn create react-app 项目名

在脚手架中使用 React

react@16.8.6 版本

1. 导入 react 和 react-dom 两个包

import React from 'react'
import ReactDOM from 'react-dom'

2. 调用 React.createElement() 方法创建 react 元素

3. 调用 ReactDOM.render() 方法渲染 react 元素到页面中