首页手记 React18开发入门教程：从零开始搭建你的第一个Re...

React18开发入门教程：从零开始搭建你的第一个React应用

标签：

前端工具 React React Native

概述

本文详细介绍了React18开发的相关内容，包括React18的主要特性和与之前版本的区别。通过一步步指导，读者可以轻松搭建开发环境并创建React应用。此外，文章还讲解了React组件的基本概念和状态管理等核心知识点。

React18开发入门教程：从零开始搭建你的第一个React应用

React18简介

React18的主要特性

React18是React框架的一个重要版本，它带来了许多新特性和改进。以下是React18的主要特性：

并发模式（Concurrent Mode）：
- 允许React在渲染时并发执行，提高应用性能，特别是在处理大量数据或复杂UI时。
自动边界（Automatic Batching）：
- 自动合并状态更新，减少不必要的渲染，从而提高性能。
批量更新（Batch Updates）：
- React 18引入了批量更新机制，可以优化状态更新的频率，减少不必要的渲染。
异步渲染（Async Rendering）：
- 支持异步渲染，使得React在渲染时可以等待某些异步操作完成。
新的Hooks：
- React18引入了一些新的Hooks，如useId，使得开发更高效。

React18与之前的版本的区别

React18的主要区别在于并发模式和自动边界的支持。以下是React18与React17相比的一些关键区别：

并发模式：
- 在React18中，开发者可以使用新的Hooks（如useTransition和startTransition）来控制渲染的优先级。
- 并发模式允许React在渲染时进行更精细的控制。
自动边界：
- 在React18中，自动边界机制可以自动批处理状态更新，从而减少不必要的渲染。
- 之前的版本需要手动使用batch函数来批处理更新。
更新优先级：
- 在React18中，开发者可以利用新的Hooks来控制更新的优先级，从而更好地管理用户界面的响应性。
更好的错误处理：
- React18增强了错误处理机制，可以更好地捕获和处理渲染过程中出现的错误。

开发环境搭建

安装Node.js和npm

访问Node.js官网（https://nodejs.org/），下载并安装Node.js。
安装完成后，打开终端，输入命令node -v，查看Node.js安装是否成功。
确认Node.js安装成功后，输入命令npm -v，查看npm版本是否安装成功。

创建React应用

打开终端或命令行工具，创建一个新的文件夹，例如myReactApp。
进入新建的文件夹，输入命令npm init -y，初始化一个新的npm项目。
安装React和相关库，输入以下命令：
```
npm install react react-dom
```

使用Create React App快速搭建项目

安装create-react-app，输入以下命令：
```
npx create-react-app my-app
```
进入新建的项目文件夹，输入命令cd my-app。
运行开发服务器，输入命令npm start，启动React应用。
打开浏览器，访问http://localhost:3000，查看React应用是否正常运行。

React基础组件

组件的定义和使用

React应用的核心是组件。组件可以看作是可重用的UI片段。组件可以接受输入（即属性），并返回React元素来描述应如何渲染该组件。

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

import React from 'react';

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

export default Welcome;

函数组件与类组件的区别

函数组件和类组件都是React中的常见组件类型，但它们有一些关键区别：

定义方式：
- 函数组件：使用普通函数定义。
- 类组件：使用class关键字定义。
状态管理：
- 函数组件：无法直接使用状态，但可以使用Hooks（如useState）。
- 类组件：可以直接使用this.state来管理状态。
生命周期方法：
- 函数组件：不直接支持生命周期方法，但可以使用Hooks（如useEffect）替代。
- 类组件：支持生命周期方法，如componentDidMount、componentDidUpdate等。

类组件的生命周期方法示例

import React, { Component } from 'react';

class LifecycleExample extends Component {
  constructor(props) {
    super(props);
    this.state = {
      message: 'Hello, React!'
    };
  }

  componentDidMount() {
    console.log('Component did mount');
  }

  componentDidUpdate(prevProps, prevState) {
    console.log('Component did update');
  }

  componentWillUnmount() {
    console.log('Component will unmount');
  }

  render() {
    return <div>{this.state.message}</div>;
  }
}

export default LifecycleExample;

使用JSX语法

JSX是一种在JavaScript中使用类似于XML的语法来描述UI元素的方法。以下是一个使用JSX的简单示例：

import React from 'react';

function Welcome(props) {
  return (
    <div>
      <h1>Hello, {props.name}</h1>
      <p>Welcome to React!</p>
    </div>
  );
}

export default Welcome;

状态与生命周期

状态的管理

在React中，状态（state）是组件的内部数据，可以使用useState Hook来管理。以下是一个使用useState的示例：

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Counter;

生命周期方法的使用

在React18之前，类组件可以使用生命周期方法来控制组件的生命周期。以下是一个使用生命周期方法的示例：

import React, { Component } from 'react';

class LifecycleExample extends Component {
  constructor(props) {
    super(props);
    this.state = {
      message: 'Hello, React!'
    };
  }

  componentDidMount() {
    console.log('Component did mount');
  }

  componentDidUpdate(prevProps, prevState) {
    console.log('Component did update');
  }

  componentWillUnmount() {
    console.log('Component will unmount');
  }

  render() {
    return <div>{this.state.message}</div>;
  }
}

export default LifecycleExample;

React18中生命周期变化的解释

