React je jednou z nejoblíbenějších knihoven JavaScriptu pro vývoj uživatelských rozhraní. Jednou z hlavních součástí interakce uživatele s rozhraním je schopnost hodnotit obsah pomocí lajků. V tomto článku se podíváme na podrobný návod, jak získat a zobrazit lajky v React.
Krok 1. Vytvoření komponenty. Než začneme přijímat a zobrazovat lajky, musíme vytvořit komponentu, kde bude umístěna funkce pro práci s lajky. Pomocí příkazu můžeme vytvořit novou komponentu create-react-app nebo ručně vytvořit nový soubor s příponou .js a importovat knihovnu React.
Krok 2. Inicializace lajků. Pro začátek musíme inicializovat stav lajků v naší složce. Můžeme použít Hook useState z knihovny React vytvořit proměnnou, která bude obsahovat počet lajků. Pak můžeme vyvolat tento hák a inicializovat stav na nulu nebo jinou výchozí hodnotu.
Instalace React
Chcete-li začít s React, musíte provést několik kroků:
Krok 1: Nainstalujte Node.js
React vyžaduje Node.js a jeho správce balíku npm. Navštivte oficiální web Node.js a stáhněte si instalační program pro váš operační systém. Postupujte podle pokynů k instalaci.
Krok 2: Vytvořte novou aplikaci React
Otevřete příkazový řádek nebo terminál a přejděte do adresáře, kde chcete vytvořit novou aplikaci. Zadejte následující příkaz:
npx create-react-app my-app
Nahraďte" my-app " jménem vaší aplikace. Příkaz vytvoří novou aplikaci React v uvedeném adresáři a nainstaluje všechny požadované závislosti.
Krok 3: Přejděte do adresáře aplikace
Po dokončení příkazu k vytvoření aplikace přejděte do adresáře aplikace pomocí následujícího příkazu:
Krok 4: Spusťte aplikaci
Chcete-li aplikaci Spustit, zadejte následující příkaz:
Tím se spustí vývojový server a automaticky se otevře vaše aplikace v prohlížeči.
Gratuluji! Nyní máte nainstalovaný React a jste připraveni začít s vývojem.
Vytvoření komponenty pro zobrazení lajků
Chcete-li zobrazit počet lajků na stránce, vytvoříme samostatnou složku v React.
Nejprve vytvoříme nový soubor s názvem LikesCounter.js a definujeme v něm naši součást.
import React from 'react';
class LikesCounter extends React.Component