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