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:
😀
Trochę informacji na temat HTML5, CSS oraz JavaScriptu znajdziesz na blogu [tagi:
Co dalej?
- Node
- NPM (Node Packeged Module) – co to jest? What is npm? albo po polsku: Co to jest NPM? na blogu Jakuba Gutkowskiego
- Webpack
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?
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?
Dla informacji – to strona Airbnb.
Inne duże strony korzystające z React’a?
- 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.
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 😉
