1、React入门：React是什么、为什么选择React、React的核心概念（虚拟DOM、JSX、组件化）、搭建第一个React项目（Create React App）

React到底是什么？

说实话，我第一次接触React的时候，也觉得很神秘。它就是一个JavaScript库，专门用来构建用户界面的。你想想看，我们平时写网页，要么用原生JS操作DOM，要么用jQuery。但项目一大，代码就乱成一锅粥。

React的出现，说白了就是帮我们解决这个问题的。它由Facebook团队开发，2013年开源。现在前端圈子里，React、Vue、Angular三足鼎立。我个人习惯用React，因为它的生态最成熟，社区最活跃。

为什么选择React？

我在项目中遇到过不少团队，从jQuery迁移到React后，开发效率提升了一大截。为什么？

• 组件化开发：每个功能模块独立，复用性高。改一个地方，不会影响其他地方。
• 虚拟DOM：性能好，页面更新快。用户操作时不会卡顿。
• 强大的生态：React Native可以写移动端，Next.js可以做服务端渲染。
• 大厂背书：Facebook、Instagram、Airbnb都在用。你找工作，React岗位也最多。

嗯，这里要注意。React的学习曲线其实不算陡。你只要会JavaScript基础，就能上手。不像Angular，上来就要学TypeScript、依赖注入、装饰器，头都大了。

React的核心概念

虚拟DOM

虚拟DOM是什么？说白了，就是一个JavaScript对象，用来描述真实DOM的样子。每次数据变化，React先在虚拟DOM上做比较，然后只更新真正变化的部分。

我曾经接手过一个项目，页面里有上千个列表项。用原生JS操作DOM，每次更新都要重新渲染整个列表，卡得不行。换成React后，它只更新变化的那一项，流畅多了。

JSX

JSX是React的语法糖。它让你在JavaScript里写HTML，看起来像模板语言，但本质还是JS。

// 这是JSX
const element = <h1>Hello, React!</h1>;

// 编译后变成这样
const element = React.createElement('h1', null, 'Hello, React!');

我第一次看到JSX时，觉得有点奇怪。HTML和JS混在一起，不违背关注点分离吗？后来才明白，React认为渲染逻辑和UI逻辑是紧密耦合的，分开反而不好维护。

组件化

组件化是React的精髓。每个组件就是一个独立的单元，有自己的状态和逻辑。你可以把页面拆分成多个小组件，然后组合起来。

// 一个简单的组件
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// 使用组件
const element = <Welcome name="React" />;

组件化的好处很明显。比如你做一个电商网站，商品卡片、购物车、用户信息，都可以做成独立组件。改商品卡片样式，不会影响购物车。这就是我为什么喜欢React的原因——代码清晰，维护方便。

搭建第一个React项目

好了，理论说完了，我们来动手。搭建React项目，最常用的方式是用Create React App（CRA）。

环境准备

首先，你得安装Node.js。版本建议用LTS版，稳定。我习惯用nvm管理Node版本，方便切换。

# 检查Node是否安装
node -v

# 检查npm是否安装
npm -v

创建项目

# 使用npx创建React项目
npx create-react-app my-first-react-app

# 进入项目目录
cd my-first-react-app

# 启动开发服务器
npm start

等几分钟，浏览器会自动打开 http://localhost:3000。你会看到一个React的默认页面，恭喜你，第一个React项目跑起来了！

项目结构

创建完成后，你会看到这样的目录结构：

my-first-react-app/
  node_modules/    # 依赖包
  public/          # 静态资源
  src/             # 源代码
    App.js         # 根组件
    index.js       # 入口文件
  package.json     # 项目配置

src目录是你主要工作的地方。index.js是入口，App.js是根组件。你可以修改App.js，看看页面怎么变化。

总结

这一章我们讲了React是什么、为什么选它、核心概念，还亲手搭了第一个项目。你想想看，其实React没那么神秘，就是一个工具，帮我们更好地构建用户界面。

下一章，我们会深入JSX，看看它到底怎么工作的。到时候，你会对React有更深的理解。

嗯，今天就到这里。记得动手敲代码，光看是学不会的。