React jest jedną z najpopularniejszych bibliotek JavaScript do budowania interfejsów użytkownika.
Jeśli chcesz zostać front-end developerem lub znaleźć pracę przy tworzeniu stron internetowych, prawdopodobnie skorzystasz z dogłębnej nauki React.
W tym poście poznasz niektóre z podstaw React, takie jak tworzenie komponentów, składnia JSX i Props. Jeśli nie masz żadnego lub niewielkie doświadczenie z Reactem, ten post jest dla Ciebie.
Na początek, oto jak możesz zainstalować React.
Co to jest JSX?
Pierwszą rzeczą, którą zdasz sobie sprawę po zainstalowaniu swojego pierwszego projektu React jest to, że funkcja JavaScript zwraca jakiś kod HTML:
function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Edit <code>src/App.js</code> and save to reload. </p> </header> </div> );}Jest to specjalne i ważne rozszerzenie składni dla React, które nazywa się JSX (JavaScript XML). Zazwyczaj w projektach związanych z frontendem, trzymamy kod HTML, CSS i JavaScript w osobnych plikach. Jednak w React działa to nieco inaczej.
W projektach React nie tworzymy oddzielnych plików HTML, ponieważ JSX pozwala nam pisać HTML i JavaScript połączone razem w tym samym pliku, tak jak w powyższym przykładzie. Możesz jednak wydzielić swój CSS w innym pliku.
Na początku JSX może wydawać się trochę dziwny. Ale nie martw się, przyzwyczaisz się do niego.
JSX jest bardzo praktyczny, ponieważ możemy również wykonać dowolny kod JavaScript (logikę, funkcje, zmienne i tak dalej) wewnątrz HTML bezpośrednio za pomocą nawiasów klamrowych { }, jak poniżej:
function App() { const text = 'Hello World'; return ( <div className="App"> <p> {text} </p> </div> );}Możesz również przypisać znaczniki HTML do zmiennych JavaScript:
const message = <h1>React is cool!</h1>;Albo możesz zwracać HTML wewnątrz logiki JavaScript (takich jak przypadki if-else):
render() { if(true) { return <p>YES</p>; } else { return <p>NO</p>; }}Nie będę wchodził w dalsze szczegóły JSX, ale upewnij się, że bierzesz pod uwagę następujące zasady podczas pisania JSX:
- ZnacznikiHTML i komponentów muszą być zawsze zamknięte < />
- Niektóre atrybuty, takie jak „class” stają się „className” (ponieważ class odnosi się do klas JavaScript), „tabindex” staje się „tabIndex” i powinny być napisane camelCase
- Nie możemy zwrócić więcej niż jednego elementu HTML na raz, więc upewnij się, że zawijasz je wewnątrz znacznika nadrzędnego:
return ( <div> <p>Hello</p> <p>World</p> </div>);- lub jako alternatywę, możesz zawinąć je za pomocą pustych znaczników:
return ( <> <p>Hello</p> <p>World</p> </>);Możesz również obejrzeć mój samouczek React for Beginners, aby uzyskać więcej informacji:
Czym są komponenty klasy funkcjonalnej &?
Po przyzwyczajeniu się do składni JSX, następną rzeczą do zrozumienia jest struktura Reacta oparta na komponentach.
Jeśli ponownie przejrzysz przykładowy kod na górze tego postu, zobaczysz, że kod JSX jest zwracany przez funkcję. Ale funkcja App( ) nie jest zwykłą funkcją – jest to tak naprawdę komponent. Więc czym jest komponent?
Co to jest komponent?
Komponent jest niezależnym, wielokrotnego użytku blokiem kodu, który dzieli UI na mniejsze części. Przykładowo, gdybyśmy budowali UI Twittera za pomocą Reacta:
Zamiast budować całe UI pod jednym plikiem, możemy i powinniśmy podzielić wszystkie sekcje (zaznaczone na czerwono) na mniejsze niezależne kawałki. Innymi słowy, są to komponenty.
React posiada dwa rodzaje komponentów: funkcjonalne i klasowe. Przyjrzyjmy się teraz każdemu z nich bardziej szczegółowo.
Komponenty funkcjonalne
Pierwszym i zalecanym typem komponentów w React są komponenty funkcjonalne. Komponent funkcjonalny to w zasadzie funkcja JavaScript/ES6, która zwraca element React (JSX). Zgodnie z oficjalnymi dokumentami Reacta, poniższa funkcja jest prawidłowym komponentem funkcjonalnym:
function Welcome(props) { return <h1>Hello, {props.name}</h1>;}Alternatywnie, można również utworzyć komponent funkcjonalny za pomocą definicji funkcji strzałki:
const Welcome = (props) => { return <h1>Hello, {props.name}</h1>; }Ta funkcja jest prawidłowym komponentem Reacta, ponieważ akceptuje pojedynczy argument obiektu „props” (co oznacza właściwości) z danymi i zwraca element Reacta. – reactjs.org
Aby móc później użyć komponentu, musisz go najpierw wyeksportować, abyś mógł go zaimportować gdzie indziej:
function Welcome(props) { return <h1>Hello, {props.name}</h1>;}export default Welcome;Po zaimportowaniu możesz wywołać komponent tak jak w tym przykładzie:
import Welcome from './Welcome';function App() { return ( <div className="App"> <Welcome /> </div> );}Czyli komponent funkcyjny w React:
- jest funkcją JavaScript/ES6
- musi zwrócić element React (JSX)
- zawsze zaczyna się od dużej litery (konwencja nazewnictwa)
- przyjmuje rekwizyty jako parametr, jeśli to konieczne
Czym są komponenty klasowe?
Drugim typem komponentu jest komponent klasowy. Komponenty klasowe są klasami ES6, które zwracają JSX. Poniżej widzisz naszą tę samą funkcję Welcome, tym razem jako komponent klasowy:
class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; }}Różniąc się od komponentów funkcjonalnych, komponenty klasowe muszą mieć dodatkową metodę render( ) do zwracania JSX.
Why Use Class Components?
Kiedyś używaliśmy komponentów klasowych ze względu na „stan”. W starszych wersjach Reacta (wersja < 16.8) nie można było używać stanu wewnątrz komponentów funkcjonalnych.
W związku z tym potrzebowaliśmy komponentów funkcjonalnych tylko do renderowania UI, podczas gdy używaliśmy komponentów klasowych do zarządzania danymi i niektórych dodatkowych operacji (takich jak metody cyklu życia).
Zmieniło się to wraz z wprowadzeniem React Hooks, a teraz możemy również używać stanów w komponentach funkcjonalnych. (Będę zajmował się stanem i hakami w moich kolejnych postach, więc nie przejmuj się nimi na razie).
Komponent klasy:
- jest klasą ES6, będzie komponentem, gdy „rozszerzy” komponent React.
- pobiera rekwizyty (w konstruktorze), jeśli jest to potrzebne
- musi mieć metodę render( ) do zwracania JSX
Czym są rekwizyty w React?
Kolejną ważną koncepcją komponentów jest sposób, w jaki się komunikują. React posiada specjalny obiekt zwany prop (skrót od property), którego używamy do transportu danych z jednego komponentu do drugiego.
Bądź jednak ostrożny – rekwizyty transportują dane tylko w jednym kierunku (tylko z komponentów rodzica do komponentów dziecka). Nie jest możliwe za pomocą rekwizytów przekazywanie danych od dziecka do rodzica lub do komponentów na tym samym poziomie.
Powróćmy do funkcji App( ) powyżej, aby zobaczyć, jak przekazywać dane za pomocą rekwizytów.
Po pierwsze, musimy zdefiniować rekwizyt na komponencie Witamy i przypisać mu wartość:
import Welcome from './Welcome';function App() { return ( <div className="App"> <Welcome name="John"/> <Welcome name="Mary"/> <Welcome name="Alex"/> </div> );}Propy są niestandardowymi wartościami i sprawiają, że komponenty są bardziej dynamiczne. Ponieważ komponent Welcome jest tutaj dzieckiem, musimy zdefiniować rekwizyty na jego rodzicu (App), więc możemy przekazać wartości i uzyskać wynik po prostu poprzez dostęp do rekwizytu „name”:
function Welcome(props) { return <h1>Hello, {props.name}</h1>;}
React Props Are Really Useful
Więc programiści React używają rekwizytów do przekazywania danych i są one przydatne do tego zadania. Ale co z zarządzaniem danymi? Rekwizyty są używane do przekazywania danych, a nie do manipulowania nimi. Zamierzam zająć się zarządzaniem danymi za pomocą Reacta w moich przyszłych postach tutaj na freeCodeCamp.
W międzyczasie, jeśli chcesz dowiedzieć się więcej o React & Web development, zapraszam do subskrypcji mojego kanału YouTube.
Dziękuję za przeczytanie!