React jest jednym z najpopularniejszych bibliotek w ostatnich latach. Postanowiłem stworzyć kurs na podstawie najnowszego Reacta. Zapraszam do pierwszej części, w której omawiam najważniejsze koncepcje Reacta.
Spis treści
Wstęp do nowego Kursu React 18
Minęło trochę czasu, odkąd powstał pierwszy Kurs React. Kurs powstał, bazując na wersji React 16, gdzie królowały komponenty klasowe. Wraz z nowymi wersjami React zaczęto używać wyłącznie komponentów funkcyjnych oraz hooków. Bardzo rzadko zdarza się, że jest potrzeba użycia komponentów klasowych. W związku z tym postanowiłem stworzyć nowy kurs na podstawie najnowszej wersji 18. Nadal część wiedzy z poprzedniego kursu jest aktualna, więc można z niej korzystać. Będzie przydatna dla starszych projektów. Zaczynajmy!
Oficjalna dokumentacja React.dev
Zanim zaczniemy, chcę zwrócić uwagę na fakt, że React.dev posiada dobrą dokumentację oraz wprowadzenie wraz z tutorialem. Moim zdaniem to jest bardzo dobre wprowadzanie, więc zachęcam również do skorzystania z oficjalnego samouczka. Ten kurs będzie miał trochę inną formę, więc to nie będzie kopia. Kurs będzie bazować na oficjalnej dokumentacji oraz na moich doświadczeniach jako programista frontend.
Czym jest React?
React to biblioteka JavaScript do tworzenia interfejsów graficznych dla przeglądarek oraz urządzeń natywnych (np. tworzenie aplikacji na telefon). Dzięki tej bibliotece w łatwy sposób stworzysz interaktywną aplikację internetową lub aplikację na urządzenie mobilne. Tworzenie takiej aplikacji w czystym JavaScript byłaby znacznie bardziej skomplikowana. React dostarcza wiele mechanizmów, dzięki którym dynamiczne zmiany czy interaktywne aplikacji są szybkie oraz przyjazne dla programistów co skutkuję większą szybkością ich powstawania.
Podstawowe koncepcje w React
Czym jest JSX?
JSX to rozszerzenie do ECMAScript podobne do XML-a. Powstał do tworzenia kodu HTML wewnątrz JavaScriptu. Poniżej przykład kodu JSX z oficjalnej dokumentacji JSX.
var dropdown =
<Dropdown>
A dropdown list
<Menu>
<MenuItem>Do Something</MenuItem>
<MenuItem>Do Something Fun!</MenuItem>
<MenuItem>Do Something Else</MenuItem>
</Menu>
</Dropdown>;
render(dropdown);Wiele osób kojarzy JSX wyłącznie z React, ale to nie jest integralna część Reacta tylko osobny byt, niezależny od niego. To jest rozszerzenie, które zostało dodane do React. Oznacza to, że składnie JSX można użyć w projekcie całkowicie niezwiązanym z tą biblioteką.
Komponenty
Czym jest komponent?
Komponent to funkcja, która zwraca kod HTML wykorzystując możliwości JSX. Komponent to część interfejsu użytkownika np. przycisk czy nagłówek strony. Komponenty komponujemy w większe, w taki sposób budujemy aplikacje. Komponenty mogą zawierać logikę, która pobierana dane, modyfikuje je czy wyświetla interfejs warunkowo na podstawie zmiennej.
Przykład prostego funkcyjnego komponentu w React.
function MyCustomButton() {
return (
<button>Button Text</button>
);
}W React mamy dwa sposoby na tworzenie komponentów:
- za pomocą funkcji
- za pomocą class
W tym kursie będziemy używać tylko i wyłącznie komponentów funkcyjnych, ponieważ to oficjalny polecany sposób na ich tworzenie. Jeśli chcesz dowiedzieć się więcej na temat komponentów klasowych, zobacz artykuł na ich temat w poprzednim kursie.
Zagnieżdżanie komponentów
Komponenty można zagnieżdżać co oznacza, że stworzony komponent może być użyty wewnątrz innego. Pozwala to na podzielenie aplikacji na mniejsze elementy oraz komponowanie z nich bardziej kompleksowych komponentów.
function MyCustomButton() {
return (
<button>Button Text</button>
);
}
function Page() {
return (
<MyCustomButton />
)
}Nie tworzymy komponentów wewnątrz innych
Podczas tworzenia komponentów ważne jest, aby każdy komponent był tworzony osobno. Nie zaleca się tworzenia komponentów wewnątrz innych, ponieważ jest to nieefektywne ze względu na wydajność.
❌ Źle
function Page() {
function MyCustomButton() {
return (
<button>Button Text</button>
);
}
return (
<MyCustomButton />
)
}✅ Dobrze
function MyCustomButton() {
return (
<button>Button Text</button>
);
}
function Page() {
return (
<MyCustomButton />
)
}Importowanie i eksportowanie
Komponenty tak samo, jak każdą inną funkcję czy zmienną można eksportować, a następnie importować w innym miejscu. Zaleca się tworzenie każdego komponentu w osobnym pliku.
import { MyCustomButton } from './Button';
function Page() {
return (
<MyCustomButton />
)
}export function MyCustomButton() {
return (
<button>Button Text</button>
);
}Stan komponentu
Do niektórych operacji będziemy potrzebować, zapisać dane. Do zapisania danych w pamięci potrzebujemy użyć hooka dostarczonego przez React o nazwie useState. Musimy skorzystać z tej funkcjonalności, ponieważ wykonanie tego w JavaScript np. poprzez utworzenie zmiennej, a następnie aktualizację wartości nie podmieni jej w interfejsie użytkownika. Dzieje się tak, ponieważ tak działa React. React aktualizuje dane w kilku sytuacjach i jest nim między innymi aktualizacja danych w useState.
export function MyCustomButton() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(prev => prev + 1)}>Clicked {count}</button>
);
}Powyższy komponent używa wewnętrznego stanu, który wyświetla ilość kliknięć w przycisk. Ten hook pozwala Reactowi na synchronizację danych z interfejsem użytkownika, czyli tym, co widzimy. Więcej na temat działania useEffect pojawi się w kolejnej części kursu.
Props
Propsy to informacje przekazane do komponentu. Element nadrzędny (rodzic) może przekazać jakieś informacje do dziecka, który wykorzysta je w jakiś sposób np. do wyświetlenia danych w tym komponencie na podstawie informacji. Propsy mogą przyjmować wartości JavaScriptowe, czyli mogą to być zmienne, obiekty, tablice czy nawet prosty tekst.
Propsy pełnią ważną funkcje w ekosystemie React, ponieważ pozwalają na budowę komponentów z różnymi danymi. Łatwo zbudować komponent, który na podstawie informacji wyświetli coś innego, ale w takiej samej strukturze. W końcu chodzi o to, żeby używać komponentów wielokrotnie.
export function MyCustomButton(props) {
return (
<button style={{ color: props.color }}>{props.children}</button>
);
}
function Page() {
return (
<MyCustomButton color={'red'}>Your custom text</MyCustomButton>
)
}W powyższym przykładzie przekazujemy dwa propsy. Pierwszy to children, który znajduje się wewnątrz znaczników MyCustomButton. Drugi to color, który przekazuje wartość 'red’. Użycie takiego komponentu będzie możliwe w innych miejscach, ponieważ możemy zmodyfikować tekst czy kolor. Jest to najprostszy przykład, ale możliwości jest znacznie więcej.
Podsumowanie
React to jedna z najpopularniejszych bibliotek umożliwiających tworzenie interaktywnych aplikacji internetowych oraz natywnych. Cały ekosystem Reacta to wiele możliwości, co oznacza, że jego znajomość jako programista frontend to dzisiaj standard. Przedstawiłem w tej części najważniejsze koncepcje takie jak JSX, stan komponentu, czym jest komponent oraz czym są propsy. Znajomość tych zagadnień to podstawa do dalszej nauki React.
Źródła
Quick Start — React — https://react.dev/learn
Your First Component — https://react.dev/learn/your-first-component
Importing and Exporting components — https://react.dev/learn/importing-and-exporting-components
Passing Props to a Component — https://react.dev/learn/passing-props-to-a-component
Dodaj komentarz