React第一节大纲

要开始使用 React，你可以按照以下步骤来搭建环境、创建组件，并开始构建 React 应用。React 是一个用于构建用户界面的 JavaScript 库，通常与 JSX（JavaScript XML）语法结合使用，以实现更直观的代码书写方式。

1. 安装 React

首先，确保你已经安装了 Node.js 和 npm（Node 包管理器），你可以通过以下命令检查是否已安装：

node -v
npm -v

如果未安装，可以从 Node.js 官网 下载并安装。

使用 Create React App 创建项目：

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

这将启动一个 React 开发环境，打开浏览器访问 http://localhost:3000 便可以看到默认生成的 React 应用。

2. React 组件的基本结构

React 应用主要由组件构成。组件可以是函数组件或类组件，下面是如何定义一个简单的 React 组件。

2.1 函数组件

这是最常用和现代的 React 组件写法。

import React from 'react';

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

export default Greeting;

2.2 类组件（较少使用）

import React, { Component } from 'react';

class Greeting extends Component {
  render() {
    return (
      <div>
        <h1>Hello, React!</h1>
      </div>
    );
  }
}

export default Greeting;

3. 使用组件

在 src/App.js 文件中，你可以引入并使用上面定义的组件。

import React from 'react';
import Greeting from './Greeting';

function App() {
  return (
    <div>
      <Greeting />
    </div>
  );
}

export default App;

现在你可以看到页面上显示了 “Hello, React!”。

4. JSX 语法

React 使用一种称为 JSX 的语法，允许你在 JavaScript 中编写类似 HTML 的代码。JSX 不是 HTML，它实际上会被转换成 JavaScript 函数调用。以下是 JSX 的一些基本语法规则：

• 在 JSX 中，所有标签都必须闭合，例如 <div /> 或 <div></div>。
• JSX 中的属性使用驼峰命名法，例如：className 而不是 class。
• 你可以在 JSX 中插入 JavaScript 表达式，使用 {} 包裹。

5. 管理组件状态

React 中的状态可以使用 useState 钩子来管理。

示例：使用 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>
  );
}

export default Counter;

在 App.js 中使用这个计数器组件：

import React from 'react';
import Counter from './Counter';

function App() {
  return (
    <div>
      <Counter />
    </div>
  );
}

export default App;

6. 组件之间的传参 (Props)

Props 是组件之间传递数据的机制。父组件可以通过属性的方式将数据传递给子组件。

示例：使用 Props 传递数据

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

在 App.js 中传递参数：

import React from 'react';
import Greeting from './Greeting';

function App() {
  return (
    <div>
      <Greeting name="Alice" />
      <Greeting name="Bob" />
    </div>
  );
}

export default App;

输出：

Hello, Alice!
Hello, Bob!

7. React Hooks (钩子)

React Hooks 是 React 16.8 之后引入的功能，允许你在函数组件中使用状态和其他 React 特性。

• useState：用于在组件中管理状态。
• useEffect：用于处理副作用，比如数据获取、订阅等。

示例：使用 useEffect 获取数据

import React, { useState, useEffect } from 'react';

function DataFetcher() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(response => response.json())
      .then(data => setData(data));
  }, []); // 空依赖数组意味着这个 effect 只会在组件挂载时执行

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {data.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default DataFetcher;

8. 构建生产环境应用

当你准备好上线你的 React 应用时，可以运行以下命令来构建生产版本：

npm run build

这会生成优化过的、可部署的代码，放在 build/ 文件夹中。

总结

React 是一个非常强大的前端库，可以轻松构建复杂的用户界面。通过使用 Create React App 快速创建项目，编写组件，管理状态和使用 Hooks，可以帮助你快速上手 React。如果你有更复杂的场景需求（如路由、全局状态管理等），你可以引入 React Router 或 Redux 等相关库。