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

Stawiasz pierwsze kroki w ekosystemie Reacta? A może początki masz już za sobą, ale część zagadnień jest dla Ciebie problematyczna? Tak się składa, że w czasie wolnym od tworzenia kolejnych komponentów, udało mi się odszukać wiele wartościowych materiałów. Pozwolą Ci na skuteczną naukę, niezależnie od dotychczasowego poziomu umiejętności.

Przygotowaną przeze mnie listę podzieliłem na dwie części. Skąd taki pomysł? Już tłumaczę.

Pierwsza część jest przeznaczona dla osób, które dopiero zaczynają swoją przygodę z Reactem i próbują sobie odpowiedzieć na pytanie „jak ogarnąć tę kobyłę (i nie stracić zmysłów w międzyczasie)?”.

W drugiej części znajdziecie artykuły związane z konkretnymi zagadnieniami. Tutaj myślałem przede wszystkim o osobach, które pierwsze kroki mają za sobą i chcą ugruntować swoją wiedzę w określonym temacie. Wybierałem przede wszystkim te pozycje, które mają do zaoferowania coś więcej niż absolutne podstawy.

Spis treści

  1. Strefa początkujacego
  2. Szwedzki stół

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.

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

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.

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

Architektura

Cykl życia

Czysty kod

Formularze

Komponenty

Optymalizacja

Projektowanie

Rady dla średniozaawansowanych

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

Struktura projektu i konwencje nazewnicze

Stylowanie

Testowanie

Thinking in React

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

Wyświetlanie warunkowe

Wzorce

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

Higher Order Components

Render props

Context API

Bonus: Inne kompilacje

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

Podsumowanie

Trzymam kciuki, żeby materiały z listy pomogły Ci ogarnąć Reacta w ekspresowym tempie :).

Update: aby ułatwić Ci to zadanie, 9 maja 2019 roku zaktualizowałem ten wpis o 12 nowych źródeł. Enjoy!

Tak jak pisałem na początku, chciałbym, aby ta lista stała się kompletną bazą wiedzy, przydatną dla każdego, niezależnie od poziomu umiejętności. Jestem przekonany, że na odkrycie czeka jeszcze wiele wartościowych treści. Jeżeli wiesz coś na ten temat, podziel się swoimi ulubionymi odnośnikami w komentarzach. Chętnie wzbogacę wpis Twoimi propozycjami.

Podobał Ci się dzisiejszy artykuł? Udostępnij go w Twoich ulubionych mediach społecznościowych. Może znajdzie się ktoś, dla kogo również będzie wartościowy.

Bądź na bieżąco. Wystarczy polubić fanpage AlgoSmart na fejsie, obserwować mój profil na Twitterze i regularnie odwiedzać portal Polski Front-end.

Do następnego!

Zdjęcie tytułowe autorstwa: unsplash-logoBecca Tapert

Marcin Czarkowski

Cześć! Ja nazywam się Marcin Czarkowski, a to jest AlgoSmart - blog, na którym dzielę się wiedzą o ReactJS, JavaScript oraz CSS. Od niedawna tworzę materiały na YouTube, warto rzucić okiem :).

  • Elżbieta Szulc

    Dzięki za tą solidną dawkę materiałów 🙂