Kaip išmokti reaguoti - kelio planas nuo pradedančiųjų iki pažengusių

Ei žmonės!

Šis vadovas skirtas žmonėms, pradedantiems „React“. Kiekviename skyriuje kruopščiai kuravau geriausius vaizdo įrašus ir straipsnius, kad būtų lengviau mokytis.

Pastaba: nesu susietas nei su viena iš toliau paminėtų svetainių. Tai grynai mano požiūris.

Būtinos sąlygos

  1. Pagrindinės žinios apie HTML, CSS ir „JavaScript“.
  2. Pagrindinis ES6 savybių supratimas. Čia yra mano straipsnis, paaiškinantis kai kurias ES6 funkcijas.

    Norėdami pradėti, turėtumėte bent jau žinoti šias funkcijas:

    1. Leisk

    2. Konst

    3. Rodyklių funkcijos

    4. Importas ir eksportas

    5. Klasės

  3. Pagrindinis supratimas, kaip naudoti npm.

Darbo pradžia

Praktikai galite naudoti internetinius kodų redaktorius arba naudoti „Create React“ programą.

Aš sukūriau „JSFiddle“ ir „Codepen“ kūrimo aplinką.

Norėdami suprasti visus „React“ pagrindus, galite pradėti nuo šių pamokų:

Reaguokite į oficialius dokumentus

Kento C. Doddso „React“ vadovas pradedantiesiems

„Samer Buna“ reakcijos pagrindai

Iki šiol turėtumėte turėti pagrindinę „React“ pagrindų idėją. Pakanka pradėti kurti paprastas žiniatinklio programas „React“.

Pažvelkite į oficialią „React“ pamoką:

Oficiali „React“ pamoka

Tai gerai parašytas straipsnis, apimantis „React“ pagrindus. Taip pat labai aiškiai paaiškinamos konkrečios temos.

Paskutinis, bet ne mažiau svarbus dalykas - sužinokite, kaip prisijungti prie API naudojant „React“ programas:

Gaunamas API su React.js, Ethan Jarrell

Pradėkite kurti kai kuriuos projektus

  1. Paprasta „todo“ programa
  2. Paprasta skaičiuoklės programa
  3. Sukurkite pirkinių krepšelį
  4. Rodykite „GitHub“ naudotojų statistiką naudodami „GitHub“ API

„React Router“

„React Router“ padeda jums sukurti maršrutus į jūsų vieno puslapio programas. Tai labai galinga ir lengva naudoti su jūsų „React“ programa.

Pradėti:

„React Router“ pamoka, kurią pateikė Paulas Shermanas

„React Router“ ir „Intro“ į SPA „Learn Code Academy“

„React“ programų nukreipimas pagal „Scotch.io“

Šių straipsnių yra daugiau nei pakankamai, kad galėtumėte pradėti naudoti „React“ maršrutą.

Projektai

  1. Paprasta CURD programa
  2. „Hacker News“ klonas

Jei jus tikrai domina daug sužinoti apie maršrutizatorių, peržiūrėkite šį vadovą:

Išsamus „React Router“ vadovas pateikiamas „React Training“

Internetinė pakuotė

„Webpack“ yra žinomas „JavaScript“ modulių paketas. „Webpack“ padeda išlaikyti priklausomybę kaip statinius jūsų projekto failus, kad kūrėjams nereikėtų to daryti.

„Webpack“ taip pat yra su krautuvais. Krautuvai padeda atlikti konkrečias užduotis, susijusias su jūsų projektu.

Norėdami sužinoti daugiau apie „Webpack“, vadovaukitės šiomis pamokomis.

Kada ir kodėl naudoti „Andrew Pack“ „Webpack“

„Web Code“ mokymo programa, kurią sukūrė „Learn Code Academy“

Norėdami nustatyti vietinę „React“ aplinką naudodami „Webpack“, galite kreiptis į šį „GitHub“ repo:

„React SPA“ šabloną pateikė Hanifas Roshanas

Manau, kad pirmiau pateiktų mokymo programų pakanka norint pradėti naudotis „Webpack“. Tačiau norėdami gauti išsamių žinių, vadovaukitės šiais vadovais:

„SurviveJS“ internetinės pakuotės pristatymas

„Webpack“ oficialūs dokumentai

Serverio atvaizdavimas

Serverio atvaizdavimas yra viena šauniausių „React“ funkcijų. Jis gali būti naudojamas su bet kuria iš išorinių technologijų.

„Server Side Rendering“ (SSR) „React“ padeda jums sukurti komponentus serveryje ir perteikti juos kaip HTML jūsų naršyklėje. Kai visi „JavaScript“ moduliai atsisiunčiami į naršyklę, „React“ eina į sceną. Paprasta!

Pirmiausia pažvelkite į React-DOM API:

„React-DOM“ API „React“

Jei norite gauti išsamių žinių, vadovaukitės žemiau pateiktomis instrukcijomis:

Reaguokite į Tylerio McGinniso serverio atvaizdavimą

Reaguokite maršrutizatoriaus serverio atvaizdavimą pagal Roilan Salinas

„React Server“ pusės pateikimo vadovas - Dennisas Brotzky

Redux

„Redux“ yra „JavaScript“ biblioteka, sukurta palaikyti programos būsenas. Kai kuriate sudėtingą programą, ji pridės pridėtinių lėšų, kad būtų galima valdyti komponentų būsenas. „Redux“ padeda išsaugoti visas būsenas viename šaltinyje. Ir, žinoma, „React“ puikiai žaidžia su „Redux“ :)

Pradėti:

„Redux“ pamokasukūrė „Learn Code Academy“

„Redux“ pamoka pradedantiesiems Valentino Gagliardi

Reaguokite į „Redux“ CSS gudrybėmis

Šios pamokos yra daugiau nei pakankamos norint pradėti naudotis „Redux“. Tačiau negaliu nepaminėti ir toliau pateiktos pamokos. Tai verta :)

Darbą su „Redux“ pradėjo Danas Abramovas

Ištekliai

Nuostabus reakcija

Jei jums patinka straipsnis, nepamirškite juo pasidalinti :)