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