Jako najpopularniejsza biblioteka frontendowa, każdy chce się uczyć React. ReactJS to zasadniczo JavaScript. Ale to nie znaczy, że musisz nauczyć się wszystkiego w JavaScript, aby przejść do ReactJS. Zrozumienie podstawowych koncepcji JavaScript pomoże ci łatwiej zrozumieć koncepcje Reacta, a ostatecznie przyspieszy twoją zdolność do pracy nad projektami.
Nakreślmy podstawowe pojęcia, które powinieneś znać o JavaScript przed przejściem do ReactJS.
1. Funkcje strzałek
Funkcje strzałek są szeroko stosowane w React. Od wersji 16.8 React przeszedł z komponentów opartych na klasach do komponentów funkcjonalnych. Funkcje strzałek umożliwiają tworzenie funkcji o krótszej składni.
Zilustrujmy to na poniższych przykładach:
Regularna funkcja
funkcjonowaćPowitanie() {
powrót'Witam'
}
konsola.log (powitanie()) //helloFunkcja strzałki
pozwalać powitanie = () =>'Witam'
konsola.log (powitanie()) //helloDwie powyższe funkcje mają takie same dane wyjściowe, chociaż składnia jest inna. Funkcja strzałki wygląda na krótszą i czystszą niż zwykła funkcja. Zwykle komponenty React mają następującą strukturę:
import Reagować z'reagować'konst Książka = () => {
powrót (
Zarezerwuj</div>)
}
eksportdomyślny Książka
Funkcje strzałek nie mają nazw. Jeśli chcesz nadać mu nazwę, przypisz go do zmiennej. Różnica między funkcją zwykłą a funkcją strzałkową to coś więcej niż tylko składnia. Dowiedz się więcej o funkcjach strzałek w Mozilla dokumentacja deweloperska.
2. Destrukcja
Destrukturyzacja służy do uzyskiwania danych ze złożonych struktur danych. W JavaScript tablice i obiekty mogą przechowywać wiele wartości. Możesz manipulować wartościami i używać ich w różnych częściach aplikacji.
Aby uzyskać te wartości, musisz zdestrukturyzować zmienną. W zależności od struktury danych, z którą masz do czynienia, możesz użyć notacji kropkowej (.) lub notacji nawiasowej. Na przykład:
konst uczeń = {'nazwa': „Maryja”,
'adres': „South Park, Betlejem”,
'wiek': 15
}
Destrukturyzacja:
konsola.log (nazwisko.ucznia) // wyjście MaryW powyższym przykładzie notacja z kropką uzyskuje dostęp do wartości klucza „nazwa”. W ReactJS będziesz używać koncepcji destrukturyzacji do uzyskiwania i udostępniania wartości w swojej aplikacji. Destrukturyzacja pomaga uniknąć powtórzeń i zwiększa czytelność kodu.
3. Metody tablicowe
Z tablicami spotkasz się kilka razy podczas pracy nad projektami React. Tablica to zbiór danych. Przechowujesz dane w tablicach, dzięki czemu możesz ich ponownie użyć w razie potrzeby.
Metody tablicowe są używane głównie do manipulowania, pobierania i wyświetlania danych. Niektóre powszechnie używane metody tablicowe to mapa(), filtr(), I zmniejszyć(). Musisz znać się na metody tablicowe zrozumieć, kiedy zastosować każdy z nich.
Na przykład mapa() Metoda iteruje po wszystkich elementach w tablicy. Działa na każdy element tablicy, tworząc nową tablicę.
konst liczby = [9, 16, 25, 36];
konst tablica do kwadratu = liczby. mapa (Matematyka.sqrt) // 3,4,5,6
W ReactJS będziesz często używać metod tablicowych. Będziesz ich używać do konwertowania tablic na łańcuchy, łączenia, dodawania elementów i usuwania elementów z innych tablic.
4. Krótkie okresy warunkowe
Warunki to instrukcje, których JavaScript używa do podejmowania decyzji w kodzie. Krótkie wyrażenia warunkowe obejmują && (i), II (lub) oraz operator trójskładnikowy. Są to krótsze wyrażenia warunków i instrukcje if/else.
Poniższy przykład pokazuje, jak używać operatora trójskładnikowego.
Kod z instrukcją if/else:
funkcjonowaćczas otwarcia(dzień) {
Jeśli (dzień == NIEDZIELA) {
powrót12;
}
w przeciwnym razie {
powrót9;
}
}Kod z operatorem trójskładnikowym:
funkcjonowaćczas otwarcia(dzień) {
powrót dzień == NIEDZIELA? 12: 9;
}Uczyć się o różne typy warunków ze szczególnym uwzględnieniem krótkich okresów warunkowych. Są one szeroko stosowane w React.
5. Literały szablonowe
Literały szablonów używają znaczników wstecznych (``) do zdefiniowania łańcucha. Literały szablonowe umożliwiają manipulowanie danymi łańcuchowymi, czyniąc je bardziej dynamicznymi. Oznaczone literały szablonów umożliwiają wykonywanie operacji w ciągu znaków. Są to krótsze wyrażenia warunków i instrukcje if/else.
Na przykład:
pozwalać imię = „Jane”;pozwalać nazwisko = "Łania";
pozwalać tekst = `Witamy ${imię}, ${nazwisko}!`; // Witamy Jane Doe!
6. Operatory rozprzestrzeniania
Operator Spread (...) kopiuje wartości obiektu lub tablicy do innego. Jego składnia składa się z trzech kropek, po których następuje nazwa zmiennej. Na przykład (...imię). Łączy właściwości dwóch tablic lub obiektów.
Poniższy przykład pokazuje, jak używać operatora spread do kopiowania wartości jednej zmiennej do innej.
konst imiona = [„Maryja”, „Jane”];
konst Członkowie grupy = [„Fred”, ...nazwy, „Angela”]; // ["Fred", "Maria", "Jane", "Angela"]
Możesz użyć operatora spread, aby wykonać wiele operacji. Obejmują one kopiowanie zawartości tablicy, wstawianie tablicy do innej, uzyskiwanie dostępu do tablic zagnieżdżonych i przekazywanie tablic jako argumentów. Możesz użyć operatora spread w ReactJS do obsługi zmian stanu w komponentach.
Dlaczego warto uczyć się ReactJS?
ReactJS jest popularny nie bez powodu. Ma krótką krzywą uczenia się, jest niezawodny i szybko renderuje się w DOM. Obsługuje samodzielne komponenty i ma świetne narzędzia do debugowania.
ReactJS zawiera nowe koncepcje JavaScript z ECMAScript 6 (ES6). Poznanie podstawowych pojęć w JavaScript ułatwi tworzenie projektów w ReactJS.
Co więcej, ReactJS ma świetną społeczność, która stale publikuje nowe aktualizacje. Jeśli chcesz nauczyć się biblioteki JavaScript, ReactJS byłby świetnym wyborem. Framework Next.js uzupełnia ograniczenia ReactJS. Połączenie tych dwóch sprawia, że ReactJS jest potężną biblioteką front-end.
