{"id":1641,"date":"2018-11-22T16:35:36","date_gmt":"2018-11-22T15:35:36","guid":{"rendered":"https:\/\/infoshareacademy.com\/?p=1641"},"modified":"2021-01-12T10:14:41","modified_gmt":"2021-01-12T09:14:41","slug":"react-i-jego-ekosystem","status":"publish","type":"post","link":"https:\/\/infoshareacademy.com\/blog\/react-i-jego-ekosystem\/","title":{"rendered":"React i jego ekosystem"},"content":{"rendered":"

Poni\u017cszy wpis ma na celu pom\u00f3c w pierwszych wyborach pocz\u0105tkuj\u0105cym programistom i zaprezentowa\u0107 list\u0119 najpopularniejszych bibliotek do rozwi\u0105zania standardowych problem\u00f3w podczas tworzenia aplikacji w React.<\/strong><\/p>\n

Czym jest React?<\/h2>\n

React jest sam w sobie zaledwie niewielk\u0105 bibliotek\u0105 pozwalaj\u0105c\u0105 w \u0142atwy spos\u00f3b tworzy\u0107 interfejsy u\u017cytkownika. Zosta\u0142 stworzony i opublikowany przez Facebooka jako open source – https:\/\/github.com\/facebook\/react.<\/a> W przeci\u0105gu zaledwie kilku lat istnienia zdoby\u0142 szerokie grono u\u017cytkownik\u00f3w i wsp\u00f3\u0142tw\u00f3rc\u00f3w. Dokumentacj\u0119 Reacta znajdziecie TUTAJ<\/a>.<\/p>\n

React oferuje podej\u015bcie wykorzystuj\u0105ce reu\u017cywalne komponenty. To elementy zawieraj\u0105ce w jednym miejscu zar\u00f3wno cz\u0119\u015b\u0107 wizualn\u0105, kt\u00f3ra ma si\u0119 wy\u015bwietli\u0107 np. w przegl\u0105darce, jak i logik\u0119, kt\u00f3r\u0105 ma wykonywa\u0107.<\/p>\n

Dzi\u0119ki temu podej\u015bciu mo\u017cna swobodnie powiedzie\u0107, \u017ce aplikacja sk\u0142ada si\u0119 z \u201cklock\u00f3w\u201d. Mo\u017cemy wykorzystywa\u0107 zar\u00f3wno \u201cklocki\u201d przygotowane przez kogo\u015b innego, jak i tworzy\u0107 w\u0142asne.<\/p>\n

B\u0142yskawiczne i bezproblemowe tworzenie aplikacji to dwa przymiotniki, kt\u00f3re idealnie opisuj\u0105 Reacta. Pocz\u0105tkuj\u0105cy developer mo\u017ce spotka\u0107 si\u0119 jednak z pewnymi trudno\u015bciami, gdy spr\u00f3buje zaimplementowa\u0107 standardow\u0105 funkcjonalno\u015b\u0107 znan\u0105 z innych framework\u00f3w. Jak pisali\u015bmy wy\u017cej, React ma tylko jedno zadanie – u\u0142atwia\u0107 tworzenie interfejs\u00f3w u\u017cytkownika. Nie ma za to wbudowanych takich rozwi\u0105za\u0144, jak router (czyli zarz\u0105dzanie wy\u015bwietlaniem odpowiednich widok\u00f3w dla odpowiednich \u015bcie\u017cek URL), czy serwis HTTP (umo\u017cliwiaj\u0105cy wymienianie danych z innymi serwerami czy baz\u0105 danych).<\/p>\n

Wszystkie powy\u017csze elementy i znacznie wi\u0119cej mo\u017cna oczywi\u015bcie do Reacta do\u0142\u0105czy\u0107 za pomoc\u0105 modu\u0142\u00f3w, jakie oferuje NPM (manager pakiet\u00f3w) i sam j\u0119zyk JavaScript. \u0141atwo\u015b\u0107, z jak\u0105 mo\u017cna dodawa\u0107 kolejne modu\u0142y\/biblioteki do Reacta, a tak\u017ce ogromna spo\u0142eczno\u015b\u0107 wsp\u00f3\u0142tw\u00f3rc\u00f3w powoduje, \u017ce jest ich niesamowicie du\u017co. Z tego powodu czasami ci\u0119\u017cko zorientowa\u0107 si\u0119, kt\u00f3re z zewn\u0119trznych rozwi\u0105za\u0144 b\u0119dzie dla nas najlepsze.<\/p>\n

My\u015blisz o zmianie zawodu i wej\u015bciu do \u015bwiata IT? Sprawd\u017a nadchodz\u0105cy dzienny kurs front-end developer w Gda\u0144sku<\/a><\/span><\/div>\n

Znane biblioteki React<\/h2>\n

1. React Router \u2013 routing w aplikacji<\/h3>\n

https:\/\/reacttraining.com\/react-router\/<\/span><\/a><\/p>\n

Pierwsza i prawdopodobnie najwa\u017cniejsza dodatkowa biblioteka do Reacta to react-router. Umo\u017cliwia ona wy\u015bwietlanie odpowiednich cz\u0119\u015bci aplikacji dla odpowiednich \u015bcie\u017cek w adresie URL.  W wielu frameworkach znajduje si\u0119 od razu po \u201ewyj\u0119ciu z pude\u0142ka\u201d, czyli instalacji. W React\u2019cie musi by\u0107 dodana z zewn\u0105trz. Korzystanie z React Routera jest w\u015br\u00f3d deweloper\u00f3w uznawane wr\u0119cz za standard i mo\u017cna go spotka\u0107 w ogromnej liczbie aplikacji.<\/p>\n

React Router oferuje komponenty-\u015bcie\u017cki, kt\u00f3re zostan\u0105 wy\u015bwietlone tylko gdy \u015bcie\u017cka z adresu URL b\u0119dzie si\u0119 zgadza\u0142a z t\u0105 podan\u0105 w komponencie.<\/p>\n

2. Redux  – zarz\u0105dzanie stanem aplikacji<\/h3>\n

https:\/\/redux.js.org\/<\/span><\/a><\/p>\n

Redux jest bibliotek\u0105 tak zakorzenion\u0105 w \u015bwiadomo\u015bci programist\u00f3w pisz\u0105cych w React, \u017ce nie mo\u017cna o niej nie wspomnie\u0107.<\/p>\n

Warto jednak wiedzie\u0107, \u017ce nie jest to oficjalna biblioteka stworzona przez Facebooka. Nie jest te\u017c integraln\u0105 cz\u0119\u015bci\u0105 Reacta mimo, \u017ce w wielu poradnikach jest tak prezentowana.<\/p>\n

Redux u\u0142atwia nam trudne zadanie, jakim jest zarz\u0105dzanie stanem aplikacji, czyli wszystkimi danymi jakich aplikacja u\u017cywa aby zaoferowa\u0107 swoje funkcjonalno\u015bci. Oferuje on tak zwany store, czyli jedno miejsce, w kt\u00f3rym te dane s\u0105 przechowywane i jednokierunkowy przep\u0142yw zmian tych danych. Je\u015bli jakie\u015b dane maj\u0105 si\u0119 zmieni\u0107, musz\u0105 zosta\u0107 zmienione w\u0142a\u015bnie w storze, a nast\u0119pnie komponenty zostan\u0105 poinformowane o tej zmianie, by zaktualizowa\u0107 tre\u015bci wy\u015bwietlane u\u017cytkownikowi. U\u017cywaj\u0105c Reduxa, nie ma innej drogi by zmieni\u0107 dane w aplikacji. Jako deweloperzy mo\u017cemy wi\u0119c by\u0107 pewni, \u017ce ka\u017cda cz\u0119\u015b\u0107 danych pochodzi ze stora i jest zarz\u0105dzana przez Reduxa. Takie rozwi\u0105zanie u\u0142atwia poszukiwanie potencjalnych b\u0142\u0119d\u00f3w do (upraszczaj\u0105c) jednego miejsca.<\/p>\n

U\u017cycie Reduxa jest jednak stosunkowo skomplikowane i wymaga wprowadzenia sporej ilo\u015bci dodatkowego kodu. Z tego powodu u\u017cywany on jest w rozbudowanych aplikacjach wymagaj\u0105cych zarz\u0105dzania danymi ze wzgl\u0119du na wi\u0119ksz\u0105 przejrzysto\u015b\u0107 takiego rozwi\u0105zania. Nie ma wi\u0119kszego powodu do u\u017cywania Reduxa w aplikacjach pokroju prostej \u201cto do\u201d listy.<\/p>\n

3. Redux Thunk \u2013 asynchroniczne zapytania w aplikacji<\/h3>\n

https:\/\/github.com\/reduxjs\/redux-thunk<\/span><\/a><\/p>\n

Redux sam z siebie nie jest w stanie obs\u0142ugiwa\u0107 operacji innych ni\u017c synchroniczne – czyli (upraszczaj\u0105c) takie, na kt\u00f3rych efekt nie trzeba czeka\u0107. Powoduje to, \u017ce sam Redux nie jest w stanie wykona\u0107 nawet prostego zapytania do innego serwera (gdzie oczywi\u015bcie trzeba chwil\u0119 poczeka\u0107 na odpowied\u017a). Rozwi\u0105zuje ten problem redux-thunk. Jest to middleware (czyli wtyczka-po\u015brednik) dla Redux\u2019a , kt\u00f3ry dodaje do Reduxa mo\u017cliwo\u015b\u0107 wykonywania asynchronicznych akcji.<\/p>\n

4. React Intl \u2013 internacjonalizacja aplikacji<\/h3>\n

https:\/\/github.com\/yahoo\/react-intl<\/span><\/a><\/p>\n

Niezwyk\u0142a biblioteka, kt\u00f3ra znacz\u0105co u\u0142atwi nam przygotowanie aplikacji dla u\u017cytkownik\u00f3w innych narodowo\u015bci. Posiada narz\u0119dzia do formatowania dat, numer\u00f3w, wyraz\u00f3w oraz wspiera translacj\u0119 wed\u0142ug standardu i18n. Ciekawostka – i18n to skr\u00f3t od s\u0142owa internationalization, gdzie pomi\u0119dzy i a n jest dok\u0142adnie 18 innych liter :).<\/p>\n

React-Intl rozwi\u0105zuje oczywiste problemy, jak t\u0142umaczenia wszystkich tre\u015bci w aplikacji, ale tak\u017ce mniej oczywiste jak format wy\u015bwietlania daty i czasu kt\u00f3re r\u00f3\u017cni\u0105 si\u0119 pomi\u0119dzy kulturami.<\/p>\n

Przeczytaj tak\u017ce:
\nJak zosta\u0107 front-end developerem?<\/a><\/span><\/div>\n

Podsumowanie<\/h2>\n

Powy\u017csze biblioteki znacz\u0105co u\u0142atwi\u0105 Wam pierwsze kroki w ekosystemie Reacta i znacz\u0105co przyspiesz\u0105 Wasz\u0105 prac\u0119. React sam w sobie jest, jak wspominali\u015bmy na pocz\u0105tku, zaledwie ma\u0142\u0105 bibliotek\u0105. Ale React + React Router + Redux jako zestaw, w naszej opinii mog\u0105 swobodnie by\u0107 nazywanym pe\u0142noprawnym frameworkiem. Mo\u017cemy wr\u0119cz korzysta\u0107 z gotowych starter-kit\u00f3w oferuj\u0105cych ju\u017c zainstalowane wszystkie powy\u017csze biblioteki (np. https:\/\/github.com\/notrab\/create-react-app-redux).<\/p>\n

Przy pisaniu aplikacji nie zapominajmy jednak, \u017ce React to biblioteka napisana w JavaScript. Bez problemu mo\u017cemy wi\u0119c korzysta\u0107 z dobrze znanych narz\u0119dzi, takich jak:<\/p>\n