前言

React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”。

应用场景

• 前端应用开发，如Facebook、Instagram
• 移动原生应用开发，如Instagram、Discord、Oculus
• 结合Electron，进行桌面应用开发
• 写3D游戏等

设计思路

1. 组件内部拥有私有状态State
2. 组件接受外部的Props状态提供复用性
3. 根据当前的State/Props，返回一个UI

生命周期

• Mounting(挂载)：已插入真实 DOM
• Updating(更新)：正在被重新渲染
• Unmounting(卸载)：已移出真实 DOM

安装和搭建

创建第一个react项目

在这之前确保拥有node的环境，可以通过node -v

打开编辑器的终端输入：

npx create-react-app my-app
复制代码

搭建成功后

在src目录下删除其他的文件，创建一个文件叫index.js

在index.js文件中的内容：

import React from 'react';
import ReactDOM from 'react-dom';
function Hello(props) {
  return <h1>Hello World!</h1>;
}
ReactDOM.render(<Hello />, document.getElementById('root'));
复制代码

想要项目跑起来的话，打开终端后输入（记得cd到项目目录）：

npm start
复制代码

打开浏览器访问：http://localhost:3000/

一个hello world的demo样例就写出来了