Ćwicz swoje umiejętności React, korzystając z tej klasycznej, łatwej do zrozumienia przykładowej aplikacji.

Nauka nowej technologii, takiej jak React, może być myląca bez praktycznego doświadczenia. Dla deweloperów budowanie rzeczywistych projektów jest jednym z najskuteczniejszych sposobów zrozumienia koncepcji i funkcji.

Postępuj zgodnie z procesem tworzenia prostej listy rzeczy do zrobienia w React i popraw swoje zrozumienie podstaw React.

Warunki wstępne tworzenia listy rzeczy do zrobienia

Przed rozpoczęciem tego projektu należy spełnić kilka wymagań. Musisz mieć podstawową wiedzę na temat HTML, CSS, JavaScript, ES6i Reaguj. Musisz mieć Node.js i npm, menedżer pakietów JavaScript. Potrzebujesz także edytora kodu, takiego jak Visual Studio Code.

Oto CSS, którego użyje ten projekt:

/* style.css */
.Aplikacja {
rodzina czcionek: bezszeryfowe;
wyświetlacz: przewód;
uzasadnij treść: Centrum;
wyrównaj elementy: Centrum;
wysokość: 100vh;
}
.Do zrobienia {
kolor tła: pszenica;
wyrównanie tekstu: Centrum;

szerokość: 50%;
wyściółka: 20piks;
pudełko-cień: rgba(0, 0, 0, 0.24) 0piks 3piks 8piks;
margines: automatyczny;
}


ul {
typ-styl-listy: nic;
wyściółka: 10piks;
margines: 0;
}


przycisk {
szerokość: 70piks;
wysokość: 35piks;
kolor tła: piaskowobrązowy;
granica: nic;
rozmiar czcionki: 15piks;
grubość czcionki: 800;
promień granicy: 4piks;
pudełko-cień: rgba(0, 0, 0, 0.24) 0piks 3piks 8piks;
}


.wejście {
granica: nic;
szerokość: 340piks;
wysokość: 35piks;
promień granicy: 9piks;
wyrównanie tekstu: Centrum;
pudełko-cień: rgba(0, 0, 0, 0.24) 0piks 3piks 8piks;
}


.Szczyt {
wyświetlacz: przewód;
uzasadnij treść: Centrum;
luka: 12piks;
}


li {
wyświetlacz: przewód;
uzasadnij treść: równomiernie;
wyrównaj elementy: Centrum;
wyściółka: 10piks;
}
li:zanim {
treść: "*";
prawy margines: 5piks;
}

1. Skonfiguruj środowisko projektu

Ten etap obejmuje wszystkie polecenia i pliki potrzebne do skonfigurowania projektu. Aby rozpocząć, utwórz nowy projekt React. Otwórz terminal i uruchom to polecenie:

npx utwórz-reaguj-listę rzeczy do zrobienia w aplikacji

Instalacja wszystkich potrzebnych plików i pakietów zajmuje kilka minut. Tworzy nową aplikację React o nazwie lista rzeczy do zrobienia. Gdy zobaczysz coś takiego, jesteś na dobrej drodze:

Przejdź do katalogu nowo utworzonego projektu za pomocą tego polecenia:

cd lista rzeczy do zrobienia

Uruchom projekt lokalnie za pomocą tego polecenia:

np start

A następnie obejrzyj projekt w przeglądarce pod adresem http://localhost: 3000/.

W folderze src twojego projektu znajduje się kilka plików, których nie potrzebujesz. Usuń te pliki: Aplikacja.css, Aplikacja.test.js, logo.svg, raportWebVitals.js, setupTests.js.

Upewnij się, że poszukałeś instrukcji importu w dostępnych plikach i usuń wszelkie odniesienia do usuniętych plików.

2. Utwórz komponent TodoList

To jest komponent, w którym zaimplementujemy wszystkie kody potrzebne do listy rzeczy do zrobienia. Utwórz plik o nazwie „TodoList.js” w swoim folderze src. Następnie, aby sprawdzić, czy wszystko działa tak, jak powinno, dodaj następujący kod:

import Reagować z'reagować';
konst Lista rzeczy do zrobienia = () => {
powrót (




Witaj świecie </h2>
 </div>
 );
};


eksportdomyślny Lista rzeczy do zrobienia;

Otwórz plik App.js, zaimportuj komponent TodoList i wyrenderuj go w komponencie App. Będzie wyglądać mniej więcej tak:

import Reagować z'reagować';
import'./style.css'
import Lista rzeczy do zrobienia z'./Lista rzeczy do zrobienia';
konst Aplikacja = () => {
powrót (





 </div>
 );
};
eksportdomyślny Aplikacja;

