实习中接触前端开发后，我开始了解 React

为什么开始学 React

在公司实习时，项目的前端使用 TypeScript 和 React。我需要遵守项目已有的前端开发规范，也会借助 AI 完成一些简单的前端需求。

刚开始看代码时，.tsx 文件、组件、props 和各种以 use 开头的函数都不太熟悉。AI 可以帮忙生成代码，但如果连一个页面从哪里开始、数据怎么影响界面都不了解，看到改动后就很难判断它是否符合项目要求。

所以这次先从最基础的部分入手，弄清楚 React 在前端项目里大概做什么。这里记录的是我的入门理解，分享给和我一样以前主要学习后端、刚开始接触前端的同学。

React 是什么

React 是一个用于构建用户界面的 JavaScript 库。它把页面拆成一个个组件：一个按钮可以是组件，一个搜索框可以是组件，整个页面也可以由多个组件组合而成。React 官方入门文档

比如一个简单的对话页面，可以这样理解：

text 复制代码

对话页面
├── 顶部标题
├── 消息列表
└── 输入区域
    └── 发送按钮

这只是帮助理解的示意，不代表公司的实际项目结构。页面拆分成组件后，可以分别阅读和维护，也能在合适的地方复用。至于一个完整项目的路由、请求、构建和部署，往往还会用到 React 之外的其他工具，具体取决于项目选择。

组件和 JSX

React 中常见的组件是一个函数，它返回界面应该显示的内容。例如：

tsx 复制代码

function Welcome() {
  return <h1>欢迎使用</h1>;
}

这段看起来像 HTML 的写法叫 JSX。开发时可以在 JSX 中使用 JavaScript 表达式，例如：

tsx 复制代码

function Welcome() {
  const name = '小明';

  return <h1>你好，{name}</h1>;
}

花括号里的 name 会参与界面显示。React 项目中通常使用 JSX；在 TypeScript 项目中，包含 JSX 的文件一般使用 .tsx 扩展名。React 的 TypeScript 文档

Props：把数据交给组件

一个按钮不一定只能显示固定文字。父组件可以把数据传给子组件，这些传入的数据叫 props。可以先把它理解成调用函数时传入的参数。

例如下面的组件接收一个 label：

tsx 复制代码

type ButtonProps = {
  label: string;
};

function ActionButton({ label }: ButtonProps) {
  return <button>{label}</button>;
}

使用时可以写成 <ActionButton label="发送" />。TypeScript 中的 ButtonProps 描述了组件期望接收的数据：这里的 label 应该是字符串。类型检查能帮助发现一部分开发时的错误，但从接口收到的数据仍要根据实际需求做运行时校验。

State：让界面随着操作变化

有些数据会随着用户操作改变，例如输入框的内容、按钮是否可点击、接口是否正在加载。React 可以通过 state（状态） 保存这类信息，并在状态更新后重新渲染相关界面。React：添加交互

下面是一个完整的小示例：

tsx 复制代码

import { useState } from 'react';

type CounterProps = {
  label: string;
};

export default function Counter({ label }: CounterProps) {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount((previousCount) => previousCount + 1);
  }

  return (
    <div>
      <p>{label}：{count}</p>
      <button type="button" onClick={handleClick}>
        点击加一
      </button>
    </div>
  );
}

这段代码可以从上到下这样看：

label 由使用组件的地方传入，例如 <Counter label="点击次数" />。
useState(0) 设置初始值，count 是当前状态，setCount 用来请求更新状态。
用户点击按钮时，React 调用 handleClick。
setCount 根据前一个值计算新值，React 随后更新界面。

注意 onClick={handleClick} 传入的是函数；如果写成 onClick={handleClick()}，就会在渲染时立即调用它，而不是等用户点击。这个示例只用来解释组件和状态，没有调用公司项目的真实接口。React：响应事件

前端怎样和后端配合

作为主要学习后端的学生，我比较关心页面操作怎样到达服务端。以一个常见的查询功能为例：

text 复制代码

用户点击查询
    ↓
组件中的事件处理函数
    ↓
前端请求接口
    ↓
后端处理并返回数据
    ↓
前端更新状态并展示结果

实际项目中，请求代码可能单独放在接口模块，也可能由项目已有的请求工具封装。接需求时，先找到项目已经使用的方式，再沿着调用关系看数据的输入和返回，比自己随手新建一套请求代码更容易和项目保持一致。

除了成功返回，还要关注加载中、请求失败和空结果等情况。页面显示了数据，并不代表其他情况也已经处理好。

在公司项目里，规范从哪里看

每个项目的目录结构和规范可能不同。接触陌生前端项目时，我会先看项目说明、已有页面和配置，再问清楚团队约定。下面这些是常见的观察方向，具体仍以项目实际要求为准：

组件、页面和接口请求分别放在哪里，已有功能是否可以复用。
文件、组件和变量怎样命名，团队使用什么格式化和检查工具。
TypeScript 类型怎样定义，接口返回值如何处理。
加载、空状态和错误提示有没有统一组件或写法。
修改后需要运行哪些检查，以及怎样验证原有功能没有受到影响。

规范的作用是让团队成员能够继续读懂、修改和维护代码。对实习生来说，不知道某个约定时先查已有实现或向同事确认，比让 AI 自己猜要可靠得多。

用 AI 帮忙写前端，我会关注什么

遇到简单需求时，我会先说明要改的页面、希望出现的效果和需要遵循的现有写法，再让 AI 给出修改建议。完成后，我需要自己看一遍改动：组件接收了什么数据，状态在哪里变化，按钮触发了什么，是否复用了项目已有的接口和组件。

看不懂的地方可以继续让 AI 解释，但解释也要回到代码和运行结果里核对。特别是涉及接口请求、状态更新和错误处理的部分，我希望自己能够指出关键位置，说明已经验证了什么、还有什么没确认。

今日总结

今天先认识了 React 中几个最常见的概念：组件负责组织界面，JSX 描述界面内容，props 用来向组件传递数据，state 让界面能够响应变化。再结合一次简单的用户操作，就能初步看懂"点击、处理、更新界面"的过程。

对我来说，现阶段不必急着掌握所有前端细节。先结合实习中接触的代码，弄懂这次需求涉及的组件、数据和项目规范，再逐步补充不熟悉的知识，做起简单的 AI 辅助前端开发也会更有把握。