React – nowoczesna technologia webowa

React czyli biblioteka języka JavaScript

 

 

W ostatnich latach React czyli biblioteka języka JavaScript (przez niektórych określana również jako framework) zyskała wielką popularność. Lista portali korzystających z Reacta, którą możemy znaleźć na platformie GitHub może naprawdę robić wrażenie.
Marki takie jak Facebook, Twitter, BBC, Yahoo, Dropbox, Jeep, Netflix, NFL czy E-buy postanowiły we  wdrożonych przez siebie produktach skorzystać z technologii React.

Czym tak naprawdę jest React?

Technologia ta światło dzienne ujrzała w 2013 r. Została zaprojektowana i opracowana przez programistów Facebooka początkowo na własny użytek. Z upływem czasu zdecydowano jednak, że rozwiązanie to jest na tyle atrakcyjne i sprawnie działające iż warto podzielić się nim ze Światem. Wprowadzić na rynek jako projekt open-sourcowy.

Ogólne zasady działania:

Głownym założeniem działania biblioteki React jest istnienie Virtual DOM czyli niejako kopii prawdziwej struktury DOM naszej strony / aplikacji, przechowywanej w pamięci. React za pomocą specjalnego algorytmu porównuje strukturę virtual DOM i prawdziwego DOM. Gdy któryś z elementów ulegnie zmianie dokonuje jego przerenderowania. Taki sposób funkcjonowania zapewnia aplikacji stworzonej w React-ie bardzo dużą szybkość działania w porównaniu do klasycznych stron, ponieważ odświeżanie Virtual DOM zajmuje znacznie mniej czasu niż klasycznej struktury html.

W Reactie budujemy aplikację z reużywalnych komponentów, które możemy zagnieżdżać tworząc tym samym drzewo komponentów.
Dane w komponentach są przechowywane i przekazywane z komponentu do komponentu za pomocą odpowiednio stanu (state) oraz propsów. Każdy komponent może zawierać swój własny “zestaw” stanów, których zmiana powoduje jego przerenderowanie. Dane do komponentów przekazujemy za pomocą propsów czyli właściwości. Props może być zmieniony poprzez rodzica w przeciwieństwie do stanu. Natomiast state może zostać zmieniony wewnątrz komponentu, a props nie.

ReactJS w odróżnieniu od innych popularnych frameworków JavaScript (jak np. Angular) powinien być traktowany nie jak pełnoprawny framework MVC a jedynie część “V” czyli view (warstwa widoku). Taki stan rzeczy ogranicza nieco jego możliwości jednak powoduje również że jest zdecydowanie łatwiejszy do nauki i prostszy w użyciu.

Główne zalety React:

React jest bardzo szybki (rerenderowanie wybranych elementów na podstawie virtual DOM jest znacznie szybsze od odświeżania klasycznej struktury DOM)
React jest SEO friendlly. Wiele frameworków JS jest na bakier z SEO. Kod Reacta możemy uruchomić bezpośrednio na serwerze.
React pozwala nam na tworzenie aplikacji z reużywalnych “kloców”. Daje nam to możliwość łatwiejszego wprowadzania zmian czy rozbudowania o nowe funkcjonalności w miarę rozwoju produktu.
Tworzenie efektywnych, interaktywnych, dynamicznych i bardziej wydajnych rozwiązań. Pozwala nam na ograniczenie wymiany danych z serwerem co zwiększa pozytywne odczucia klienta.
Aplikacje stworzone w ReactJS są bezpieczniejsze od tych napisanych w czystym języku JavaScript.

Zalety dla developera:

– Stosunkowo łatwy w nauce,
– Duża społeczność zajmująca się Reactem – pozwala nam to na uzyskanie wsparcia w naszych projektach.
– Świetne narzędzia developerskie, które możemy używać do pracy z Reactem (chociażby rozszerzenie do przeglądarki chrome React Developer Tool)

Autor

Piotr Dendys

Piotr Dendys

Piotr Dendys. Web Developer w ADHOC DIGITAL.