Jak vytvořit obrazovku načítání animované kostry v React Js

V tomto příspěvku se naučíme, jak vytvořit animované obrazovky kostry v komponentě React js a jak použít plugin pro reakci načítání kostry k vytvoření animované kostry načítání v uživatelském rozhraní React.

Vytvoříme jednoduchou aplikaci React, která zobrazí data uživatelů v komponentě karet uživatelského rozhraní Bootstrap. Načteme skutečná a autentická data, která vykreslíme v komponentě React pomocí fetch() API.

Od pokroku v uživatelských rozhraních nyní máme modernější způsoby, jak uživatelům sdělit, že se data nebo obsah načtou za chvíli. Spinery a loadery byly staré způsoby, jak informovat uživatele o datech, která se mají načíst.

V těchto dnech proces načítání podporují obrazovky Skeleton; v této příručce vám ukážeme, jak vytvořit kostru obrazovky v React js a jak použít kostru obrazovky pro zobrazení načítání dat v komponentě reakce.

Příklad obrazovky načítání animované kostry React Js

• Krok 1: Stáhněte si aplikaci React
• Krok 2: Nainstalujte modul Loading Skeleton Module
• Krok 3: Nainstalujte balíček Bootstrap
• Krok 4: Vytvořit soubor součásti
• Krok 5: Implementujte obrazovky načítání skeletu
• Krok 6: Aktualizujte soubor App Js
• Krok 7: Zobrazit aplikaci v prohlížeči

Stáhněte si aplikaci React

Přejděte do terminálu, zadejte na konzole následující příkaz a vyvolejte příkaz k instalaci nástroje create-react-app:

npm install create-react-app --global

Nyní můžete nainstalovat zcela novou aplikaci Reagovat jediným příkazem:

npx create-react-app react-demo

Pomocí příkazu se dostanete do složky aplikace:

cd react-demo

Instalace modulu načítání kostry

Z konzole spusťte následující příkaz a nainstalujte modul reakčního načítání kostry v React.

npm install react-loading-skeleton

Dále musíte přidat danou css cestu do src/App.css soubor:

@import "react-loading-skeleton/dist/skeleton.css";

Nainstalujte balíček Bootstrap

V tomto tutoriálu nebudeme psát CSS od začátku, proto nainstalujte balíček bootstrap pomocí následujícího příkazu.

npm install bootstrap

Vytvořit soubor součásti

Abychom vám ukázali demo týkající se zástupného symbolu načítání kostry, budeme muset vytvořit List.js soubor v komponentách složka.

import React from 'react'
function List() {
  return (
    <div>List</div>
  )
}
export default List

Implementujte obrazovky načítání kostry

Chcete-li integrovat komponentu načítací kostry do komponenty reakce, musíte do components/List.js přidat následující kód soubor:

import React, { useState, useEffect } from 'react'
import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'
function List() {
  const [list, setList] = useState([])
  const fetchData = () => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then((res) => res.json())
      .then((json) => setList(json))
      .catch((e) => console.log(e))
  }
  useEffect(() => {
    setTimeout(() => {
      fetchData()
    }, 5000)
  }, [])
  const showCards = () => {
    return (
      <>
        {list.map((item) => {
          return (
            <div key={item.id} className="col-sm-4 card-group mb-4">
              <div className="card">
                <div className="card-body">{item.name}</div>
              </div>
            </div>
          )
        })}
      </>
    )
  }
  const showSkeleton = () => {
    return (
      <>
        {Array(10)
          .fill()
          .map((item, index) => {
            return (
              <div key={index} className="col-sm-4 card-group mb-4">
                <div className="card">
                  <Skeleton height={60} />
                </div>
              </div>
            )
          })}
      </>
    )
  }
  return (
    <div>
      <h2 className="mb-3">React Js Loading Skeleton Screen Example</h2>
      <div className="row">
        {list.length > 0 ? showCards() : showSkeleton()}
      </div>
    </div>
  )
}
export default List

Aktualizujte soubor Js aplikace

V tomto kroku budete muset zadat App.js soubor, poté importujte a definujte komponentu List pro zobrazení zástupného symbolu pro načítání při načítání uživatelských dat.

import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css'
import List from './components/List'
function App() {
  return (
    <div className="container mt-5">
      <List />
    </div>
  )
}
export default App

Zobrazit aplikaci v prohlížeči

V posledním kroku budete muset použít daný příkaz ke spuštění reakčního serveru.

npm start

Nyní můžete aplikaci vyzkoušet otevřením dané adresy URL:

http://localhost:3000

Závěr

Obrazovky s kostrou zlepšují uživatelský dojem tím, že zobrazují animovaný zástupný symbol ve spojení s procesem načítání dat. V tomto příkladu načítání kostry reakce jsme se naučili, jak zobrazit obrazovku načítání kostry při načítání dat v React js.