欢迎来到 React 世界

React 是由 Facebook 开发的一个用于构建用户界面的 JavaScript 库。它采用组件化的开发方式，让我们能够构建可复用、可维护的前端应用。

为什么选择 React？

React 有以下几个显著优势：

1. 组件化开发 - 将 UI 拆分为独立、可复用的组件
2. 虚拟 DOM - 提供高效的页面更新机制
3. 单向数据流 - 让数据流向更加清晰和可预测
4. 丰富的生态系统 - 拥有庞大的社区和丰富的第三方库

学习目标

通过本系列教程，你将学会：

• ✅ React 的基本概念和核心思想
• ✅ 如何创建和使用 React 组件
• ✅ JSX 语法的使用方法
• ✅ 状态管理和事件处理
• ✅ 组件间的数据传递
• ✅ React Hooks 的使用

环境准备

在开始学习之前，我们需要准备开发环境。

前置要求

确保你的系统已安装：

• Node.js (版本 14 或更高)
• npm 或 yarn 包管理器
• 代码编辑器（推荐 VS Code）

创建第一个 React 应用

使用 Create React App 快速创建项目：

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

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

# 启动开发服务器
npm start

提示: Create React App 是 React 官方提供的脚手架工具，它帮我们配置好了开发环境，包括 Webpack、Babel、ESLint 等工具。

项目结构解析

创建完成后，你会看到以下目录结构：

my-first-react-app/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── App.js
│   ├── App.css
│   ├── index.js
│   └── index.css
├── package.json
└── README.md

让我们了解一下关键文件的作用：

• public/index.html - 应用的 HTML 模板
• src/index.js - 应用的入口文件
• src/App.js - 主要的应用组件
• package.json - 项目依赖和脚本配置

第一个 React 组件

让我们来看看 src/App.js 文件：

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>欢迎来到 React!</h1>
        <p>这是我的第一个 React 应用</p>
      </header>
    </div>
  );
}

export default App;

这就是一个简单的 React 函数组件！让我们分析一下：

组件的基本结构

1. 导入 React - import React from 'react'
2. 定义组件函数 - function App() { ... }
3. 返回 JSX - 组件的 UI 结构
4. 导出组件 - export default App

JSX 语法介绍

JSX 是 JavaScript 的语法扩展，让我们能够在 JavaScript 中写类似 HTML 的代码：

// JSX 语法
const element = <h1>Hello, React!</h1>;

// 等价的 JavaScript 代码
const element = React.createElement('h1', null, 'Hello, React!');

JSX 的特点：

• 使用 className 而不是 class
• 所有标签必须闭合
• 可以嵌入 JavaScript 表达式（使用 {} 包裹）

实践练习

让我们修改 App.js 文件，创建一个更有趣的组件：

import React from 'react';
import './App.css';

function App() {
  const name = "React 学习者";
  const currentTime = new Date().toLocaleTimeString();

  return (
    <div className="App">
      <header className="App-header">
        <h1>你好，{name}!</h1>
        <p>当前时间：{currentTime}</p>
        <div className="welcome-message">
          <h2>🎉 欢迎开始 React 学习之旅</h2>
          <ul>
            <li>✨ 学习组件化开发</li>
            <li>🚀 掌握现代前端技术</li>
            <li>💡 构建优秀的用户体验</li>
          </ul>
        </div>
      </header>
    </div>
  );
}

export default App;

保存文件后，你会看到页面自动更新！这就是 React 开发服务器的热重载功能。

小结

在这一节中，我们学习了：

• React 的基本概念和优势
• 如何搭建 React 开发环境
• React 组件的基本结构
• JSX 语法的使用方法

下一步

在下一节教程中，我们将深入学习：

• 如何创建自定义组件
• 组件的 props 传递
• 组件的状态管理

继续学习，你将逐步掌握 React 的强大功能！

练习建议: 尝试修改 App 组件，添加更多的 JSX 元素，体验 React 的开发流程。记住，实践是最好的学习方式！