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

news2024/11/24 6:29:04

在这里插入图片描述

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

React

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

0. 前言

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

1. 环境准备

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

2. 创建一个新的 React 应用

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

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 代码。

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 的组件:

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

并在其他组件中使用它：

<Welcome name="Sara" />

7. State 和生命周期

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

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

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。

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>
  );
}