Lista materiałów, których potrzebujesz do skutecznej nauki Reacta

Strefa początkującego

Jak zaplanować rozwój umiejętności

React, Redux, ReactRouter, Stylowanie, Testowanie, Server Side Rendering – ciężko nie czuć się przytłoczonym taką liczbą zagadnień, które przewijają się w ofertach pracy na stanowisko React Developera.

Ale pamiętaj, że warto zacząć od solidnego opanowania podstaw:

• React – Getting Started – Nie ma na to lepszego miejsca niż dokumentacja Reacta. Łączy w sobie przystępność a jednocześnie unika skrótów przy wyjaśnianiu kluczowych pojęć dla poprawnego „myślenia w Reactcie” (co często jest bolączką kursów).

Po lekturze dokumentacji i możesz przejść do artykułów pozwolą Ci rozplanować naukę z głową, zaoszczędzisz sobie nerwów i przyspieszysz cały proces.

• React Developer Roadmap – drogowskaz umiejętności, które powinieneś opanować na swojej drodze do mistrzostwa.
• How to learn React.js in 2019 – świetnie przygotowany plan nauki, możesz go traktować jako główny drogowskaz. Autor rekomenduje wiele metod nauki, które możesz połączyć dla otrzymania najlepszych rezultatów oraz konkretne materiały dla każdej z metod.
• React HowTo: Your guide to the (sometimes overwhelming!) React ecosystem. – dobre uzupełnienie dla poprzedniego planu w zakresie tego, czym się zająć po opanowaniu Reacta i Reduxa.
• 5 practical tips to finally learn React in 2018 – przydatne rady, które pozwolą Ci ominąć pułapki, w które wpadają początkujący entuzjaści Reacta

Kursy

Mam trzy rekomendacje w zależności od preferencji co do formy: video lub książka.

• React 16 – The Complete Guide (incl. React Router 4 & Redux) – kurs video, z którego uczyłem się Reacta i Reduxa. Polega na stopniowym rozwijaniu aplikacji do projektowania burgerów (mniam!). Max dobrze radzi sobie z tłumaczeniem kluczowych zagadnień, wspomaga się czytelnymi diagramami. Dla mnie super.
• Modern React with Redux [2019 Update] – kurs od podstaw autorstwa Stephana Gridera. Uczyłem się od niego zaawansowanego Reduxa. Jego content jest najwyższej klasy, często go aktualizuje. W jego kursowym portfolio znajdziesz praktycznie wszystko czego mógłbyś chcieć się nauczyć jako adept Reacta.
• Road to learn React – książka autorstwa Robina Wierucha. Opisuje proces budowania klona HackerNews od podstaw. Zawiera zadania i odnośniki do materiałów dodatkowych.

Rady dla początkujących

• I wish I knew these before diving into React – co często umyka początkującym, a jest kluczowe do uczynienia postępów?
• 9 things every React.js beginner should know

Pomysły na side-projecty

Najlepszym sposobem na naukę jest ciekawy projekt, który zainspiruje Cię do pobrudzenia sobie rąk i przekuje teorię w praktykę. Jeżeli brak Ci zajawki, to warto przejrzeć propozycje z tych list. Na pewno znajdziesz coś, co zainspiruje Cię do pracy.

• 10 React Starter Project Ideas to Get You Coding
• Every time you build a to-do list app, a puppy ? dies ?
• The secret to being a top developer is building things! Here’s a list of fun apps to build! – stąd wziałem pomysł na serię Pierwszy Projekt w ReactJS 😉

Wyzwania

Jeżeli sam side-project nie zaspokaja Twoich potrzeb na praktykę, możesz skorzystać z posiłków w postaci tych wyzwań.

• React.js koans – nauka Reacta od podstaw, jedyne, czego potrzebujesz, to znajomość ES6.
• FreeCodeCamp – React
• React DailyUI – ucz się Reacta poprzez odtwarzanie zaprezentowanych komponentów. Większość z nich przyjdzie Ci kiedyś stworzyć w pracy/przy side-projectach, więc warto.

Blogi

Po polsku

