如何在 ReactJS 中创建加载屏幕？

在本文中，我们将学习如何在 ReactJs 中创建加载屏幕。加载屏幕是计算机程序（通常是视频游戏）在程序加载或初始化时显示的图片。

React 是一个免费的开源前端 JavaScript 库，用于构建用户界面或 UI 组件。它由 Facebook 和一个由个人开发者和公司组成的社区维护。

方法：为了创建我们的加载屏幕，我们将使用 react-loading 包，因为它功能强大、轻量级且完全可定制。之后，我们将使用已安装的包在我们的主页上添加不同类型的加载屏幕。

创建 ReactJS 应用程序：您可以使用以下命令创建一个新的 ReactJs 项目：

npx create-react-app gfg

安装所需的包：现在我们将使用以下命令安装 react-loading 包：

npm i react-loading

项目结构：它看起来像这样。

添加加载屏幕：在这个例子中，我们将使用我们安装的包在我们的应用程序的主页上添加 react-loading。为此，在App.js文件中添加以下内容。

Javascript

import React from "react";
import ReactLoading from "react-loading";
  
export default function Loading() {
  return (
    

      
Loading in ReactJs - GeeksforGeeks
      
      
      
      
      
      
      
      
    
  );
}

说明：在上面的例子中，我们首先从 react-loading 包中导入 ReactLoading 组件。之后，我们使用我们的 ReactLoading 组件来添加不同类型的加载屏幕。我们可以设置加载屏幕的类型、颜色、高度和宽度。

运行应用程序的步骤：在终端中运行以下命令来运行应用程序。

npm start

输出：