Przejdź do treści głównej
Wersja: 0.79

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;

To jeden z wielu sposobów eksportowania komponentu. Ten sposób eksportu dobrze współpracuje z Snack Playerem. Jednak w zależności od struktury plików w aplikacji, możesz potrzebować innej konwencji. Ta przydatna ściągawka dotycząca importów i eksportów w JavaScript może pomóc.

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!

Ponieważ JSX jest częścią biblioteki React, nie będzie działać bez import React from 'react' na górze 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​

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.

Zwróć uwagę na podwójne nawiasy klamrowe {{ }} otaczające właściwości style: width i height. W JSX wartości JavaScript odwołuje się za pomocą {}. Jest to przydatne, gdy przekazujesz coś innego niż string jako właściwości, np. tablicę lub liczbę: <Cat food={["fish", "kibble"]} age={2} />. Jednak obiekty JS są również oznaczane nawiasami klamrowymi: {width: 200, height: 200}. Dlatego, aby przekazać obiekt JS w JSX, musisz owinąć go w kolejną 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ęć!

Ogólna zasada: używaj właściwości (props) do konfiguracji komponentu podczas renderowania. Używaj stanu (state) do śledzenia danych komponentu, które mogą się zmieniać 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);
  // ...
};

Możesz używać useState do śledzenia dowolnych danych: stringów, liczb, wartości logicznych, tablic, obiektów. Na przykład, możesz śledzić ile razy kot został pogłaskany: 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!'}
/>

Możesz zauważyć, że mimo iż isHungry jest const, wydaje się możliwa do ponownego przypisania! Dzieje się tak, ponieważ gdy funkcja ustawiająca stan (np. setIsHungry) zostanie wywołana, komponent zostanie ponownie wyrenderowany. W tym przypadku funkcja Cat zostanie uruchomiona ponownie - i tym razem useState zwróci nową wartość isHungry.

Na koniec umieść swoje koty w komponencie Cafe:

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

Widzisz <> i </> powyżej? Te elementy JSX to fragmenty. Sąsiadujące elementy JSX muszą być zawarte w tagu opakowującym. Fragmenty pozwalają to zrobić bez dodawania zbędnego elementu opakowującego, takiego 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>.