Przejdź do treści głównej

Podstawy Reacta

Nieoficjalne Tłumaczenie Beta

Ta strona została przetłumaczona przez PageTurner AI (beta). Nie jest oficjalnie zatwierdzona przez projekt. Znalazłeś błąd? Zgłoś problem →

React Native działa w oparciu o React – popularną bibliotekę open source do tworzenia interfejsów użytkownika w JavaScript. Aby w pełni wykorzystać możliwości React Native, warto zrozumieć samego Reacta. Ta sekcja stanowi wprowadzenie lub powtórkę.

Omówimy podstawowe koncepcje Reacta:

  • komponenty

  • JSX

  • właściwości (props)

  • stan (state)

Jeśli chcesz zgłębić temat, zajrzyj do oficjalnej dokumentacji Reacta.

Twój pierwszy komponent​

W dalszej części przykładów wykorzystamy koty – przyjazne stworzenia, które potrzebują imion i kawiarni do pracy. Oto Twój pierwszy komponent Cat:

Zdefiniuj komponent Cat importując Reacta i podstawowy komponent Text z React Native za pomocą import:

tsx
import React from 'react';
import {Text} from 'react-native';

Komponent zaczyna się jako funkcja:

tsx
const Cat = () => {};

Komponenty możesz traktować jak szablony. To, co zwraca komponent funkcyjny, jest renderowane jako element Reacta. Elementy opisują, co chcesz wyświetlić na ekranie.

Komponent Cat wyrenderuje element <Text>:

tsx
const Cat = () => {
  return <Text>Hello, I am your cat!</Text>;
};

Możesz eksportować komponent za pomocą export default, aby używać go w całej aplikacji:

tsx
const Cat = () => {
  return <Text>Hello, I am your cat!</Text>;
};

export default Cat;
wskazówka

To jeden z wielu sposobów eksportowania komponentów. Ta metoda dobrze współpracuje z Snack Player. W zależności od struktury projektu możesz potrzebować innych konwencji – pomocny będzie poradnik importów i eksportów w JavaScript.

Przyjrzyj się instrukcji return. Składnia <Text>Hello, I am your cat!</Text> to JSX – rozszerzenie JavaScript ułatwiające pisanie elementów.

JSX​

React i React Native używają JSX – składni pozwalającej pisać elementy w JavaScript, np. <Text>Hello, I am your cat!</Text>. Więcej o JSX znajdziesz w oficjalnym przewodniku. Ponieważ JSX to JavaScript, możesz używać zmiennych. Tutaj deklarujemy imię kota name i osadzamy je w <Text> za pomocą nawiasów klamrowych:

W nawiasach klamrowych możesz umieścić dowolne wyrażenie JavaScript, np. wywołanie funkcji: {getFullName("Rum", "Tum", "Tugger")}

Nawiasy klamrowe to jak portal do funkcjonalności JavaScript w JSX!

wskazówka

Ponieważ JSX jest częścią biblioteki React, konieczne jest dodanie import React from 'react' na początku pliku!

Niestandardowe komponenty​

Poznałeś już podstawowe komponenty React Native. React pozwala zagnieżdżać je w sobie, tworząc nowe komponenty. Te wielokrotnie używane, zagnieżdżalne komponenty są sercem paradygmatu Reacta.

Przykładowo, możesz zagnieździć Text i TextInput w komponencie View – React Native wyrenderuje je razem:

Uwagi dla deweloperów​

informacja

If you’re familiar with web development, <View> and <Text> might remind you of HTML! You can think of them as the <div> and <p> tags of application development.

Używając <Cat>, możesz renderować ten komponent wielokrotnie w różnych miejscach bez powtarzania kodu:

Każdy komponent, który renderuje inne komponenty, jest komponentem rodzica. Tutaj Cafe jest komponentem rodzica, a każdy Cat jest komponentem dziecka.

Możesz umieścić w swojej kawiarni tyle kotów, ile chcesz. Każdy <Cat> renderuje unikalny element, który możesz dostosować za pomocą właściwości (props).

Właściwości​

Props to skrót od "properties" (właściwości). Właściwości pozwalają konfigurować komponenty Reacta. Na przykład tutaj przekazujesz każdemu <Cat> inne name, które komponent Cat renderuje:

Większość podstawowych komponentów React Native również można konfigurować za pomocą właściwości. Na przykład używając Image, przekazujesz właściwość source definiującą wyświetlany obraz:

Image posiada wiele właściwości, w tym style, który przyjmuje obiekt JS z parami właściwość-wartość dotyczącymi stylu i układu.

