Kuidas õppida reageerima - teekaart algajast edasijõudnuni

Hei inimesed!

See juhend on mõeldud inimestele, kes alustavad rakendusega React. Olen õppimise hõlbustamiseks hoolikalt kureerinud igas jaotises olevad parimad videod ja artiklid.

Märkus. Ma pole seotud ühegi allpool nimetatud veebisaidiga. See on puhtalt minu arvamus.

Eeldused

  1. Põhiteadmised HTML-ist, CSS-ist ja JavaScripti kohta.
  2. ES6 põhifunktsioonide mõistmine. Siin on minu artikkel, mis selgitab mõnda ES6 funktsiooni.

    Alustamiseks peaksite teadma vähemalt järgmisi funktsioone:

    1. Lase

    2. Const

    3. Noolefunktsioonid

    4. Import ja eksport

    5. Klassid

  3. Põhiline arusaam npm-i kasutamisest.

Alustamine

Harjutamiseks võite kasutada veebikoodiredaktoreid või kasutada rakendust Loo reageerimine.

Olen seadistanud arenduskeskkonna JSFiddle'is ja Codepenis.

Reactori kõigi põhialuste mõistmiseks võite alustada järgmiste õpetustega:

Reageerige ametlik dokumentatsioon

Reagendi juhend algajatele Kent C. Dodds

Reaktsiooni alused Samer Buna

Nüüdseks peaks teil olema Reacti põhialuste põhiidee. Piisab sellest, kui hakkate Reactis arendama lihtsaid veebirakendusi.

Nüüd vaadake Reacti ametlikku õpetust:

Reageerige React ametlik õpetus

See on hästi kirjutatud artikkel, mis hõlmab Reacti põhialuseid. Ja see selgitab ka konkreetseid teemasid väga selgelt.

Viimasena, kuid mitte vähem tähtsana, õppige, kuidas React rakendustega API-dega ühenduse luua.

API toomine React.js-ga Ethan Jarrelli poolt

Alustage mõne projekti ehitamist

  1. Lihtne Todo-rakendus
  2. Lihtne kalkulaatori rakendus
  3. Ehitage ostukorv
  4. GitHubi kasutajate statistika kuvamine GitHubi API abil

Reageeri ruuter

Reactor Router aitab teil luua marsruute teie ühe lehe rakendustesse. See on teie Reacti rakendusega väga võimas ja hõlpsasti kasutatav.

Alustamiseks toimige järgmiselt.

Reageeri ruuteri õpetus Paul Shermani poolt

Reageerige ruuteriga ja tutvuge SPA-ga Learn Code Academy poolt

React rakenduste marsruutimine saidilt Scotch.io

Need artiklid on enam kui piisavad, et saaksite Reacti marsruutimisega alustada.

Projektid

  1. Lihtne kohupiima rakendus
  2. Häkkeriuudiste kloon

Kui olete tõesti huvitatud ruuteri kohta palju õppimisest, vaadake järgmist juhendit:

React Routeri täielik juhend React Trainingi poolt

Veebipakk

Webpack on kuulus JavaScripti moodulite komplekt. Veebipakk aitab teil säilitada sõltuvusi staatiliste failidena teie projekti jaoks, nii et arendajad ei pea seda tegema.

Webpackiga on kaasas ka laadurid. Laadurid aitavad teie projekti ümber konkreetseid ülesandeid täita.

Veebipaketi kohta palju lisateabe saamiseks järgige järgmisi õpetusi.

Millal ja miks kasutada veebipaketti Andrew Ray

Veebipaketi õpetus: Learn Code Academy

Kohaliku React-keskkonna seadistamiseks Webpacki abil saate vaadata järgmist GitHubi repot:

Reageerige SPA mall, autor Hanif Roshan

Ma arvan, et Webpackiga alustamiseks piisab ülaltoodud õpetustest. Põhjalike teadmiste saamiseks võite siiski viidata järgmistele juhenditele:

Veebipaketi tutvustus SurviveJS poolt

Veebipaketi ametlikud dokumendid

Serveri renderdamine

Serveri renderdamine on üks Reacti lahedamaid funktsioone. Seda saab kasutada mis tahes tausttehnoloogiaga.

Reactori serveripoolne renderdamine (SSR) aitab teil serveris komponente luua ja HTML-is brauseris renderdada. Ja kui kõik JavaScripti moodulid on brauserisse alla laaditud, astub lavale React. Lihtne!

Kõigepealt heitke pilk React-DOM API-le:

React-DOM API React

Põhjalike teadmiste saamiseks järgige alltoodud õpetusi:

Reageerige serveri renderdamine Tyler McGinnise poolt

Ruuterserveri renderdamine Roilan Salinase poolt

Reageerige serveri renderdamise juhend Dennis Brotzky poolt

Redux

Redux on JavaScripti teek, mis on välja töötatud rakenduse olekute säilitamiseks. Kompleksse rakenduse loomisel lisab see komponentide olekute haldamiseks üldkulusid. Redux aitab teil kõik olekud ühte allikasse salvestada. Ja loomulikult mängib React Reduxiga hästi :)

Alustamiseks toimige järgmiselt.

Reduxi õpetusautor: Koodiakadeemia

Reduxi õpetus algajatele Valentino Gagliardi poolt

Reageerige Reduxile CSS-i trikkide abil

Need õpetused on Reduxiga alustamiseks enam kui piisavad. Kuid ma ei saa vastu panna ka allpool toodud õpetuse mainimisele. See on seda väärt :)

Reduxiga alustamine Dan Abramovi poolt

Ressursid

Äge reaktsioon

Kui teile artikkel meeldib, ärge unustage seda jagada :)