React 入门教程：从环境搭建到组件开发

React 是 Facebook 推出的前端框架，专注于构建用户界面（UI）。其核心思想是"组件化"和"状态驱动视图"，适合开发复杂的单页应用（SPA）。本文将从环境搭建开始，逐步带你掌握 React 的基础操作。

一、环境准备：安装 Node.js 和 npm

React 依赖 Node.js 环境（包含 npm 包管理器）。

步骤 1：安装 Node.js

访问 Node.js 官网，下载 LTS 版本（长期支持版，推荐 v18.x 及以上）。
安装时勾选"自动安装 npm"（默认选项），安装完成后，在终端输入以下命令验证：
bash 复制代码
```
node -v   # 查看 Node.js 版本（如 v18.17.0）
npm -v    # 查看 npm 版本（如 v9.6.7）
```

步骤 2：创建 React 项目

使用官方工具 create-react-app 快速初始化项目：

bash 复制代码

npx create-react-app my-react-app  # my-react-app 是项目名
cd my-react-app                    # 进入项目目录
npm start                          # 启动开发服务器（自动打开 http://localhost:3000）

浏览器会自动打开页面，显示 React 的默认欢迎界面，说明环境搭建成功。

二、项目结构解析

my-react-app 项目的核心目录和文件如下（新手重点关注）：

csharp 复制代码

my-react-app/
├── public/           # 静态资源（HTML、图片等）
│   └── index.html    # 唯一 HTML 入口文件（React 挂载点）
├── src/              # 核心代码目录
│   ├── index.js      # React 应用入口（渲染根组件）
│   ├── App.js        # 根组件（所有页面的父组件）
│   └── App.css       # 根组件样式
├── package.json      # 项目配置（依赖、脚本等）
└── package-lock.json # 依赖版本锁定文件（自动生成）

public/index.html ：React 应用的"容器"，通过 <div id="root"></div> 提供挂载点。
src/index.js ：通过 ReactDOM.createRoot 将根组件 App 渲染到 #root 节点。
src/App.js：初始的根组件，包含示例代码（可修改为自己的内容）。

三、第一个 React 组件：函数组件

React 的核心是"组件化"------将页面拆分为独立、可复用的组件。最常用的是函数组件（ES6 函数形式）。

示例 1：基础组件（HelloWorld）

修改 src/App.js，创建一个简单的"问候"组件：

jsx:src/App.js 复制代码

// 导入 React（必须，JSX 语法依赖）
import React from 'react';

// 定义函数组件（首字母大写）
function HelloWorld() {
  return (
    <div>
      <h1>Hello, React!</h1>
      <p>这是我的第一个 React 组件。</p>
    </div>
  );
}

// 导出组件（供其他文件引入）
export default HelloWorld;

JSX 语法 ：组件返回的 return 内容是 JSX（JavaScript XML），允许在 JS 中写 HTML 结构（需用 () 包裹多行）。
组件命名：组件名必须首字母大写（区分普通 HTML 标签）。

示例 2：带状态的组件（计数器）

React 的核心特性是"状态驱动视图"------状态（state）变化时，组件自动重新渲染。

使用 useState Hook（React 内置的状态管理工具）实现计数器：

jsx:src/App.js 复制代码

import React, { useState } from 'react';  // 导入 useState

function Counter() {
  // 初始化状态：count 为 0，setCount 是更新状态的函数
  const [count, setCount] = useState(0);

  // 定义事件处理函数（更新状态）
  const handleClick = () => {
    setCount(count + 1);  // 状态更新会触发组件重新渲染
  };

  return (
    <div>
      <p>当前计数：{count}</p>  {/* JSX 中使用 {变量} 插入 JS 表达式 */}
      <button onClick={handleClick}>点击加1</button>  {/* 事件绑定：onClick 是 React 事件 */}
    </div>
  );
}

export default Counter;

状态规则 ：状态是"不可变"的，需通过 setCount 函数更新（直接修改 count++ 无效）。
事件绑定 ：React 事件名采用驼峰式（如 onClick），事件处理函数需传递引用（{handleClick} 而非 {handleClick()}）。

四、组件通信：父子组件传值

组件间通过 props（属性） 传递数据。父组件可以向子组件传递数据，子组件通过 props 接收。

示例 3：父组件向子组件传值

jsx:src/Parent.js 复制代码

import React from 'react';
import Child from './Child';  // 导入子组件

function Parent() {
  const message = "来自父组件的消息";
  return (
    <div>
      <h2>父组件</h2>
      {/* 向子组件传递 props：message 是属性名，值为 message 变量 */}
      <Child text={message} />
    </div>
  );
}

export default Parent;

jsx:src/Child.js 复制代码

import React from 'react';

// 子组件通过 props 接收父组件传递的值
function Child(props) {
  return (
    <div>
      <h3>子组件</h3>
      <p>接收父组件的消息：{props.text}</p>  {/* 读取 props.text */}
    </div>
  );
}

export default Child;

五、运行与构建

开发模式 ：npm start 启动开发服务器（自动热更新：修改代码后页面自动刷新）。
生产构建 ：npm run build 生成优化后的生产代码（输出到 build 目录，可部署到服务器）。

总结

通过本文，你已掌握 React 的基础操作：

环境搭建与项目初始化；
函数组件与 JSX 语法；
状态管理（useState）；
组件通信（props）。

下一步可学习 useEffect（处理副作用）、路由（react-router）等进阶内容，逐步构建复杂应用！