React Toastr 项目安装和配置指南-CSDN博客

本文链接：https://blog.csdn.net/gitblog_01259/article/details/143048256

React Toastr 项目安装和配置指南

react-toastr React.js toastr component 项目地址: https://gitcode.com/gh_mirrors/re/react-toastr

1. 项目基础介绍和主要的编程语言

React Toastr 是一个基于 React.js 的轻量级通知组件库，旨在帮助开发者快速实现弹出式通知功能。该项目的主要编程语言是 JavaScript，并且使用了 React 框架来构建用户界面。

2. 项目使用的关键技术和框架

React Toastr 项目主要使用了以下关键技术和框架：

React.js: 用于构建用户界面的 JavaScript 库。
CSS: 用于样式设计和布局。
npm/yarn: 用于包管理和依赖安装。

3. 项目安装和配置的准备工作和详细的安装步骤

准备工作

在开始安装和配置 React Toastr 之前，请确保你已经完成了以下准备工作：

Node.js 和 npm/yarn 安装: 确保你的系统上已经安装了 Node.js 和 npm（或 yarn）。你可以通过以下命令检查是否安装成功：
```
node -v
npm -v
```
如果没有安装，请访问 Node.js 官网下载并安装。
创建 React 项目: 如果你还没有一个 React 项目，可以使用 create-react-app 快速创建一个：
```
npx create-react-app my-app
cd my-app
```

安装步骤

安装 React Toastr: 在你的 React 项目根目录下，使用 npm 或 yarn 安装 React Toastr：
```
npm install react-toastr
```
或者
```
yarn add react-toastr
```

配置 React Toastr: 在你的 React 项目中，找到 src/App.js 文件，并进行以下配置：

import React from 'react';
import { ToastContainer, toast } from 'react-toastr';

function App() {
  const showToast = () => {
    toast.success("这是一个成功的通知", "标题", {
      timeOut: 5000,
      extendedTimeOut: 1000,
      closeButton: true,
    });
  };

  return (
    <div>
      <button onClick={showToast}>显示通知</button>
      <ToastContainer
        toastClassName="toast"
        bodyClassName="toast-body"
        progressClassName="toast-progress"
      />
    </div>
  );
}

export default App;

运行项目: 完成配置后，运行你的 React 项目：
```
npm start
```
或者
```
yarn start
```
测试通知功能: 打开浏览器，访问 http://localhost:3000，点击“显示通知”按钮，你应该会看到一个成功的通知弹出。