Przejdź do lokalnej przeglądarki z uruchomionym hostem localhost: 3000 i sprawdź, czy odważnie napisano „Hello World”. Wszystko dobrze? Do następnego kroku.

3. Obsługa danych wejściowych i zmian danych wejściowych

Ten krok umożliwia wyzwolenie zdarzenia po wpisaniu zadania w polu wprowadzania. Zaimportuj hak useState ze swojego pakietu React. useState to hak React, który pozwala efektywnie zarządzać stanem.

import Reaguj, { stan użycia } z'reagować';

Użyj haka useState, aby utworzyć zmienną stanu o nazwie „inputTask” z początkową wartością pustego łańcucha. Ponadto przypisz funkcję „setInputTask”, aby zaktualizować wartość „inputTask” na podstawie danych wprowadzonych przez użytkownika.

konst [InputTask, setInputTask] = useState("");

Utwórz funkcję o nazwie „handleInputChange”, przyjmując parametr zdarzenia. Powinien zaktualizować stan inputTask za pomocą funkcji setInputTask. Uzyskaj dostęp do wartości celu zdarzenia za pomocą event.target.value. Będzie to działać za każdym razem, gdy zmieni się wartość pola wejściowego.

konst handleInputChange = (wydarzenie) => {
 setInputTask (event.target.value);
};

Zwróć kilka elementów JSX. Pierwszy to nagłówek, który brzmi „Moja lista rzeczy do zrobienia”, możesz wybrać dowolny nagłówek. Dołącz kilka atrybutów do elementów wejściowych. typ = „tekst”: Określa typ wprowadzania jako tekst, wartość={zadanie wejściowe}: Wiąże wartość pola wejściowego ze zmienną stanu inputTask, zapewniając, że odzwierciedla ona bieżącą wartość.onChange={handleInputChange}: Wywołuje funkcję handleInputChange, gdy zmienia się wartość pola wejściowego, aktualizując stan inputTask.

"Do zrobienia">
Moja lista rzeczy do zrobienia</h1>
"Szczyt">
"wejście" typ="tekst" wartość={zadanie wejściowe}
 onChange={handleInputChange} symbol zastępczy=„Wprowadź zadanie” />

Idąc dalej, utwórz przycisk, który doda wprowadzone zadanie do listy.

Na tym etapie tak będą wyglądać wyniki Twojej przeglądarki.

4. Dodaj funkcjonalność do przycisku „DODAJ”.

Użyj stan użycia hook, aby utworzyć zmienną stanu o nazwie „list” z początkową wartością pustej tablicy. Zmienna „setList” przechowuje tablicę zadań na podstawie danych wprowadzonych przez użytkownika.

konst [lista, setList] = useState([]);

Utwórz funkcję handleAddTodo, która będzie uruchamiana, gdy użytkownik kliknie przycisk „DODAJ”, aby dodać nowe zadanie. Przyjmuje parametr todo, który reprezentuje nowe zadanie wprowadzone przez użytkownika. Następnie utwórz obiekt newTask z unikalnym identyfikatorem wygenerowanym za pomocą Math.random() i właściwością todo, która zawiera tekst wejściowy.

Idąc dalej, zaktualizuj stan listy, używając operatora rozkładania […list], aby utworzyć nową tablicę z istniejącymi zadaniami na liście. Dołącz newTask na końcu tablicy. Gwarantuje to, że nie zmutujemy oryginalnej tablicy stanów. Na koniec zresetuj stan inputTask do pustego ciągu, czyszcząc pole wejściowe, gdy użytkownik kliknie przycisk.

konst handleAddTodo = (do zrobienia) => {
konst nowe zadanie = {
 ID: Matematyka.losowy(),
 do zrobienia: do zrobienia
 };
 setList([...lista, noweZadanie]);
 setInputTask('');
};

Zawierać na kliknięcie atrybut do elementu przycisku z tekstem „ADD”. Po kliknięciu uruchamia uchwytAddTodo funkcja, która dodaje nowe zadanie do stanu listy

Na tym etapie dane wyjściowe przeglądarki będą wyglądać tak samo, ale jeśli klikniesz przycisk „DODAJ” po wprowadzeniu zadania, pole wprowadzania będzie puste. Jeśli to działa dobrze, przejdź do następnego kroku.

5. Dodaj przycisk Usuń

