React 的 what，why 和 how

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 = <div className="app">
  <h1>Hello React!动态变化数据：{count}</h1>
</div>

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 文件。

<script src=./node_modules/react/umd/react.development.js></script>
<script src=./node_modules/react-dom/umd/react-dom.development.js></script>

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 标签。却要写这么多代码。

eactDOM.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 应用，需要做其他模块的时候，要导入对应的包。