携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第21天，点击查看活动详情
React 介绍
React 起源于 Facebook 的内部项目。因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，于是在 2013 年 5 月开源了。
React 是一个用于构建用户界面的 JavaScript 库。也是目前最流行的前端框架之一。
React 特点
React 矿建具备三个核心特点：
- 声明式 UI： UI 更清晰简洁
- 组件化：方便复用，开发更灵活
- 跨端开发：支持 SPA，SSR， Native App，VR 多平台开发
使用 React 脚手架创建项目
创建一个 React 项目方式一般有三种：
- 自己使用 webpack 或者 vite 从零搭建
- 使用官方脚手架快速创建项目
一般我们都是采用脚手架。
使用脚手架也有两种方式，一是先全局安装脚手架，再使用脚手架创建项目：
# 全局安装脚手架
npm i -g create-react-app
# 创建项目，project-name 项目名称
create-react-app <project-name>
二是使用 npx / pnpm 远程调用脚手架创建项目：
# 以 pnpm 为例
pnpm create react-app 01.basic
# 进入项目并启动：
cd 01.basic
pnpm start
启动成功，打开浏览器访问：
React 基本使用
第一个简单例子：使用 createElement 创建 React 元素
使用脚手架创建的项目，目录结构为：
修改项目入口文件 src/index.js 的内容：
// React的核心包，主要实现了虚拟dom，用于创建 React 元素
import React from 'react';
// React 开发前端页面的核心包，负责将 React 元素渲染到页面
import ReactDom from 'react-dom';
// createElement 方法用于创建一个 React 元素
// 参数1：标签名称
// 参数2：属性集合
// 参数3：标签子节点
const element = React.createElement('h1', { id: 'title' }, 'Hello, React');
// 将创建的元素渲染到html文件中的 root 节点上
ReactDom.render(element, document.getElementById('root'));
保存代码后，浏览器会自动刷新：
小结
本文简单介绍了 React 是什么，以及使用官方脚手架工具，快速启动了一个 React 项目， 并演示了一个核心方法 createElement 方法的使用，它用来创建一个 React 元素，然后调用 render 方法，可以将其渲染到页面上。
同时， 可以发现使用 createElement 来写页面的话，非常麻烦，可读性差，所以实际开发中更推荐使用 JSX 来写真正的声明式 UI。
下篇文章会介绍 React中 JSX 的使用。
