React基础知识总结和思维导图

React 介绍

React 起源于 Facebook(Meta) 的内部项目（2011，News Feed），之后又被用来开发网站（2012，Instagram），并于 2013 年 5 月开源。

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

• 用户界面：HTML 界面。

• Library（库）和 Framework（框架）：库的特点是小而巧，针对特定问题的单一解决方案。框架的特点是大而全，提供了一整套的解决方案。

React 特点

• 声明式

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

• 组件化

把复杂的页面拆分成一个一个的单元，这些组成页面的基本单元就是组件，通过组合、复用组件来编写复杂界面的方式，就是组件化。

• 一次学习，随处使用

使用 React 除了可以开发 Web 应用，还可以使用 React Native 开发原生移动应用，甚至可以开发 VR（虚拟现实）应用（React 360）。

• 相比较于Vue，React强调尽可能的利用 JS 语言自身的能力来编写 UI，而不是通过造轮子增强 HTML 的功能

脚手架创建项目

现代的 Web 应用要考虑的问题很多，除了编写业务代码之外，还要考虑代码规范、预编译、压缩合并、打包上线等工作，需要有一套完整的解决方案来辅助我们快速开发，而 React 脚手架 就是这么一套完整的解决方案，它零配置，开箱即用，让我们从繁杂的 Webpack 配置当中解脱出来，更关注于业务本身。

使用

使用 create-react-app 这个命令行工具，它是 React 官方团队出的一个构建 React 应用的脚手架工具。

方法一

1. 全局安装npm i -g create-react-app或者yarn global add create-react-app。

2. 初始化项目create-react-app my-app，my-app 表示项目名称，可以修改。

3. 启动项目：yarn startor npm start。

🙁 缺点：全局安装命令无法保证命令一直是最新版本。

方法二（推荐）

1. 命令：npx create-react-app react-basic。

2. 启动项目：yarn start or npm start。

3. npx 是 npm@v5.2 版本新添加的命令，用来简化 npm 工具包的使用流程。

😄 优点：npx 会调用最新的 create-react-app 直接创建 React 项目。

渲染自己的界面

步骤

1. 删除 src 和 public 目录中的所有内容。

2. 新建 public/index.html。

3. 新建 src/index.js 文件。

4. 引入 React 核心库和涉及 DOM 操作的包。

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

6. 调用 ReactDOM.render() 方法渲染 React 元素到页面。

​