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, Serverside Rendering – ciężko nie czuć się przytłoczonym taką liczbą zagadnień, które przewijają się w ofertach pracy na stanowisko React Developera. Poniższe artykuły pozwolą Ci rozplanować naukę z głową, zaoszczędzisz sobie nerwów i przyspieszysz cały proces.

Kursy

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

  • 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.
  • 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.

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

  • 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ł ;).
  • 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.
  • Type of Web – kurs Reacta od podstaw liczący przeszło 30 wpisów. Nadal aktualizowany. Warto śledzić.
  • 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.

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 :).

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 🙂