React快速上手

React介绍

了解 react 的历史背景和基本概念

React 起源于 Facebook 的内部项目。因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在 2013 年 5 月开源了。

React 是最流行的前端框架之一。对比近两年 Vue 和 Angular 的下载量，还有 2021 年开发者使用的 web 框架的 比例 ，可以看到 React 是前端工程师应该必备技能之一，现在很多大厂也在使用它。

React 是一个用于构建用户界面的 JavaScript 库。可以理解它只负责 MVC 中的视图层渲染，不直接提供数据模型和控制器功能。react-router 实现路由，redux 实现状态管理，可以使用它们来构建一个完整应用。

React 中文站：React 官方中文文档 – 用于构建用户界面的 JavaScript 库

总结： React 是 Facebook 开源的，现在它是最流行的前端框架大厂必备，React 本身是一个构建 UI 的库，如果需要开发一个完整的 web 应用需要配合 react-router，redux，…等。

React特点

了解 react 的三个核心特点

(1)声明式

React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据变动时 React 能高效更新并渲染合适的组件。

以声明式编写 UI，可以让你的代码更加可靠，且方便调试。

(2)组件化

创建拥有各自状态的组件，再由这些组件构成更加复杂的 UI。 组件逻辑使用 JavaScript 编写而非模版，因此你可以轻松地在应用中传递数据，并使得状态与 DOM 分离。

(3)一次学习，跨平台编写

无论你现在使用什么技术栈，在无需重写现有代码的前提下，通过引入 React 来开发新功能。React 还可以使用 Node 进行服务器渲染，或使用 React Native 开发原生移动应用。

总结： 声明式 UI 更清晰快捷，组件化开发更灵活，可支持 SSR,SPA ,NativeApp,VR 多平台。

React 脚手架

掌握使用 create-react-app 脚手架创建项目

创建项目方式：

• 全局安装脚手架再使用命令创建项目
• 使用 npx 远程调用脚手架创建项目

方式一

• 全局安装

# 全局安装脚手架
npm i create-react-app -g

• 创建项目

# project-name 项目名称
create-react-app project-name

方式二

• npx 安装，npm5.2+支持

# project-name 项目名称
npx create-react-app project-name

推荐： 使用方式二这样每次使用的最新脚手架创建项目，创建完毕使用 npm start 启动项目。

React 基本使用

在 create-react-app 脚手架创建项目中，掌握使用 react 基本步骤

使用步骤：

• 导入 react、react-dom 两个包
• 使用 react 创建 react 元素（虚拟 DOM）
• 使用 react-dom 渲染 react 元素

落地代码：src 内文件删除，创建src/index.js

• 导包

// 负责创建react元素
import React from 'react';

// 负责把react元素渲染到页面
import ReactDom from 'react-dom';

• 创建 react 元素

// 参数1：标签名称
// 参数2：属性集合  特殊 class==>className for==>htmlFor
// 参数3：标签内容
const element = React.createElement('h1', { id: 'el' }, 'Hello React');

• 渲染 react 元素

// #root在public/index.html上
ReactDom.render(element, document.getElementById('root'));

总结： 使用 react 创建元素，使用 react-dom 渲染元素。

React 创建元素练习

掌握使用 react 创建嵌套元素

使用 react 创建如下元素

<div class="list">
  <h1>水果</h1>
  <ul>
    <li>苹果</li>
    <li>橘子</li>
  </ul>
</div>

React代码

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

const element = React.createElement('div', { className: 'list' }, [
  React.createElement('h1', null, '水果'),
  React.createElement('ul', null, [
    React.createElement('li', null, '苹果'),
    React.createElement('li', null, '橘子'),
  ]),
]);

ReactDOM.render(element, document.getElementById('root'));

总结： 使用 createElement 创建元素非常麻烦、可读性差、不优雅，开发中推荐使用 JSX 来声明 UI。