React18引入了并发模式和自动边界，使得生命周期方法的使用变得更加灵活。在React18中，推荐使用新的Hooks（如useEffect）来替代传统的生命周期方法。以下是一个使用useEffect的示例：

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

function LifecycleExample() {
  const [message, setMessage] = useState('Hello, React!');

  useEffect(() => {
    console.log('Component did mount');
    return () => {
      console.log('Component will unmount');
    };
  }, []);

  useEffect(() => {
    console.log('Component did update');
  }, [message]);

  return <div>{message}</div>;
}

export default LifecycleExample;

实战演练：构建一个简单的Todo应用

设计应用的UI结构

首先，设计一个简单的Todo应用的UI结构。主要包括以下几个部分：

输入框：用于输入新的Todo项。
添加按钮：用于添加新的Todo项。
Todo列表：显示当前的所有Todo项。
删除按钮：用于删除Todo项。

实现状态管理

使用useState Hook来管理Todo列表的状态。以下是一个简单的Todo应用的状态管理示例：

import React, { useState } from 'react';

function TodoApp() {
  const [todos, setTodos] = useState([]);
  const [input, setInput] = useState('');

  const addTodo = (e) => {
    e.preventDefault();
    setTodos([...todos, { text: input, id: Date.now() }]);
    setInput('');
  };

  return (
    <div>
      <form onSubmit={addTodo}>
        <input value={input} onChange={(e) => setInput(e.target.value)} />
        <button type="submit">Add Todo</button>
      </form>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            {todo.text}
            <button onClick={() => setTodos(todos.filter((t) => t.id !== todo.id))}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoApp;

添加删除和编辑功能

在上述示例的基础上，可以进一步添加删除和编辑Todo项的功能。以下是一个完整的Todo应用示例，包括删除和编辑功能：

import React, { useState } from 'react';

function TodoApp() {
  const [todos, setTodos] = useState([]);
  const [input, setInput] = useState('');
  const [editing, setEditing] = useState(null);

  const addTodo = (e) => {
    e.preventDefault();
    if (input.trim() !== '') {
      setTodos([...todos, { text: input, id: Date.now() }]);
      setInput('');
    }
  };

  const editTodo = (id, text) => {
    setTodos(
      todos.map((todo) =>
        todo.id === id ? { ...todo, text } : todo
      )
    );
    setEditing(null);
  };

  const deleteTodo = (id) => {
    setTodos(todos.filter((todo) => todo.id !== id));
  };

  const editInput = (e, id) => {
    setEditing(id);
    setInput(e.target.value);
  };

  return (
    <div>
      <form onSubmit={addTodo}>
        <input value={input} onChange={(e) => setInput(e.target.value)} />
        <button type="submit">Add Todo</button>
      </form>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            {editing === todo.id ? (
              <input
                type="text"
                value={input}
                onChange={(e) => editInput(e, todo.id)}
                onBlur={() => editTodo(todo.id, input)}
              />
            ) : (
              <span>{todo.text}</span>
            )}
            <button onClick={() => deleteTodo(todo.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoApp;

调试与部署

常见的调试方法

在React应用开发中，可以使用以下方法进行调试：

Chrome DevTools：
- 使用Chrome浏览器的开发者工具，可以直接查看和修改应用的状态。
- 在应用中触发断点，逐步调试代码。

Error Boundaries：

React中的Error Boundaries可以捕获组件树中的错误，并防止整个应用崩溃。
使用static getDerivedStateFromError和componentDidCatch方法来处理错误。

import React, { Component } from 'react';

class MyComponent extends Component {
  static getDerivedStateFromError(error) {
    console.error(error);
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    console.error(error, info);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return <ChildComponent />;
  }
}

export default MyComponent;

React DevTools：
- 使用React DevTools插件，可以查看组件树、状态和props。
- 帮助快速定位和解决问题。

如何打包并部署应用

在开发完成后，需要将应用打包并部署到生产环境。以下是在React中打包应用的步骤：

安装构建工具：
- 使用npm install --save-dev webpack或npm install --save-dev webpack-cli安装Webpack。
- 使用npm install --save-dev babel-loader @babel/core @babel/preset-react安装Babel。
配置打包文件：
- 在项目根目录下创建webpack.config.js文件，配置打包规则。
- 在package.json中添加scripts，例如：
```
"scripts": {
  "build": "webpack --mode production"
}
```
打包应用：
- 运行命令npm run build，执行打包任务。
- 打包完成后，生成的文件通常位于build目录下。

使用GitHub Pages或其他平台进行部署

部署应用到GitHub Pages或其他平台的步骤如下：

创建GitHub仓库：
- 在GitHub上创建一个新的仓库，例如my-react-app。
推送代码到GitHub：
- 使用git命令，将本地代码推送到GitHub仓库。
配置GitHub Pages：
- 在GitHub仓库设置中，选择Settings -> Pages。
- 选择Source选项为gh-pages分支，然后保存。
访问部署的应用：
- 部署完成后，GitHub会自动生成一个URL，例如https://username.github.io/my-react-app。

通过以上步骤，可以将React应用部署到GitHub Pages或其他平台，方便用户访问。

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

慕森卡

手记
篇

粉丝

121

获赞与收藏

529

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 31416 348

网络编程入门教程

20个小节 12873 242

Pandas 入门教程

25个小节 18755 351

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空