Kako naučiti reagirati - putokaz od početnika do naprednika

Hej narode!

Ovaj vodič je za ljude koji počinju s Reactom. Pažljivo sam kurirao najbolje videozapise i članke u svakom odjeljku kako bih olakšao učenje.

Napomena: Nisam povezan ni s jednim od dolje spomenutih web mjesta. To je čisto moj pogled.

Preduvjeti

  1. Osnovno znanje HTML-a, CSS-a i JavaScript-a.
  2. Osnovno razumijevanje ES6 značajki. Evo mog članka koji objašnjava neke od ES6 značajki.

    Za početak biste trebali znati barem sljedeće značajke:

    1. Neka

    2. Konst

    3. Funkcije strelice

    4. Uvoz i izvoz

    5. Nastava

  3. Osnovno razumijevanje upotrebe npm-a.

Početak rada

Za vježbanje možete koristiti mrežne urednike koda, a možete i pomoću aplikacije Create React.

Postavio sam razvojno okruženje u JSFiddle i Codepen.

Da biste shvatili sve osnove React-a, možete započeti sa sljedećim vodičima:

React službenu dokumentaciju React

Kent C. Dodds, vodič za početnike za React

Osnove reakcije, Samer Buna

Do sada biste trebali imati osnovnu ideju o osnovama React-a. Dovoljno je započeti s razvojem jednostavnih web aplikacija u Reactu.

Sada pogledajte službeni vodič za React:

React Službeni vodič React-a

To je dobro napisan članak koji pokriva osnove React-a. I također vrlo jasno objašnjava određene teme.

I na kraju, ali ne najmanje važno, naučite kako se povezati s API-jem pomoću React aplikacija:

Dohvaćanje API-ja s React.jsom, Ethan Jarrell

Počnite graditi neke projekte

  1. Jednostavna todo-aplikacija
  2. Jednostavna aplikacija kalkulator
  3. Izgradite košaricu
  4. Prikažite statistiku korisnika GitHub-a pomoću GitHub API-ja

Reakcijski usmjerivač

React Router vam pomaže stvoriti rute do vaših aplikacija na jednoj stranici. Vrlo je moćan i jednostavan za upotrebu s vašom React aplikacijom.

Započeti:

React Router tutorial Paul Shermana

Reagirajte na usmjerivač i uvod u SPA od strane Learn Code Academy

Usmjeravanje React aplikacija tvrtke Scotch.io

Ovi su vam članci više nego dovoljni da započnete s React usmjeravanjem.

Projekti

  1. Jednostavna CURD aplikacija
  2. Klon hakerskih vijesti

Ako ste stvarno zainteresirani za naučiti mnogo o usmjerivaču, pogledajte sljedeći vodič:

Kompletni vodič za React Router tvrtke React Training

Webpack

Webpack je poznati paket JavaScript modula. Webpack vam pomaže da održavate ovisnosti kao statične datoteke za svoj projekt, tako da programeri to ne moraju raditi.

Webpack također dolazi s utovarivačima. Utovarivači pomažu u izvođenju određenih zadataka oko vašeg projekta.

Da biste saznali mnogo više o Webpacku, slijedite sljedeće upute.

Kada i zašto koristiti Webpack Andrewa Raya

Vodič za Webpack od strane Learn Code Academy

Da biste postavili svoje lokalno React okruženje pomoću Webpack-a, možete pogledati sljedeći GitHubov repo:

Predložak React SPA Hanifa Roshana

Mislim da su gornji vodiči dovoljni za početak rada s Webpackom. Međutim, da biste stekli detaljno znanje, možete se poslužiti sljedećim vodičima:

Uvod u webpack od strane SurviveJS

Webpack službeni dokumenti

Prikaz poslužitelja

Renderiranje poslužitelja jedna je od najzgodnijih značajki Reacta. Može se koristiti s bilo kojom pozadinskom tehnologijom.

Prikazivanje na strani poslužitelja (SSR) u Reactu pomaže vam stvoriti komponente na poslužitelju i prikazati ih kao HTML u vašem pregledniku. A kada se svi JavaScript moduli preuzmu u preglednik, React stupa na scenu. Jednostavan!

Prije svega, pogledajte React-DOM API:

React-DOM API tvrtke React

Slijedite upute u nastavku da biste stekli detaljno znanje:

Reagiranje generiranja poslužitelja, Tyler McGinnis

Reagiranje generiranja poslužitelja usmjerivača Roilana Salinasa

Vodič za prikazivanje na bočnoj strani poslužitelja Denisa Brotzkyja

Redux

Redux je JavaScript knjižnica razvijena za održavanje stanja aplikacija. Kada gradite složenu aplikaciju, ona će dodati opće troškove za upravljanje stanjima u svim komponentama. Redux vam pomaže da sva svoja stanja pohranite u jedan izvor. I naravno, React se dobro poigrava s Reduxom :)

Započeti:

Redux tutorialod Learn Code Academy

Redux tutorial za početnike Valentina Gagliardija

Reagirajte Redux pomoću CSS trikova

Ovi su vodiči više nego dovoljni za početak rada s Reduxom. Međutim, ne mogu odoljeti da ne spomenem ni donji vodič. Vrijedno je toga :)

Početak rada s Reduxom, Dan Abramov

Resursi

Strašan React

Ako vam se sviđa članak, ne zaboravite ga podijeliti :)