React基础

一、React的概述

1.1 何为 React

    React 是一个用于构建用户界面的 JavaScript 库。React 主要用来写HTML页面，或构建Web应用。

1.2 React 的 特点

    1. 声明式

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

    2. 基于组件

        组件是 React 最重要的内容。

        组件表示页面中的部分内容。

        组合、复用多个组件，可以实现完整的页面功能。

    3. 学习一次，随处使用

        使用 React 可以开发 Web 应用、移动端原生应用（react-native）、VR（虚拟现实）应用（react 360）等。

二、React 的基本使用

2.1 React 的安装

    安装命令如下：

npm i react react-dom

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

2.2 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, 'Hello React')
    ReactDOM.render(title, document.getElementById('root'))
</script>

2.2 方法说明

    React.createElement() 说明 （了解即可）

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

    ReactDOM.render() 说明

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

3. React 脚手架的使用

3.1 React 脚手架的意义

    1. 脚手架是开发现代 Web 应用的必备。

    2. 充分利用 Webpack、Babel、ESLint 等工具辅助项目开发。

    3. 零配置，无需手动配置繁琐的工具即可使用。

    4. 更加关注业务，而不是工具配置。

3.2 使用 React 脚手架初始化项目

    1. 初始化项目，命令：

npx create-react-app my-app

    2. 启动项目，在项目根目录执行命令：

npm start

3.3 在脚手架中使用 React

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

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

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

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