kontakt
Software house
>
Tag
>
React.js framework front-end JS. Programowanie w React.
React.js

React.js framework front-end JS. Programowanie w React.

Data wpisu
Mateusz Kuba
Autor
Mateusz Kuba

React.js to jedna z najpopularniejszych bibliotek JavaScript, która umożliwia tworzenie złożonych graficznych interfejsów użytkownika, a zatem umożliwia interakcję użytkownika z komputerem. Pozwala na budowę złożonych struktur poprzez odizolowane od siebie komponenty oraz wykorzystuje nowoczesny sposób renderowania witryn internetowych, które stają się o wiele bardziej dynamiczne, niż w przypadku zastosowania innych technologii. React.js powstał w 2011 r. z inicjatywy jednego z pracowników Facebooka, a od 2013 r. przekształcił się w oprogramowanie open source i sukcesywnie podbija branżę programistyczną.

React Js z racji tego, że jest biblioteką Javascript daje możliwość wykorzystywania wewnątrz całego ekosystemu bibliotek i dodatków z NPM, które są stale rozwijane. Jest to ogromna zaleta dla zespołów, które potrzebują dostarczyć produkcyjne rozwiązanie wysokiej jakości. Z łatwością programuje się w nim elementy dynamiczne takie jak podnieść i upuść, zaawansowane animacje, czy skomplikowane interfejsy, które wywołują wiele asynchronicznych zdarzeń. Dzięki integracji narzędzi takich jak Redux, Mobx czy też Saga, proces tworzenia aplikacji przyspiesza i skraca się z miesięcy do tygodni czy nawet dni.

React js

React JS – szybkość i stabilność

React.js pozwala na tworzenie odseparowanych od siebie komponentów, które są reużywalne. Dzięki temu możemy w sposób powtarzalny budować coraz większe moduły, do których przekazujemy odpowiednie informacje za pomocą tzw. propsów. React.js wykorzystuje tzw. wirtualny DOM, a także metodę virtual dom diffing. Oznacza ona w praktyce, że wszystkie zmiany w strukturze DOM są najpierw wykonywane w silniku Javascript, a jeżeli zajdzie potrzeba wyrenderowania komponentu na nowo przekazana zostanie odpowiednia informacja do drzewa DOM. Jest to o tyle innowacyjne rozwiązanie, że zmniejsza ilość odświeżeń wyświetlania komponentu i sprawia, że procesor zajmuje się tylko tym co potrzeba.

React.js posiada ogromną społeczność, która stale się rozwija. Na stackoverflow posiada już ponad 360 tysięcy pytań z przykładami i odpowiedziami. Dodatkowo kolejne wersje React.js robione są w konwencji, że każda poprzednia wersja musi być kompatybilna z poprzednią. Nie są wprowadzane, duże zmiany na poziomie wywoływanych metod, dlatego aplikacje pisane w React w wersji 15.00 są kompatybilne z React w wersji 17.

React js społeczność

React JS - przejrzysty i czysty kod

Wszelkie komponenty, z których korzysta w projekcie programista są od siebie oddzielone, stąd jakikolwiek błąd lub zmiana nie wpływają na inne. Dodatkowo można te komponenty wykorzystać na różnych poziomach kodu, co niezwykle przyśpiesza i ułatwia całą pracę nad aplikacją lub stroną www. Niezwykle istotną zaletą React.js jest jego stabilność. Wynika ona z faktu, że elementy potomne nie mają wpływu na elementy nadrzędne, a cały przepływ informacji w stanie aplikacji jest jednokierunkowy – odbywa się w dół. Dodatkowo razem z Reactem możemy użyć framework Next.js lub Gatsby.js, które są bardzo dobrze odbierane przez roboty Google pod kątem SEO, ponieważ zmieniają sposób renderowania na renderowanie po stronie serwera (SSR). Próg wejścia do tej biblioteki JavaScript jest stosunkowo niski, dlatego też może być wykorzystywany przez mniej doświadczonych programistów, a dodatkowo cały czas jest rozwijany.

W jakich aplikacjach React JS sprawdza się najlepiej?

React sprawdza się najlepiej w zaawansowanych interfejsach użytkownika. Tam gdzie logika aplikacji jest skomplikowana, akcje użytkownika są niestandardowe i zaawansowane. Bardzo dobrze sprawdza się w dużych zespołach, gdyż pozwala na dobrą separację warstwy logicznej i prezentacyjnej.

Istnieją rozwiązania oparte o architekturę serverless jak i statyczny hosting, które znacznie podnoszą skalowalność takiej aplikacji. Tysiące użytkowników mogą korzystać ze stron napisanych w React JS i hostowanych na rozwiązaniach typu CDN bez jakiegokolwiek spowolnienia interfejsu.

Rozwiązania oparte o React JS:

