React を使用して DOM レンダリング中に画面をロードする
-
React を使用して DOM がレンダリングされている間に
this.state関数を使用して画面をロードする -
React を使用して DOM がレンダリングされている間に
useEffectフックを使用して画面をロードする -
React を使用して DOM がレンダリングされている間に
react-loader-spinner依存関係を使用して画面をロードする - まとめ
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
出力：
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;
出力：
 {
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
出力：
App.js ファイル内で設定したように、読み込み画面がライフサイクルに達すると、Clock.js ファイルの内容が表示されます。
まとめ
訪問者を驚かせるものが何もない退屈なウェブサイトを構築することを避けたくないのは誰ですか? 読み込み画面を作成することは、ウェブサイトが読み込まれるまで訪問者が空白の画面を見つめる待ち時間を短縮する 1つの方法です。
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