React 是一个用于构建用户界面的 JavaScript 库，它被广泛应用于各种应用程序中。本教程将为您介绍 React 的基础知识，帮助您快速入门。

快速开始

安装 Node.js 和 npm

在开始使用 React 之前，您需要确保您的计算机上安装了 Node.js 和 npm。您可以从 Node.js 官网 下载并安装。

创建一个新的 React 应用

使用以下命令创建一个新的 React 应用：

npx create-react-app my-app

这将在当前目录下创建一个新的 React 应用文件夹 my-app。

运行您的应用

进入 my-app 文件夹，然后运行以下命令启动开发服务器：

npm start

现在，您应该能在浏览器中看到您的 React 应用了。

React 组件

React 应用由组件组成。组件是可复用的代码块，它们可以被组合在一起以形成复杂的用户界面。

创建组件

要创建一个组件，您可以使用以下结构：

import React from 'react';

function MyComponent() {
  return <div>Hello, World!</div>;
}

export default MyComponent;

使用组件

创建组件后，您可以在其他组件中使用它：

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

function App() {
  return (
    <div>
      <h1>欢迎来到我的 React 应用</h1>
      <MyComponent />
    </div>
  );
}

export default App;

高级功能

React 提供了许多高级功能，如状态管理、生命周期方法和 JSX。

状态管理

状态管理是 React 应用的核心。React 提供了几种不同的状态管理方法，如使用 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;

JSX

JSX 是 JavaScript 的一个语法扩展，它允许您在 JavaScript 代码中直接编写 HTML 标签。

const element = <h1>Hello, world!</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

学习资源

如果您想深入学习 React，以下是一些推荐的学习资源：

希望这份入门指南能帮助您快速掌握 React！👍

React.js Logo