React 学习指南 - 第一天

1. React 简介

React 是一个用于构建用户界面的 JavaScript 库，由 Facebook 开发和维护。它允许开发者以声明式的方式构建界面，基于组件的思想来组织代码。

2. 创建你的第一个 React 应用

使用 create-react-app 工具快速搭建一个 React 项目。打开终端，运行以下命令：

npx create-react-app my-first-react-app
cd my-first-react-app
npm start

这会创建一个基础的 React 项目，并启动一个开发服务器，你可以在浏览器中访问 http://localhost:3000 来查看效果。

3. 组件与 JSX

React 中的 UI 是由组件组成的。每个组件本质上是一个函数或类，返回一个描述 UI 的元素。

function App() {
  return <h1>Hello, React!</h1>;
}

这段代码中，App 是一个组件，返回的是一个 JSX 元素。JSX 看起来像 HTML，但实际上是 JavaScript 语法扩展，React 会将其转换为 JavaScript 对象。

4. 状态与事件处理

React 组件可以有自己的状态（State），通过 useState 钩子来管理状态。例如，下面的代码实现了一个按钮点击次数的计数器：

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

• useState(0) 用来定义一个状态变量 count，初始值为 0。

• setCount 是更新该状态的函数。

• onClick 事件触发时，会更新 count 的值。

5. 组件间传递数据

组件可以通过 props 向子组件传递数据。比如，父组件可以传递一个字符串给子组件：

function Parent() {
  return <Child message="Hello from Parent!" />;
}

function Child({ message }) {
  return <h2>{message}</h2>;
}

在这个例子中，Parent 组件通过 props 向 Child 组件传递了 message。

6. 小结

• React 基于组件和状态的思想来构建 UI。

• JSX 是 React 使用的语法扩展，允许在 JavaScript 中写 HTML 样式的代码。

• useState 用于在函数组件中添加状态。

• 组件间的数据传递是通过 props 实现的。

这一天，你学习了 React 的基本概念和如何创建一个简单的应用。接下来的学习可以深入到组件生命周期、状态管理等更复杂的功能。