Jest to ostatni krok umożliwiający użytkownikom usunięcie zadania, jeśli popełnili błąd lub wykonali zadanie. Utwórz funkcję handleDeleteTodo, która działa jako moduł obsługi zdarzeń, gdy użytkownik kliknie przycisk „Usuń” dla określonego zadania. Przyjmuje identyfikator zadania jako parametr.

Wewnątrz funkcji użyj metody filter na tablicy list, aby utworzyć nową tablicę newList, która wyklucza zadanie o pasującym identyfikatorze. Metoda filter przechodzi przez każdy element w tablicy list i zwraca nową tablicę zawierającą tylko te elementy, które spełniają podany warunek. W takim przypadku sprawdź, czy identyfikator każdego zadania jest równy identyfikatorowi przekazanemu jako parametr. Zaktualizuj stan listy, wywołując funkcję setList (newList), która ustawia stan na nową przefiltrowaną tablicę, skutecznie usuwając zadanie o pasującym identyfikatorze z listy.

konst handleDeleteTodo = (ID) => {
konst nowaLista = lista.filtr((do zrobienia) =>
 todo.id !== id
 );
 setList (nowaLista); 
};

Użyj metody map, aby przejrzeć każdy element w tablicy list i zwrócić nową tablicę. Następnie utwórz plik

  • element reprezentujący zadanie dla każdego obiektu todo w tablicy list. Pamiętaj, aby dodać atrybut key podczas renderowania listy elementów w React. Pomaga React jednoznacznie identyfikować każdy element listy i wydajnie aktualizować interfejs użytkownika, gdy się zmienia. W takim przypadku ustaw klucz na identyfikator każdego obiektu todo, aby zapewnić jego niepowtarzalność.

    • Uzyskaj dostęp do właściwości todo każdego obiektu todo. na koniec utwórz przycisk, który po kliknięciu uruchamia funkcję handleDeleteTodo z identyfikatorem odpowiedniego zadania jako parametrem, co pozwala nam usunąć zadanie z listy.

    <ul>
    { lista. mapa ((do zrobienia) => (
    <liNazwa klasy="zadanie"klucz={todo.id}>
     {todo.todo}
    <przyciskna kliknięcie={() => handleDeleteTodo (todo.id)}> Usuńprzycisk>
    li>
    ))}
    ul>

    Tak powinien wyglądać Twój końcowy kod:

    import Reaguj, { stan użycia } z'reagować';
    konst Lista rzeczy do zrobienia = () => {
    konst [InputTask, setInputTask] = useState('');
    konst [lista, setList] = useState([]);
    

    konst handleAddTodo = () => {
    konst nowe zadanie = {
     ID: Matematyka.losowy(),
     todo: inputTask
     };
    

     Setlista([...lista, nowe zadanie]);
     setInputTask('');
     };
    

    konst handleDeleteTodo = (ID) => {
    konst nowaLista = lista.filtr((do zrobienia) => todo.id !== id);
     setList (nowaLista);
     };
    

    konst handleInputChange = (wydarzenie) => {
    ustaw zadanie wejściowe(wydarzenie.cel.wartość);
     };
    

    powrót (
    <dzNazwa klasy="Do zrobienia">
    

    mój do-DoLista

    

    <dzNazwa klasy="Szczyt">
    <wejścieNazwa klasy="wejście"typ="tekst"wartość={inputTask}
     onChange={handleInputChange} symbol zastępczy=„Wprowadź zadanie” />
    

    <przyciskNazwa klasy="btn"na kliknięcie={handleAddTodo}>DODAĆprzycisk>
    dz>
    

    <ul>
     { lista. mapa ((do zrobienia) => (
    <liNazwa klasy="zadanie"klucz={todo.id}>
     {todo.todo}
    <przyciskna kliknięcie={() => handleDeleteTodo (todo.id)}>
    Usuwać
    przycisk>
    li>
     ))}
    ul>
    dz>
     );
    };
    eksportdomyślny Lista rzeczy do zrobienia;

    Oto jak będzie wyglądało końcowe wyjście, z przyciskami dodawania i usuwania działającymi zgodnie z oczekiwaniami.

    Gratulacje, utworzyłeś listę rzeczy do zrobienia, która dodaje i usuwa zadania. Możesz pójść dalej, dodając stylizację i więcej funkcjonalności.

    Korzystaj z rzeczywistych projektów, aby nauczyć się reagować

    Praktyka może być skutecznym sposobem uczenia się. Pozwala zastosować koncepcje Reacta i najlepsze praktyki w praktyczny sposób, wzmacniając zrozumienie frameworka. Istnieje mnóstwo projektów, powinieneś znaleźć te właściwe.