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...