Bildschirm laden, während DOM mit React rendert
-
Verwenden Sie die Funktion
this.state, um den Bildschirm zu laden, während DOM mit React rendert -
Verwenden Sie den
useEffect-Hook, um den Bildschirm zu laden, während DOM mit React rendert -
Verwenden Sie die Abhängigkeit
react-loader-spinner, um den Bildschirm zu laden, während DOM mit React rendert - Abschluss
Bei der Webentwicklung geht es nicht nur darum, Apps zu erstellen, die schnell und ohne Fehler geladen werden, sondern auch darum, sie schön, attraktiv und ansprechend für das Auge zu machen, und man kann nicht sagen, dass die leere Seite, die uns begrüßt, wenn wir eine App in React starten, angenehm ist zum Auge.
Wir können etwas gegen diese leere Seite tun, indem wir Effekte erstellen, die angezeigt werden, kurz bevor das React-DOM den Hauptinhalt der Seite rendert, und es gibt verschiedene Möglichkeiten, dies zu tun.
Verwenden Sie die Funktion this.state, um den Bildschirm zu laden, während DOM mit React rendert
Dieses Beispiel bietet einen viel einfacheren Ansatz, indem es die Ladezeit der Anwendung nutzt. In die Datei App.js unseres Ordners Projekt geben wir diese Codes ein:
Code-Snippet – 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
Ausgang:
Wir verwenden die fetch()-API, um den Namen einer Filmfigur abzurufen, d. h. den Hauptinhalt, der auf der Seite angezeigt wird. Wir verwenden die Funktion this.state, um React mitzuteilen, dass, während der Seiteninhalt noch abgerufen wird, stattdessen Seite wird geladen... angezeigt wird und nach einigen Sekunden der Hauptinhalt Luke Skywalker erscheint.
Verwenden Sie den useEffect-Hook, um den Bildschirm zu laden, während DOM mit React rendert
React useEffect ist ein netter Ansatz, um Inhalte anzuzeigen und Animationen auf dem Bildschirm zu bewegen, und wir werden diesen Ansatz verwenden, um einen Vorladebildschirm zu erstellen.
Zuerst greifen wir auf die Datei index.html im Ordner public unseres Ordners project zu und erstellen dort den Ladebildschirmeffekt. Unser Bild hat einen Link, den wir verwenden und dann Stylings erstellen werden.
Siehe Code unten.
Code-Snippet – 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>
Dann wenden wir in der App.js den useEffect an, um die Ladeeffekte zu steuern, mit der CSS-Unterstützung in der index.html.
Code-Snippet – 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;
Ausgang:
Verwenden Sie die Abhängigkeit react-loader-spinner, um den Bildschirm zu laden, während DOM mit React rendert
Die React Loader-Abhängigkeit ist ein geeignetes Beispiel für die Erstellung schöner Vorladebildschirme in React. Es bietet eine breite Palette von Ladeeffekten, die Website-Besucher lieben werden, bevor sie eine Website betreten.
Innerhalb des von uns erstellten Ordners Projekt installieren wir die Abhängigkeit mit:
npm install react-loader-spinner
Erstellen Sie dann einen Ordner namens components und zwei Dateien Loading.js und Clock.js. Loading.js enthält Codes für den Ladebildschirmeffekt und Clock.js zeigt den Inhalt der Hauptseite an.
Dann gehen wir in die Datei App.js, um Dinge einzustellen:
Code-Snippet – 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;
Wir verwenden den useState-Hook, um den Zustand der Loading-Komponente zu steuern, und dann teilen wir React mit useEffect mit, wie lange der Ladebildschirm verweilen soll, bevor die Hauptseite aus dem DOM gerendert wird.
Dann importieren wir in der Datei Loading.js, in der wir den Ladebildschirm einstellen möchten, die Art von Effekt, die wir wollen, aus der Loader-Spinner-Abhängigkeit und der CSS-Einstellung für die Abhängigkeit. Wir kopieren dann die Einstellungen für diesen bestimmten Effekt von dieser Seite und fügen sie ein:
https://www.npmjs.com/package/react-loader-spinner
Dies sollte wie der folgende Code aussehen.
Code-Snippet – 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
Schließlich setzen wir den Hauptinhalt der Seite innerhalb der Clock.js wie folgt:
Codeschnipsel-Clock.js:
import React from 'react'
const Clock = () => {
return (
<div align='center'>
<h1>CLOCK</h1>
</div>
)
}
export default Clock
Ausgang:
Wie wir in der Datei App.js festgelegt haben, wird der Inhalt der Datei Clock.js angezeigt, sobald der Ladebildschirm seinen Lebenszyklus erreicht hat.
Abschluss
Wer möchte es nicht vermeiden, eine langweilige Website zu bauen, die die Besucher nicht begeistert? Das Erstellen eines Ladebildschirms ist eine Möglichkeit, die Wartezeit zu verkürzen, in der Besucher auf leere Bildschirme starren, bis die Website geladen wird.
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