【详细讲解React 快速入门教程】

🔥博主：程序员不想YY啊🔥
💫CSDN优质创作者，CSDN实力新星，CSDN博客专家💫
🤗点赞🎈收藏⭐再看💫养成习惯
🌈希望本文对您有所裨益，如有不足之处，欢迎在评论区提出指正，让我们共同学习、交流进步！🌈

React

[0. 前言](#0. 前言)
[1. 环境准备](#1. 环境准备)
[2. 创建一个新的 React 应用](#2. 创建一个新的 React 应用)
[3. 了解项目结构](#3. 了解项目结构)
[4. 编辑 App 组件](#4. 编辑 App 组件)
[5. JSX 语法](#5. JSX 语法)
[6. 组件和 Props](#6. 组件和 Props)
[7. State 和生命周期](#7. State 和生命周期)
[8. 使用 Hooks](#8. 使用 Hooks)
[9. 测试你的组件](#9. 测试你的组件)
[10. 部署你的应用](#10. 部署你的应用)

0. 前言

React是一个用于构建用户界面的 JavaScript 库，由 Facebook 发起并开源，下面是一个简要的 React 快速入门教程，帮助你开始使用这个强大工具：

1. 环境准备

在开始之前，请确保你已经安装了 Node.js 和 npm (Node.js 的包管理器)。你可以在 nodejs.org 上下载安装最新版的 Node.js，它通常包含 npm。

2. 创建一个新的 React 应用

使用 create-react-app 可以快速生成一个新的 React 应用。打开你的终端（命令行工具），然后输入：

bash 复制代码

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

这会创建一个名为 my-react-app 的新目录，其中包含所有的初始文件，并启动一个开发服务器，然后在浏览器中打开你的新应用。

3. 了解项目结构

在 my-react-app 文件夹中，你会看到以下重要的文件和文件夹：

💫public/index.html: 这是你的应用的主 HTML 文件。
💫src/index.js: 这是 React 应用的入口文件。
💫src/App.js: 这是一个基本的组件文件，包含了应用的初始内容。

4. 编辑 App 组件

接下来，打开 src/App.js 文件。这里定义了一个名为 App 的React 组件，它返回一段能够被渲染的 JSX 代码。

jsx 复制代码

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
      </header>
    </div>
  );
}

export default App;

可以修改上面的 App 组件，例如，更改段落 <p> 中的文字并保存文件，你的浏览器会自动刷新并显示新的内容。

5. JSX 语法

JSX 是一种看起来很像 HTML 的 JavaScript 语法扩展。与 React 一起使用时，JSX 可以让你更方便地描述 UI 应该呈现出什么样子。

6. 组件和 Props

组件是 React 应用的核心概念之一，它们让你能够拆分 UI 成独立的、可复用的部分，并且可以独立地考虑每个部分。

Props 是组件的参数。你可以这样创建一个带有 props 的组件:

jsx 复制代码

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

并在其他组件中使用它：

jsx 复制代码

<Welcome name="Sara" />

7. State 和生命周期

State 是 React 组件的另一个重要概念，State 允许 React 组件在不需要重新加载页面的情况下，响应用户输入、网络响应和其他事件。

使用 State，你需要将函数组件转换为类组件或使用 Hooks。一个类组件例子：

jsx 复制代码

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

8. 使用 Hooks

从 React 16.8 开始，你可以在不编写类的情况下使用 state 和其他 React 特性，这得益于引入了 Hooks。

jsx 复制代码

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

function Clock() {
  const [date, setDate] = useState(new Date());

  useEffect(() => {
    const timerID = setInterval(() => tick(), 1000);

    return () => {
      clearInterval(timerID);
    };
  }, []);

  function tick() {
    setDate(new Date());
  }

  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {date.toLocaleTimeString()}.</h2>
    </div>
  );
}

9. 测试你的组件

你的 React 应用可以通过各种方式来测试，一种流行的方法是使用 Jest 框架进行测试，它通常与 React 应用一起安装。

10. 部署你的应用

一旦你的应用做好了发布的准备，你可以运行 npm run build 来构建一个用于生产的版本，这会在你的项目目录下创建一个 build 文件夹，其中包含了用于部署的文件。

进一步学习 React，建议阅读 React 官方文档，用以深入理解这个库以及它的高级功能。