「一周上手React」系列 Day1：React基础核心

大家好，我是斜杠前端！自从AI热潮出现后，发现前端行情更惨了。有人说：“自从有了AI辅助，以前是一个中高级带着初级干活，现在是中高级自己一个人干完了！”真的太难了！

所以，前端们不能继续这样下去了，近年前端的关键词都是：全栈 / 独立开发 / 大前端，要掌握的东西太多了。这次这个系列是给vue的前端工程师们快速上手react的笔记。根据二八法则，用一周的时间掌握20%的 react核心就可以上手了，剩下的遇到再查下文档问问ai就可以了，这也是我自己学习总结的记录，共勉！

Day1：React基础核心

1. 组件创建与属性传递

React 组件是构建用户界面的基本单位。在 TypeScript 环境下创建组件：

interface GreetingProps {
  name: string;
}

function Greeting({ name }: GreetingProps) {
  return <h1>Hello, {name}!</h1>;
}

// 使用组件
<Greeting name="React" />

2. JSX 条件渲染

React 中可以使用多种方式进行条件渲染：

function ConditionalRender({ isLoggedIn }: { isLoggedIn: boolean }) {
  // 使用三元运算符
  return (
    <div>
      {isLoggedIn ? <p>欢迎回来</p> : <p>请登录</p>}
      
      {/* 使用 && 运算符 */}
      {isLoggedIn && <p>用户已登录</p>}
    </div>
  );
}

3. JSX 列表渲染

使用 map 函数渲染列表，注意要添加 key 属性：

interface Item {
  id: number;
  name: string;
}

function ItemList({ items }: { items: Item[] }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

4. 父子组件通信（Props & Events）

展示父子组件之间的数据传递和事件通信：

interface ChildProps {
  message: string;
  onButtonClick: (data: string) => void;
}

// 子组件
function Child({ message, onButtonClick }: ChildProps) {
  return (
    <div>
      <p>{message}</p>
      <button onClick={() => onButtonClick("来自子组件的数据")}>
        点击发送数据给父组件
      </button>
    </div>
  );
}

// 父组件
function Parent() {
  const handleChildClick = (data: string) => {
    console.log(data);
  };

  return (
    <Child 
      message="父组件传递的消息" 
      onButtonClick={handleChildClick}
    />
  );
}

5. TypeScript 与 React 组件类型

在 React 中使用 TypeScript 定义组件和属性类型：

// 定义 Props 接口
interface UserProps {
  name: string;
  age: number;
  hobbies?: string[];  // 可选属性
  onNameChange: (newName: string) => void;
}

// 使用 TypeScript 的组件
const UserProfile: React.FC<UserProps> = ({ 
  name, 
  age, 
  hobbies = [], 
  onNameChange 
}) => {
  return (
    <div>
      <h2>{name}</h2>
      <p>年龄：{age}</p>
      <ul>
        {hobbies.map((hobby, index) => (
          <li key={index}>{hobby}</li>
        ))}
      </ul>
      <button onClick={() => onNameChange("新名字")}>
        修改名字
      </button>
    </div>
  );
};

小结

Day1 我们学习了：

1. 如何创建 React 组件并传递属性

2. JSX 中的条件渲染方法

3. 如何渲染列表数据

4. 父子组件之间的通信方式

5. 在 React 中使用 TypeScript 的基础知识

练习作业

1. 创建一个用户列表组件，实现列表的渲染

2. 实现一个带有条件渲染的登录状态显示组件

3. 创建父子组件，实现数据传递和事件通信

4. 使用 TypeScript 为所有组件添加类型定义