6 ważnych pojęć JavaScript dla początkujących React
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łkowe umożliwiają tworzenie funkcji o krótszej składni.
Zilustrujmy to na poniższych przykładach:
Regularna funkcja
function greeting() {
return 'hello'
}
console.log(greeting()) //hello
Funkcja strzałki
let greeting = () => 'hello'
console.log(greeting()) //hello
Dwie 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 React from 'react'
const Book = () => {
return (
<div>Book</div>
)
}
export default Book
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 dokumentacji programistów Mozilli .
2. Destrukturyzacja
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:
const student = {
'name': 'Mary',
'address': 'South Park, Bethlehem',
'age': 15
}
Destrukturyzacja:
console.log(student.name) // output Mary
W 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 map() , filter() i reduce() . Musisz znać metody tablicowe, aby wiedzieć, kiedy je zastosować.
Na przykład metoda map() wykonuje iterację po wszystkich elementach tablicy. Działa na każdy element tablicy, tworząc nową tablicę.
const numbers = [9, 16, 25, 36];
const squaredArr = numbers.map(Math.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:
function openingTime(day) {
if (day == SUNDAY) {
return 12;
}
else {
return 9;
}
}
Kod z operatorem trójskładnikowym:
function openingTime(day) {
return day == SUNDAY? 12: 9;
}
Dowiedz się o różnych typach okresów warunkowych, ze szczególnym uwzględnieniem krótkich okresów warunkowych. Są one szeroko stosowane w React.
5. Literały szablonowe
Literały szablonowe 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:
let firstName = "Jane";
let lastName = "Doe";
let text = `Welcome ${firstName}, ${lastName}!`; // Welcome 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.
const names = ['Mary', 'Jane'];
const groupMembers = ['Fred',. ..names, 'Angela']; // ["Fred", "Mary", "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.
Dodaj komentarz