React 的 what，why 和 how

react 概述

什么是 react ？

1. React 是一个用于构建用户界面的JavaScript 库。

用户界面：HTML 页面（前端）
React 主要用来写 HTML 页面，或构建 Web 应用。
如果从 MVC 的角度来看，React 仅仅是视图层（V），也就是只负责视图的渲染，而并非提供了完整的 M 和 C 的功能。

React 的特点

1. 声明式。

只需要描述 UI（HTML）看起来是什么样，就跟写 HTML 一样。
react 负责渲染 UI ，并在数据变化时更新 UI 。
```
const jsx = 
  Hello React!动态变化数据：{count}
```

2. 基于组件。

组件是 React 最重要的内容。
组件表示页面中的部分内容。
组合、复用多个组件，可以实现完整的页面功能。

3. 学习一次，随处使用。

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

React 的基本使用

React 的安装

1. 安装命令：npm install react react-dom。

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

React 的使用

1. 引入 react 和 react-dom 两个 js 文件。

2. 创建 React 元素。

   const title = React.createElement('h1', null, 'Hello React')

   // createElement 是由 React 包提供的。

createElement() 方法中含有三个参数，含义分别是：
- 第一个参数：元素名称。
- 第二个参数：元素属性。
- 第三个参数：元素的子节点。

3. 渲染 React 元素到页面中。

   ReactDOM.render(title, document.getElementById('root'))

   // 这里的 title 就是第二步中创建的 title。

ReactDOM.render() 方法中有两个参数，含义分别是：
- 第一个参数：要渲染的 react 元素。
- 第二个参数：挂载点。

方法说明

React.createElement() 说明（知道）、

返回值：React 元素。
第一个参数：要创建的 React 元素名称。
第二个参数：该 React 元素的属性。
第三个及其以后的参数：该 React 元素的子节点。

const el = React.createElement('h1', {title: '标题'}, 'Hello React')
多个属性和子节点的写法：

const title = React.createElement(
    'p',
  {title: '我是标题'， id: 'p1'},
  'Hello React',
  React.createElement('span', null, '我是span节点')
)

// 其渲染结果就是一个 p 标签嵌套一个 span 标签。却要写这么多代码。

ReactDOM.render() 说明

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

React 脚手架的使用

React 脚手架意义

1. 脚手架是开发现代 Web 应用的必备。
2. 充分利用 Webpack、 Babel、ESlint 等工具辅助项目开发。
3. 零配置，无需手动配置繁琐的工具即可使用。
4. 关注业务，而不是配置工具。

使用 React 脚手架初始化项目

1. 初始化项目的命令：

npx create-react-app my-app

2. 出现内容Happy hacking！就是创建成功了。

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

yarn start或者npm start

npx 命令介绍

1. npm v5.2.0 引入的一条命令。
2. 目的：提升包内提供的命令行工具的使用体验。

原来：先安装脚手架包，再使用这个包中提供的命令。
现在：无需安装脚手架包，就可以直接使用这个包提供的命令。

补充说明

1. 推荐使用：

npx create-react-app my-app
npm init react-app my-app
yarn create react-app my-app
- yarn 是 Facebook 发布的包管理器，可以看做是 npm 的替代品，功能与 npm 相同。
- yarn 具有快速、可靠和安全的特点。
- 初始化新项目：yarn init
- 安装包：yarn add 包名称
- 安装项目依赖项：yarn
- 其他命令，请参考yarn 中文文档

在脚手架中使用 React

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

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

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

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

总结

1. React 是构建用户界面的 JavaScript 库。
2. 使用 React 时，推荐使用脚手架方式。
3. 初始化项目命令：

npx create-react-app 项目名称
4. 启动项目命令：
yarn start或者npm start
5. React.createElement() 方法用于创建 react 元素（知道）。
6. ReactDOM.render() 方法负责渲染 react 元素到页面中。
7. ReactDOM 只应用于 Web 应用，需要做其他模块的时候，要导入对应的包。

#前端##react#