React 是一个用于构建用户界面的 JavaScript 库，它使得构建动态和响应式的网页应用变得更加容易。下面是 React 的基础教程，帮助你快速入门。

React 简介

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

React 的特点

  • 声明式 UI：React 使用声明式的方法来构建 UI，这使得开发者可以更直观地理解应用的状态和行为。
  • 组件化：React 将 UI 分解为独立的组件，每个组件负责渲染一部分 UI。
  • 虚拟 DOM：React 使用虚拟 DOM 来提高页面渲染的效率。

快速开始

安装 React

首先，你需要安装 Node.js 和 npm（Node.js 包管理器）。安装完成后，可以通过以下命令全局安装 React：

npm install -g create-react-app

创建一个新的 React 应用

使用 create-react-app 命令创建一个新的 React 应用：

create-react-app my-app

这将创建一个名为 my-app 的新目录，并初始化一个简单的 React 应用。

运行应用

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

npm start

现在，你应该可以在浏览器中看到你的 React 应用了。

组件

在 React 中，组件是构建 UI 的基本单位。下面是一些常用的 React 组件：

  • JSX：React 使用 JSX 来描述 UI 的结构，它是一种类似于 HTML 的语法扩展。
  • 组件类：React 组件可以是类或函数。
  • 状态：组件的状态是组件内部的数据，它可以随时间变化。
  • 属性：组件的属性是传递给组件的数据，用于控制组件的行为。

示例：Hello World

以下是一个简单的 React 组件示例，它显示 "Hello, world!"：

import React from 'react';

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

export default HelloWorld;

高级特性

React 提供了许多高级特性，如上下文（Context）、高阶组件（Higher-Order Components）、钩子（Hooks）等。

钩子

钩子是 React 16.8 引入的新特性，它允许你在函数组件中使用状态和其它 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;

学习资源

想要了解更多关于 React 的知识，可以访问以下资源：

希望这个基础教程能帮助你入门 React。祝你学习愉快！

React Logo