• AlgoSmart – ;)! Dokumentowałem na blogu swoje przygotowania oraz samą naukę Reacta. Wszystkie materiały powstały z myślą o osobach, które postawiły sobie ten sam cel. Dzięki temunie znajdziesz tutaj górnolotnych definicji bez wyjaśnienia ani abstrakcyjnych przykładów, które często odstraszają początkujących. Jednocześnie poruszane tematy starałem się możliwe wyczerpać, bez drogi na skróty.
• Na Frontendzie – bloga Bartka raczej nie muszę nikomu przedstawiać, ale just in case: dużo dobrego zarówno dla początkujących, jak i zaawansowanych React devów.
• Przemuh – React podawany w formie weekly learning logów. Jeżeli interesuje Cię z jakimi problemami radzi sobie React developer w codziennej pracy, blog Przemka jest idealnym miejscem dla Ciebie.

Po angielsku

• Overreacted – blog autorstwa Dana Abramova, frontmana Reacta. Porusza zaawansowaną tematykę ale robi to w sposób budzący mój nieustanny podziw. Obecnie moje ulubione miejsce w Reactowym internecie.
• Kent C. Dodds – kolejny mistrzowski blog dla osób zainteresowanych zaawansowanymi tematami. Dużo o Hooks, testowaniu i zarządzaniu stanem – czyli tematach kluczowych w 2019 roku.
• Baphemot – Bartek Szczeciński przystępnie opisuje kluczowe zagadnienia Reacta oraz omawia kluczowe zmiany wprowadzane w aktualizacjach biblioteki.
• React Kung Fu – blog firmy Arkency, nie jest aktualizowany od jakiegoś czasu, ale posiada ciekawe artykuły analizujące kod źródłowy biblioteki. Ciężko znaleźć drugie takie miejsce w internetach.
• Robin Wieruch – prawdziwa kopalnia wiedzy na dowolny temat związany z Reactem czy Reduxem. Jeżeli chcesz się czegoś dowiedzieć, na 99% Robin napisał już o tym obszerny artykuł ;).

Szwedzki stół

AJAX

• How to make ajax requests in React – tytuł jest trochę mylący, autor koncentruje się na udzielaniu odpowiedzi na pytanie „when & where to make an AJAX request”.
• Śledzenie kursów kryptowalut czyli AJAX w React – porównanie fetch i axios na przykładzie trackera kryptowalut.

Architektura

• The 4 Layers of Single Page Applications You Need to Know

Cykl życia

• Understanding React — Component life-cycle – świetny przegląd metod życia komponentu, z prostymi wskazówkami, jak z nich korzystać i na co uważać.
• Understanding React — React 16.3 + Component life-cycle

– część druga poprzedniego artykułu, zgodna z wersją React 16.3.

• Lifecycle Simulators – symulator metod cyklu życia. Wizualizuje to, co dzieje się wewnatrz komponentu w poszczególnych etapach jego cyklu życia. Niestety nie doczekał się jeszcze aktualizacji do 16.3.
• Interaktywny diagram metod cyklu życia – zgodny z wersją React 16.3, w polskiej wersji językowej.
• The React Life Cycle

– dogłębne spojrzenie na metody cyklu życia, niestety również bez aktualizacji do React 16.3.

Czysty kod

• Clean Code vs. Dirty Code: React Best Practices – zestawienie zapachów kodu z dobrymi praktykami. Namiastka tego, czym mogą cieszyć się programiści Java dzieki książce Clean Code Uncle Boba.
• Our Best Practices for Writing React Components – zbiór najlepszych praktyk dotyczących pisania komponentów. Warto znać, przydają się na każdym kroku (a raczej w każdym komponencie).
• Naming event handlers React – prosty wzorzec nazewnictwa event handlerów.
• Why well-crafted components matter? – jak stosować zasady SOLID przy budowie komponentów.
• How to structure components in React? – jak uzyskać wysoką kohezję i niskie sprzężenie wewnątrz komponentu?
• Learn to spot red flags in your React/JavaScript code
• Clean Code in React – praktyczne oczyszczanie komponentu React zgodnie z heurystykami Uncle Boba.
• Refactoring In React – jak radzić sobie z refaktoryzacją komponentów, pisząc z użyciem techniki TDD?

Formularze

• Learn Raw React: Ridiculously Simple Forms – czy można poradzić sobie z formularzami bez pomocy rozbudowanych bibliotek? Jak najbardziej, na dodatek jest to zadziwiająco proste.
• Controlled and uncontrolled form inputs in React don’t have to be complicated – czym różnią się kontrolowane i niekontrolowane inputy? Jak je obsługiwać?