Istnieje wiele rozwiązań na rynku, które wykorzystują bibliotekę React JS. Są to zarówno duże portale takie jak AWS, który swoją konsolę do obsługi chmury zaprogramował w React, czy też serwisy blogowe takie jak Medium.

  • aplikacje konfiguratory, których interfejs nie różni się niczym od aplikacji jeszcze przed laty instalowanej niezależnie na windows, takie jak excell online, czy word online
  • aplikacje sklepy, których interfejs jest niezależny od backendu i których sklep ma wystawione API, a potrzebują wymienić swoją warstwę wizualną na bardziej atrakcyjną wizualnie
  • dashboardy i wizualizacje danych
  • panele administratorskie
  • aplikacje Realtime z wykorzystaniem socket.io i ciągłą komunikacją z serwerem i aktualizacjami interfejs
  • landing page z optymalizacją pod SEO
  • aplikacje natywne wykorzystujące WebView oraz React JS

Wpisy z tagiem: react-js

Headless CMS - lista popularnych technologii

Headless Content Management System („Bezgłowy” System Zarządzania Treścią) to technologia tworzenia aplikacji internetowych skierowana do programistów front-end. Headless CMS może działać w oparciu o interfejs API lub aktualizacje w Git.
Mateusz Kuba
Mateusz Kuba
2022-01-19

Dlaczego twoja aplikacja powinna być napisana w React.js?

Czym jest ReactJS ? React jest biblioteką programowania języka JavaScript wykorzystywaną do tworzenia interfejsów użytkownika. Działa na licencji MIT, a więc gwarantuje prawa autorskie i możliwość sprzedaży twórcom.
Mateusz Kuba
Mateusz Kuba
2021-11-23

Fixed Price czy Time & Material – jaki model rozliczenia w projektach IT wybrać?

Model współpracy w ramach projektu z branży IT to podstawowy wybór, którego musi dokonać firma zlecająca jego wykonanie. Dzięki różnorodności tych modeli pomiędzy wykonawcą a zleceniodawcą możliwe jest jak najlepsze dopasowanie budżetu i harmonogramu prac w każdym projekcie.
Tomasz Kozon
Tomasz Kozon
2021-11-04

Jam Stack – przełom czy dobrze znana technologia?

Co oznacza skrót JAM Stack? Javascript-APIs-Markup. Jest połączeniem dobrze znanych narzędzi i wydzieleniem FrontEndowej architektury aplikacji od jej backendu. Nie ma konkurentów pod kątem szybkości działania, bezpieczeństwa i skalowalności. Na bazie tej konwencji powstała cała gama aplikacji, między innymi rozwiązania typu Headless CMS.
Mateusz Kuba
Mateusz Kuba
2021-01-01

React, Vue, Angular – omówienie najpopularniejszych front- endowych frameworków JavaScript

Programowanie stron internetowych i aplikacji webowych zawsze rozpoczyna się od wyboru technologii, w oparciu o którą powstanie projekt. Java Script wciąż stanowi najpopularniejszy język do stosowania po stronie serwera i po stronie klienta, z którego chętnie korzystają frontend developerzy na całym świecie.
Mateusz Kuba
Mateusz Kuba
2020-06-16

Case study growcreator.eu V1 - rozwój MVP produktu na podstawie danych z narzędzi analitycznych.

Od początku zakładaliśmy, że pierwsza wersja MVP produktu nie będzie jego ostatnią odsłoną. Projekt nie ma odpowiednika na rynku, duża część zaimplementowanych funkcjonalności była innowacyjna i wymagała weryfikacji w środowisku produkcyjnym, generując ruch realnych użytkowników.

Case study: GreenTransit - spedycja drogowa bez papierowych dokumentów.

Development aplikacji to właściwie niekończący się proces, szczególnie w przypadku innowacyjnych produktów dla start-upów, które rozwijane są od wersji MVP. Głównie z takimi projektami pracuje nasz zespół i w takich realizacjach się specjalizujemy. Podobnie było w przypadku zlecenia od firmy SHM Sp. z o.o., która zamówiła u nas stworzenie aplikacji GreenTransit.

Case study growcreator.eu – MVP zaawansowanego kreatora produktu dla ecommerce

Projekt został wykonany od zera przez nasz zespół przy ścisłej współpracy z Klientem. Aplikacja rozwiązuje problemy konfiguracji i kompletowania optymalnych zestawów do domowej uprawy roślin tzw. growbox.

Produkt Boring Owl (Headless CMS + TypeScript + React.js + Next.js) - komentarz techniczny

Tworząc produkt zoptymalizowanej witryny pod SEO, wykorzystaliśmy nasze doświadczenie w tworzeniu aplikacji frontendowych. Ważne dla nas było by witryna od strony technicznej była składowana w repozytorium Github oraz miała oddzielny moduł do zarządzania treścią.

Produkt Boring Owl: witryna z najwyższymi wskaźnikami performance i SEO (Headless CMS + TypeScript + React.js + Next.js)

W tym case study opisałem proces tworzenia produkt IT sprzedawanego przez naszą spółkę. Jest to między innymi witryna, którą właśnie czytasz, a także kilka innych projektów wdrożonych przez nas zespół w tym samym stacku technologicznym dla naszych Klientów.