We want to hear from you!Take our 2021 Community Survey!
Ta witryna nie jest już aktualizowana.Przejdź do react.dev

React

javascriptowa biblioteka służąca do tworzenia interfejsów użytkownika

Deklaratywny

React znacznie ułatwia tworzenie interaktywnych UI. Zaprojektuj proste widoki obsługujące stan aplikacji, a React zajmie się sprawną aktualizacją i ponownym renderowaniem odpowiednich komponentów.

Deklaratywne widoki sprawiają, że kod staje się bardziej przewidywalny i łatwiejszy do debugowania.

Oparty na komponentach

Twórz izolowane komponenty, które zarządzają własnym stanem, a później łącz je w złożony UI.

Jako że logika komponentów pisana jest w JavaScripcie, a nie w szablonach, przekazywanie skomplikowanych struktur danych i przechowywanie stanu aplikacji poza drzewem DOM staje się łatwiejsze.

Naucz się raz, używaj wszędzie

React działa w izolacji od reszty stosu technologicznego, dzięki czemu możesz w nim tworzyć nowe funkcjonalności, bez konieczności przepisywania istniejącego kodu.

React potrafi również renderować po stronie serwera przy użyciu Node, a także napędzać aplikacje mobilne za pomocą React Native.


Prosty komponent

Komponenty reactowe zawierają metodę render(), która na podstawie danych wejściowych oblicza, co powinno zostać wyświetlone. W tym przykładzie użyliśmy podobnej do XML-a składni o nazwie JSX. Dane przekazane do komponentu można odczytać ze zmiennej this.props.

Używanie składni JSX nie jest wymagane w Reakcie. W środowisku Babel REPL możesz podejrzeć surowy kod javascriptowy, powstały w wyniku kompilacji składni JSX.

Ładowanie przykładowego kodu...

Komponent ze stanem

Poza danymi wejściowymi do komponentu (dostępnymi w this.props), komponent może zarządzać swoim wewnętrznym stanem (dostępnym w this.state). Przy każdej zmianie stanu komponentu następuje ponownie wywołanie metody render(), co skutkuje zaktualizowaniem wyrenderowanej struktury.

Ładowanie przykładowego kodu...

Aplikacja

Przy pomocy zmiennych props oraz state możemy stworzyć małą aplikację z listą zadań. Ten przykład wykorzystuje state do śledzenia zmian w liście elementów oraz wartości z pola tekstowego. Mimo że uchwyty do obsługi zdarzeń wydają się tu być renderowane wraz z komponentem, to tak naprawdę zostaną one zebrane i odpowiednio zaimplementowane przy użyciu mechanizmu obsługi zdarzeń.

Ładowanie przykładowego kodu...

Korzystanie z zewnętrznej biblioteki

React pozwala na używanie innych bibliotek i frameworków. W tym przykładzie skorzystaliśmy z remarkable, zewnętrznej biblioteki obsługującej składnię Markdown, aby w czasie rzeczywistym przekształcać wartość z pola <textarea>.

Ładowanie przykładowego kodu...