React 快速入门

React 是一个用于构建用户界面的 JavaScript 库，由 Facebook 开发并维护。它允许开发者使用声明式的方式构建 UI，使得代码更加简洁和易于维护。

安装 React

首先，您需要安装 Node.js 和 npm（Node.js 包管理器）。您可以从 Node.js 官网下载并安装。

安装完成后，打开命令行工具，运行以下命令来创建一个新的 React 应用：

npx create-react-app my-app

这条命令会创建一个名为 my-app 的新目录，并在其中安装所有必要的依赖。

运行应用

进入 my-app 目录，然后运行以下命令来启动开发服务器：

npm start

这将启动一个开发服务器，并打开默认浏览器窗口，显示您的应用。

组件

React 应用由组件组成。组件是可复用的代码块，可以用来构建用户界面。

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

import React from 'react';

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

export default App;

在上面的示例中，App 组件返回一个包含标题的 div 元素。

JSX

React 使用 JSX 来描述 UI。JSX 是一种类似于 HTML 的语法扩展，它允许您在 JavaScript 中编写 HTML。

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

import React from 'react';

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

export default App;

在上面的示例中，我们使用 <h1> 标签来创建一个标题。

状态和属性

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 状态都会增加。

React 快速入门

安装 React

运行应用

组件

JSX

状态和属性

更多信息