React を使用して DOM レンダリング中に画面をロードする

Oluwafisayo Oluwatayo 2023年6月21日 React React DOM
  1. React を使用して DOM がレンダリングされている間に this.state 関数を使用して画面をロードする
  2. React を使用して DOM がレンダリングされている間に useEffect フックを使用して画面をロードする
  3. React を使用して DOM がレンダリングされている間に react-loader-spinner 依存関係を使用して画面をロードする
  4. まとめ
React を使用して DOM レンダリング中に画面をロードする

Web 開発は、読み込みが速くバグのないアプリを構築するだけではなく、アプリを美しく、魅力的で、見栄えのするものにすることでもあります。React でアプリを起動したときに表示される空白のページが楽しいとは言えません。 目に。

React DOM がページのメイン コンテンツをレンダリングする直前に表示される効果を作成することで、この空白のページを何とかすることができます。これにはさまざまな方法があります。

React を使用して DOM がレンダリングされている間に this.state 関数を使用して画面をロードする

この例では、アプリケーションの読み込み時間を利用することで、より簡単なアプローチを提供しています。 project フォルダーの App.js ファイル内に、次のコードを入力します。

コード スニペット - App.js:

import React, {Component} from "react"

class App extends Component {
    constructor() {
        super()
        this.state = {
            loading: false,
            character: {}
        }
    }

    componentDidMount() {
        this.setState({loading: true})
        fetch("https://swapi.dev/api/people/1/")
            .then(response => response.json())
            .then(data => {
                this.setState({
                    loading: false,
                    character: data
                })
            })
    }

    render() {
        const text = this.state.loading ? " page is loading..." : this.state.character.name
        return (
            <div>
                <p>{text}</p>
            </div>
        )
    }
}

export default App

出力：

this.state 関数を使用して、React 出力を使用して画面をロードします

fetch() API を使用して、映画のキャラクターの名前、つまりページに表示されるメイン コンテンツをフェッチします。 this.state 関数を使用して、React に、ページ コンテンツがまだフェッチされている間、代わりに page is loading... を表示し、数秒後にメイン コンテンツである Luke Skywalker が表示されるように指示します。

React を使用して DOM がレンダリングされている間に useEffect フックを使用して画面をロードする

React useEffect は、コンテンツを表示し、画面上でアニメーションを動かすための優れたアプローチです。このアプローチを使用して、プリロード画面を作成します。

まず、project フォルダーの public フォルダー内にある index.html ファイルにアクセスし、そこにロード画面効果を作成します。 画像にはリンクがあり、それを利用してスタイリングを作成します。

以下のコードを参照してください。

コード スニペット - index.html:

<!DOCTYPE html>
<html lang="en">

<head>
  <title>React App</title>
  <style>
    .preloader {
      display: flex;
      justify-content: center;
    }

    .rotate {
      animation: rotation 9s infinite linear;
    }

    .loader-hide {
      display: none;
    }

    @keyframes rotation {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(359deg);
      }
    }
  </style>
</head>

<body>
  <div class="preloader">
    <img src="https://previews.123rf.com/images/nolimit46/nolimit462006/nolimit46200600489/148500740-modern-glowing-preloader-and-progress-loading-circle-bar-3d-render-background.jpg" class="rotate" width="100" height="100" />
  </div>
  <div id="root"></div>
</body>

</html>

次に、App.js で、useEffect を適用してローディング効果を制御し、index.html 内の CSS のサポートを使用します。

コード スニペット - App.js:

import React, { useEffect } from "react";

import "./App.css";

const loader = document.querySelector(".preloader");

const showLoader = () => loader.classList.remove("preloader");
const addClass = () => loader.classList.add("loader-hide");

const App = () => {
  useEffect(() => {
    showLoader();
    addClass();
  }, []);
  return (
    <div style={{ display: "flex", justifyContent: "center" }}>
      <h2>App react</h2>
    </div>
  );
};

export default App;

出力：

![react 出力を使用して useEffect フックを使用して画面を読み込む](</img/React/react output.gif> を使用して useeffect フックを使用して画面を読み込む

React を使用して DOM がレンダリングされている間に react-loader-spinner 依存関係を使用して画面をロードする

React Loader の依存関係は、react で美しいプリロード画面を作成するための適切な例です。 Web サイト訪問者が Web サイトに入る前に気に入る、幅広い読み込み効果を提供します。

作成した project フォルダー内に、以下を使用して依存関係をインストールします。

npm install react-loader-spinner

次に、components という名前のフォルダーと、Loading.js と Clock.js の 2つのファイルを作成します。 Loading.js にはロード画面効果のコードが含まれ、Clock.js はメイン ページのコンテンツを表示します。

次に、App.js ファイルに移動して設定を行います。

コード スニペット - App.js:

import React, {useState, useEffect} from 'react';
import Loading from './components/Loading';
import Clock from './components/Clock';

function App() {
  const [isLoading, setIsLoading] = useState(true);
  useEffect(() => {
    setTimeout(() => {
      setIsLoading(false);
    }, 2500);
  })
  return (
    <div>
      {isLoading===true?
        <Loading/>:
        <Clock/>
      }
    </div>
  );
}

export default App;

useState フックを使用して Loading コンポーネントの状態を制御し、useEffect を使用して、メイン ページが DOM からレンダリングされる前にロード画面をどれだけ長く保持するかを React に伝えます。

次に、ロード画面を設定する Loading.js ファイルで、ローダー スピナーの依存関係と依存関係の CSS 設定から必要な種類の効果をインポートします。 次に、このサイトからその特定の効果の設定をコピーして貼り付けます。

https://www.npmjs.com/package/react-loader-spinner

これは次のコードのようになります。

コード スニペット - Loading.js:

import React from 'react'
import "react-loader-spinner/dist/loader/css/react-spinner-loader.css"
import { Puff } from 'react-loader-spinner'

const Loading = () => {
    return (
        <div align="center">
            <Puff
                height="100"
                width="100"
                color='grey'
                ariaLabel='loading'
            />
        </div>
    )
}

export default Loading

最後に、Clock.js 内のページのメイン コンテンツを次のように設定します。

コード スニペット - Clock.js:

import React from 'react'

const Clock = () => {
    return (
        <div align='center'>
            <h1>CLOCK</h1>
        </div>
    )
}

export default Clock

出力：

React Output を使用して、react-loader-spinner を使用して画面をロードする

App.js ファイル内で設定したように、読み込み画面がライフサイクルに達すると、Clock.js ファイルの内容が表示されます。

まとめ

訪問者を驚かせるものが何もない退屈なウェブサイトを構築することを避けたくないのは誰ですか? 読み込み画面を作成することは、ウェブサイトが読み込まれるまで訪問者が空白の画面を見つめる待ち時間を短縮する 1つの方法です。

チュートリアルを楽しんでいますか？ <a href="https://www.youtube.com/@delftstack/?sub_confirmation=1" style="color: #a94442; font-weight: bold; text-decoration: underline;">DelftStackをチャンネル登録</a> して、高品質な動画ガイドをさらに制作するためのサポートをお願いします。 Subscribe
著者： Oluwafisayo Oluwatayo
Oluwafisayo Oluwatayo avatar Oluwafisayo Oluwatayo avatar

Fisayo is a tech expert and enthusiast who loves to solve problems, seek new challenges and aim to spread the knowledge of what she has learned across the globe.

LinkedIn

関連記事 - React DOM