Ten artykuł jest częścią serii Daj się poznać! (5 / 5)

W ramach tematów technicznych chciałabym Wam przybliżyć technologie, frameworki, informacje, które prowadzą do stworzenia aplikacji, nad którą pracuje. Opiszę też pewnie niektóre fragmenty kodu i rezultaty jakie dają. Zobaczymy 🙂

Pierwszy wpis w temacie będzie dotyczył React’a. Co znajdziecie w tym artykule?

  • Co warto znać zanim w ogóle weźmiesz się za naukę React’a?
  • Jak ja uczyłam się React’a? Przydatne strony, materiały, kursy.
  • Przykład pierwszego komponentu, nad którym pracowałam (kod).
  • React JS & Codepen – co należy podpiąć, by móc tam ćwiczyć.
  • Przydatne wtyczki i jak działają.
  • Node vs. WebPack – z jakim problemem możesz się spotkać i jak go rozwiązać.

Jeśli jakieś rozwiązanie zastosowane w aplikacji szczególnie Was zainteresowało – dawajcie znać w komentarzach.

Chciałam nazwać ten artykuł „React od zera”, ale uznałam, że tytuł mógłby wprowadzać w błąd. Ogólnie zanim weźmiesz się za naukę jakiegokolwiek framework’a musisz znać pare innych technologii.

To nie jest tak, że pewnego dnia stwierdzasz „chcę być programistą, chcę stworzyć aplikację w React”, siadasz i robisz. Tak się nie da. No, dobra, da się. Wszystko się da. Ale może być to o wiele boleśniejsza droga, którą ciężko Ci będzie zakończyć sukcesem.

Od czego powinieneś zacząć?

Wymagania wstępne

MUST HAVE:

  • HTML5
  • CSS3
  • JavaScript

To taka podstawa. Bez tego ani rusz! Tj. na pewno nie rusz React’a.

Ogólnie, CSS3 i JavaScript to miejsce gdzie powinieneś zostać dłużej. Nie opłaca się szybko przechodzić akurat przez te podstawy. Opłaca się naprawdę dobrze je ogarnąć. Chciałabym powiedzieć, że CSS jest prosty i zajmie Ci chwilę. Ogólnie podstawy rzeczywiście nie tak ciężko ogarnąć, ale praca z nim później wygląda mniej więcej w ten sposób:

via GIPHY

😀

