Menu

Tech

Polski

Powtórka: stan i zdarzenia

Część sekcji Podstawy ścieżki React w Coddy. Lekcja 27 z 42.

Wyzwanie

Średni

Podsumowanie rozdziału. Zbuduj panel sterowania lampą biurkową: licznik i przełącznik obok siebie w jednym komponencie.

Dodaj dwa niezależne stany: brightness zaczynający się od 0 oraz on zaczynający się od false.
Wyświetl jasność w elemencie span z id="level". Przycisk id="brighter" zwiększa wartość o 1 po każdym kliknięciu.
Przycisk id="power" przełącza wartość on. Gdy jest włączony, wyświetl element <p> z id="status" i tekstem Lamp is on; w przeciwnym razie renderuj null.

Spróbuj swoich sił

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>

Wszystkie lekcje w sekcji Podstawy

1Poznaj React

Czym jest React?Twój pierwszy komponent Zasada jednego rodzica JSX to nie HTML Podsumowanie: poznaj React

4Props

Czym są propsy?Przekazywanie propsów Dwa propsy Ten sam komponent, nowe dane Prop children Podsumowanie: propsy

7Warunki i listy

Renderowanie warunkowe operatorem trójargumentowym Wyświetlanie za pomocą &&Renderowanie listy Klucze mają znaczenie Filtruj, a następnie mapuj Podsumowanie: warunki i listy

2Wyrażenia JSX

Nawiasy klamrowe Działania matematyczne w nawiasach klamrowych Nawiasy klamrowe w atrybutach Wywoływanie funkcji w JSX Podsumowanie: wyrażenia JSX

5Stan i zdarzenia

Czym jest stan?Licznik kliknięć Liczenie krokami Przełączanie za pomocą stanu Niezależny stanPowtórka: stan i zdarzenia

8Projekt: Karta profilu

Krok 1: Struktura karty Krok 2: Karta z props Krok 3: Przycisk „Lubię to”Krok 4: Przełącznik obserwowania

3Komponenty

Elementy składowe Twój drugi komponent Ponowne używanie komponentów Tworzenie strony Podsumowanie: komponenty

6Formularze i pola wejściowe

Kontrolowane pola wejściowe Wyświetlanie wpisanego tekstu Licznik znaków Przycisk czyszczenia Podsumowanie: formularze i pola wejściowe