uwaga

Zauważ podwójne nawiasy klamrowe {{ }} otaczające właściwości width i height w style. W JSX wartości JavaScript odwołuje się za pomocą {}. To przydatne przy przekazywaniu innych wartości niż string, jak tablica czy liczba: <Cat food={["fish", "kibble"]} age={2} />. Jednak obiekty JS są również oznaczane klamrami: {width: 200, height: 200}. Dlatego by przekazać obiekt JS w JSX, musisz otoczyć go dodatkową parą nawiasów klamrowych: {{width: 200, height: 200}}

Dzięki właściwościom i komponentom Text, Image, View możesz zbudować wiele elementów! Ale do tworzenia interaktywnych funkcji potrzebny będzie stan.

Stan​

Podczas gdy właściwości możesz traktować jak argumenty konfigurujące renderowanie komponentów, stan jest prywatnym magazynem danych komponentu. Stan służy do przechowywania danych, które zmieniają się w czasie lub pochodzą z interakcji użytkownika. Stan daje twoim komponentom pamięć!

informacja

Ogólna zasada: używaj właściwości do konfiguracji komponentu podczas renderowania. Używaj stanu do śledzenia danych, które mogą zmieniać się w czasie.

W poniższym przykładzie w kociej kawiarni dwa głodne koty czekają na posiłek. Ich głód (który w przeciwieństwie do imion zmienia się w czasie) jest przechowywany jako stan. By nakarmić koty, naciśnij ich przyciski – to zaktualizuje ich stan.

Stan dodasz do komponentu za pomocą Hooks useState Reacta. Hook to funkcja pozwalająca "zahaczyć się" o funkcje Reacta. Na przykład useState to Hook dodający stan do komponentów funkcyjnych. Więcej o różnych Hookach znajdziesz w dokumentacji Reacta.

Najpierw zaimportuj useState z Reacta:

tsx
import React, {useState} from 'react';

Następnie zadeklaruj stan komponentu wywołując useState wewnątrz funkcji. W tym przykładzie useState tworzy zmienną stanu isHungry:

tsx
const Cat = (props: CatProps) => {
  const [isHungry, setIsHungry] = useState(true);
  // ...
};
wskazówka

Możesz użyć useState do śledzenia dowolnych danych: stringów, liczb, wartości boolowskich, tablic, obiektów. Np. liczbę głaskania kota możesz śledzić przez const [timesPetted, setTimesPetted] = useState(0)!

Wywołanie useState robi dwie rzeczy:

  • tworzy "zmienną stanu" z wartością początkową – tutaj zmienna isHungry ma początkową wartość true

  • tworzy funkcję ustawiającą wartość tej zmiennej – setIsHungry

Nazwy mogą być dowolne, ale wzorzec [<getter>, <setter>] = useState(<initialValue>) jest pomocną konwencją.

Następnie dodaj komponent Button i nadaj mu właściwość onPress:

tsx
<Button
  onPress={() => {
    setIsHungry(false);
  }}
  //..
/>

Teraz, gdy ktoś naciśnie przycisk, zdarzenie onPress zostanie wywołane, co spowoduje wykonanie setIsHungry(false). To ustawia zmienną stanu isHungry na false. Gdy isHungry ma wartość false, właściwość disabled przycisku Button jest ustawiana na true, a jego title również się zmienia:

tsx
<Button
  //..
  disabled={!isHungry}
  title={isHungry ? 'Give me some food, please!' : 'Thank you!'}
/>
informacja

Możesz zauważyć, że chociaż isHungry jest zadeklarowane jako const, wydaje się możliwe do ponownego przypisania! Dzieje się tak, ponieważ gdy funkcja ustawiająca stan jak setIsHungry zostanie wywołana, jej komponent zostanie ponownie wyrenderowany. W tym przypadku funkcja Cat zostanie ponownie wykonana - a tym razem useState zwróci nam nową wartość isHungry.

Na koniec umieść swoje koty w komponencie Cafe:

tsx
const Cafe = () => {
  return (
    <>
      <Cat name="Munkustrap" />
      <Cat name="Spot" />
    </>
  );
};
informacja

Widzisz <> i </> powyżej? Te elementy JSX to fragmenty. Sąsiadujące elementy JSX muszą być zawarte w tagu opakowującym. Fragmenty pozwalają to osiągnąć bez dodawania dodatkowego, niepotrzebnego elementu opakowującego jak View.

Skoro poznałeś już podstawy React i podstawowe komponenty React Native, przyjrzyjmy się bliżej niektórym z nich, analizując obsługę <TextInput>.