Trochę informacji na temat HTML5, CSS oraz JavaScriptu znajdziesz na blogu [tagi:

Co dalej?

 

Webpack’a nie znałam, ale korzystałam już z Grunt’a i Gulp’a, więc dużo czasu nie musiałam mu (jeszcze) poświęcić. Zresztą skorzystałam z gotowej konfiguracji, którą nieznacznie przerobiłam 😉

Oczywiście zdecydowanie polecam również opanować podstawy Git’a – o którym zresztą będę jeszcze pisać. Warto choćby lokalnie przechowywać historię zmian.

W przypadku mojego projektu przydaje się również znajomość nowości wprowadzanych przez ES6. W ogóle zauważyłam, że tutoriale i kursy dzielą się na te pisane zgodnie z ES6 i nie 😛

 

Nauka React’a – moja ścieżka

React jest w ogóle bardzo przyjemny w nauce. Jednak wiem, że miałam o wiele prościej, bo po prostu to nie jest mój pierwszy framework. Trochę ich już przerobiłam.

Naukę React’a zaczęłam od React Tutorials by TheNetNinja. Bardzo prosto wytłumaczone na przykładzie aplikacji Todo. Nawet chwilami zbyt proste 😛

Wcześniej oglądałam kurs na Udemy, którego niestety nie mogę polecić, ponieważ widzę, że nie do końca był trafiony… Ale właśnie tak jest z Udemy – kursy są naprawdę różnej jakości…

Oglądając tutorial od razu wykorzystywałam tą wiedzę praktycznie tworząc swoją aplikację. Ogólnie polecam naukę w praktyce najwcześniej jak się da. Oglądając kursy, tutoriale wszystko wydaje się proste i oczywiste, ale kiedy zaczynasz pisać kod, nagle okazuje się, że to wcale tak proste nie było. Wtedy warto otworzyć jeszcze dwie dodatkowe karty: wyszukiwarkę Google i StackOverflow 😉

W przypadku React’a dość ciekawie wygląda również React JS Tutorial na kanale LearnCode.academy. Sama przerabiałam tam głównie część dotyczącą Redux’a, ale jeśli poprzednie filmiki były równie dobrej jakości – polecam! Kanał oczywiście też.

Od czasu do czasu przydaje się również tutorial na oficjalnej stronie React’a. Dużo artykułów w temacie React’a znajdziesz również na Schotch.io.

Osobiście lubię się uczyć analizując kody aplikacji, zastosowane rozwiązania, itp. Tutaj szukałam inspiracji na Codepen.io. Zresztą sama pierwszy komponent zaczęłam tworzyć na Codepen.

See the Pen My first React Components by Żaneta Jażdżyk (@nettecode) on CodePen.

Niestety dość szybko przerwałam i przeszłam do realizacji rzeczywistego projektu. Tym bardziej, że aplikacji chciałam nadać wygląd zgodny z Material Design. Tutaj trafiłam na Material UI, który łączy React JS + Material Design. Ale o nim będę jeszcze pisać.

Aplikacja trochę się już pozmieniała, ale efekt opublikuje w najbliższym raporcie (wtorek). Podpowiem jednak, że zrzuty ekranu na bieżąco + inne informacje w temacie mojej pracy nad projektem publikuje na Snapchacie oraz w ramach Instagram Stories. Jak mnie możecie obserwować pisałam pod koniec pierwszego artykułu.

Jak wiecie aplikacja wygląda zdecydowanie inaczej niż przedstawiono na powyższym Codepen’ie 😀 A jeśli nie wiecie – zajrzyjcie do poprzedniego raportu.

 

Żeby korzystać z React’a na Codepen trzeba ustawić dwie rzeczy (w Settings dla Pen’a):

  • JavaScript Preprocessor na Babel
  • dodać React i React DOM do External JavaScript

Jak?

react nauka codepen ustawienia

I możecie eksperymentować tworząc swoje pierwsze komponenty 😉

 

Przydatne wtyczki

W temacie React’a polecam również zainstalowanie dwóch wtyczek:

  • React Detector
  • React Dev Tools

 

React Detector

Daje Ci po prostu informację kiedy na danej stronie wykryje obecność React’a. Jak to wygląda?

react nauka detector przykład

Dla informacji – to strona Airbnb.

Inne duże strony korzystające z React’a?

  • Facebook
  • Instagram
  • Netflix
  • Udemy

Ładnie, co? 😉

Link do wtyczki dla Google Chrome

 

React Dev Tools

Dodaje dodatkową kartę do Dev Tools o (oczywistej) nazwie: React. Dzięki czemu możemy podglądać hierarchię komponentów react’owych na stronie + ich własności.

react nauka dev tools

Link do wtyczki dla Google Chrome

 

Pare dodatkowych informacji

React jest odpowiedzialny tylko za widok. Nie jest to framework typu MVC (model-view-controller – przydatne pojęcie, więc jeśli się z nim nie spotkałeś – sprawdź temat!). React to samo V w tym układzie. Czasem to może wystarczyć, ale nie w przypadku aplikacji, którą tworzę. Potrzebowałam brakujących elementów, więc następnym krokiem była dla mnie nauka wzorca Flux oraz jego implementacji – Redux’a. Ale o tym jeszcze napiszę 😉

Trochę artykułów w temacie React JS znajdziecie również na blogu NaFrontendzie, tag: react [PL!].

Nie bazuję na żadnym boilerplate. Tworzyłam konfigurację projektu od zera, podpinając potrzebne elementy.

 

Problemy, z jakimi się spotkałam

Jeśli na potrzeby nauki React’a będziesz instalować Node’a – zainstaluj wersję v6. Node w wersji 7 kłóci się z Webpackiem:

„Note: There are known issues with Node.js v7 and webpack / webpack-dev-server. Please use Node.js v6 for the moment.”

Ponieważ sama miałam wersję v7 musiałam zrobić downgrade. Oczywiście trochę nie nagłowiłam, zanim trafiłam na to rozwiązanie. Bo to nie jest tak, że terminal wyrzucił mi informację „Zmień wersję Node’a!”. Nie… Po prostu instalacja zatrzymywała się w połowie. I teraz sam szukaj problemu. Norma w tej pracy 😉

 

Zapraszam do komentowania. Wszelkie uwagi odnośnie tego, co powinnam, jak powinnam, itp. mile widziane 🙂

Jeśli coś jest niezrozumiałe – również dawaj znać. Wytłumaczę 🙂

A w najbliższy wtorek mniej techniczny raport w temacie co się udało, co się nie udało i co dalej 😉

Series Navigation<< Kobiety & Programowanie – fakty, mity i historie
  • Akataa

    Dobry wpis. Sama powoli zaczynam myśleć nad nauką jakiegoś frameworka, ale jeszcze nie do końca jestem na to gotowa. Właśnie dostałam od kolegi ponoć dobry kurs Reacta, ale chyba jeszcze poćwiczę czysty JS nim się za niego wezmę. Tym bardziej, że dopiero co zaczęłam pracę na froncie i też jest kilka spraw do ogarnięcia, a w pracy głównie klepię HTML i CSS, więc mój JS trochę zaczyna zostawać w tyle. 😛 Ale wpis zapisuję sobie na przyszłość i na pewno do niego wrócę, gdy już postanowię uczyć się Reacta. 🙂

    • Dobry plan 🙂 Zawsze warto jak najlepiej opanować czysty JavaScript. To podstawa 🙂 Dopiero potem można mieszać frameworkami 🙂 React sam w sobie naprawdę nie jest trudny. Bardzo przyjemnie i szybko się w nim piszę. Idea jest świetna i po opanowaniu kilku kwestii można zacząć pisać. Ogólnie zakochałam się 😛 Nie wiem co to będzie jak przyjdzie mi wracać do pracy w Angularze xD
      Powodzenia! I z pracą i z nauką 😉

  • 356eygdgnset

    NPM (Node Packeged Module)

    Ciekawostka na dziś – npm nie jest akronimem, jak wiele osób sądzi.

    https://news.ycombinator.com/item?id=5221911
    https://www.quora.com/I-keep-hearing-NPM-doesnt-stand-for-Node-Package-Manager-what-does-it-stand-for