React 教程

React 是一个用于构建用户界面的 JavaScript 库，由 Facebook 开发。它被广泛应用于各种应用程序中，因为它提供了组件化、声明式和高效的开发方式。

安装 React

在开始之前，你需要安装 Node.js 和 npm（Node.js 包管理器）。安装完成后，你可以使用以下命令来安装 React：

npm install -g create-react-app

然后，你可以创建一个新的 React 应用程序：

create-react-app my-app

这将在当前目录下创建一个新的文件夹 my-app，其中包含你的 React 应用程序。

入门

React 应用程序由组件组成。组件是可复用的代码块，它们负责渲染用户界面的一部分。

以下是一个简单的 React 组件示例：

import React from 'react';

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

export default App;

在上面的例子中，我们创建了一个名为 App 的组件，它返回一个包含标题的 div 元素。

组件状态

React 组件可以维护内部状态，并使用状态来更新其显示。

以下是一个具有状态的组件示例：

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;

在这个例子中，我们创建了一个名为 Counter 的组件，它有一个名为 count 的状态变量和一个用于更新 count 的函数 setCount。

JSX

React 使用 JSX（JavaScript XML）来描述用户界面。JSX 允许你使用 HTML 标签和属性来定义组件的结构。

以下是一个使用 JSX 的组件示例：

import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello, world!</h1>
      <p>Welcome to React.</p>
    </div>
  );
}

export default App;

在这个例子中，我们使用 JSX 来定义组件的结构。

获取帮助

如果你在学习 React 时遇到问题，可以访问我们的 React 社区论坛 获取帮助。

希望这个教程能帮助你入门 React！