Komponenty

• React Components, Elements, and Instances – Dan Abramov wyjaśnia różnicę pomiędzy komponentami, elementami i instancjami React.
• Presentational and Container Components – tajniki najpopularniejszego sposobu na podział odpowiedzialności komponentów.

Optymalizacja

• Get rid of some fat from your React production build with Webpack

Projektowanie

• Step by Step Guide To Building React Redux Apps – od pomysłu do aplikacji, czyli jak zaprojektować aplikację w React od podstaw.

Rady dla średniozaawansowanych

• 8 things to learn in React before using Redux – zastanawiasz się, czy opanowałeś Reacta na tyle, żeby zabierać się za Reduxa? Sprawdź, czy znasz 8 zagadnień, bez których ani rusz.

Routing

• React Traning / React Router – jedyne, czego Ci trzeba, żeby poradzić sobie z routingiem w React. Dokumentacja skupia się na przypadkach użycia, dzięki czemu nauka idzie naprawdę szybko.

State

• A Visual Guide to State in React
• Functional setState is the future of React

Struktura projektu i konwencje nazewnicze

• Structuring projects and naming components in React – jak utrzymać porządek w aplikacji wygenerowanej przez create-react-app?
• The 100% correct way to structure a React app (or why there’s no such thing)

Stylowanie

• Stylowanie w React – porównanie najpopularniejszych możliwości stylowania komponentów React na przykładzie trackera kryptowalut.
• CSS Modules – kolejny sposób na style w React – Bartek opowiada o swoich wrażeniach z wykorzystywania CSS Modules. Dowiedz się, jakie problemy zauważył.
• Styled Components – najlepszy sposób na style w ReactJS?
• How to Use CSS Modules with Create React App – jesteś zainteresowany stylowaniem z użyciem CSS Modules w swojej aplikacji wygenerowanej przez create-react-app? Niestety sama instalacja pakietu nie wystarczy.

Testowanie

• The Right Way to Test React Components – ciekawy model, dzięki któremu pisanie testów staje się proste.
• Enzyme : Fast and Simple React Testing

Thinking in React

Każdy język, framework, biblioteka wymaga określonego sposobu myślenia. Jak przestawić się na myślenie w React?

• React philosophy – krótki wpis o tym „jak myśleć w Reactcie”?
• All the fundamental React.js concepts, jammed into this single Medium article – jak myśleć w Reactcie na praktycznych przykładach. Niesamowicie użyteczny artykuł.

Wyświetlanie warunkowe

• All the Conditional Renderings in React – od powszechnie stosowanych ternary, aż po rzadko stosowane (ale jakże użyteczne) enumy.

Wzorce

Chcesz przenieść swój React game na wyższy poziom? Poznaj najpopularniejsze wzorce.

• Playlista Wzorce w React – moja pierwsza seria na YT gdzie w 8 odcinkach omówiłem najważniejsze wzorce sprzed ery React Hooks.
• Evolving Patterns in React
• React Component Patterns
• 10 React mini-patterns
• Advanced React Patterns 1— Let’s talk about Render Props, Function as Child and HOCs
• React Patterns – kompilacja podstawowych wzorców skoncentrowana na praktycznych przykładach.
• React Bits– kompilacja zaawansowanych wzorców skoncentrowana na praktycznych przykładach.
• Advanced React.js Free – kurs video omawiający najpopularniejsze zaawansowane wzorce.

Higher Order Components

• HOC czyli komponenty wyższego rzędu w React
• A gentle Introduction to React’s Higher Order Components

Render props

• Use a Render Prop! – najważniejszy wpis o tym wzorcu, napisany przez jego twórcę Michaela Jacksona (zbieżność imion przypadkowa :D!).
• How To Master Advanced React Design Patterns: Render Props
• Understanding React’s Render Props: a matter of reusability and business logic

Context API

• How To Master Advanced React Design Patterns: Context API
• How to use React Context effectively

Bonus: Inne kompilacje

Moja lista nie jest jedyną, na której możesz szukać smakołyków związanych z Reactem.

• React Redux Links – ogromna kompilacja, znajdziesz tam dosłownie wszystko co kiedykolwiek napisano/powiedziano o Reactcie i jego ekosystemie.
• The most popular React links of 2017 – najpopularniejsze artykuły o React.js z 2017 roku.