Kuinka oppia reagoimaan - tiekartta aloittelijasta edistyneeseen

Hei tyypit!

Tämä opas on tarkoitettu ihmisille, jotka aloittavat React. Olen huolellisesti kuratoinut kunkin jakson parhaat videot ja artikkelit oppimisen helpottamiseksi.

Huomaa: Minua ei ole liitetty mihinkään alla mainituista verkkosivustoista. Se on puhtaasti minun näkemykseni.

Edellytykset

  1. Perustiedot HTML: stä, CSS: stä ja JavaScriptistä.
  2. Perustiedot ES6-ominaisuuksista. Tässä artikkelini selittää joitain ES6-ominaisuuksia.

    Aloittaaksesi sinun tulee tietää ainakin seuraavat ominaisuudet:

    1. Anna

    2. Vakiintunut

    3. Nuolitoiminnot

    4. Tuonti ja vienti

    5. Luokat

  3. Perustiedot npm: n käytöstä.

Päästä alkuun

Voit käyttää harjoittelua online-koodieditorilla tai käyttää Create React -sovellusta.

Olen määrittänyt kehitysympäristön JSFiddlelle ja Codepeniin.

Voit ymmärtää kaikki Reactin perusteet aloittamalla seuraavista opetusohjelmista:

React virallinen dokumentaatio React

Kent C.Doddsin aloittelijoiden opas reaktioon

Reagoinnin perusteet, Samer Buna

Tähän mennessä sinulla pitäisi olla perusajatus Reactin perusteista. Riittää, kun aloitat yksinkertaisten verkkosovellusten kehittämisen Reactissa.

Katsokaa nyt Reactin virallista opetusohjelmaa:

React Reactin virallinen opetusohjelma

Se on hyvin kirjoitettu artikkeli, joka kattaa Reactin perusteet. Ja se selittää myös erityiset aiheet hyvin selkeästi.

Viimeisenä mutta ei vähäisimpänä, oppia luomaan yhteys sovellusliittymiin React-sovelluksilla:

Haetaan sovellusliittymää React.js: n avulla Ethan Jarrell

Aloita joidenkin projektien rakentaminen

  1. Yksinkertainen todosovellus
  2. Yksinkertainen laskinsovellus
  3. Rakenna ostoskori
  4. Näytä GitHub-käyttäjän tilastot GitHub-sovellusliittymän avulla

Reagoi reititin

React Router auttaa sinua luomaan reittejä yhden sivun sovelluksiisi. Se on erittäin tehokas ja helppo käyttää React-sovelluksen kanssa.

Aloittaminen:

React Router -opetusohjelma, jonka on kirjoittanut Paul Sherman

Reagoi reititin ja intro SPA: han, jonka tarjoaa Learn Code Academy

React-sovellusten reitittäminen sivustolta Scotch.io

Nämä artikkelit ovat enemmän kuin tarpeeksi, jotta voit aloittaa React-reitityksen.

Projektit

  1. Yksinkertainen CURD-sovellus
  2. Hacker News -klooni

Jos olet todella kiinnostunut oppimaan paljon reitittimestä, tutustu seuraavaan oppaaseen:

React Router täydellinen opas React Training -sivustolla

Webpack

Webpack on kuuluisa JavaScript-moduulipaketti. Webpack auttaa ylläpitämään riippuvuuksia projektisi staattisina tiedostoina, joten kehittäjien ei tarvitse tehdä sitä.

Webpackissa on myös kuormaajat. Kuormaajat auttavat suorittamaan tiettyjä tehtäviä projektisi ympärillä.

Saat lisätietoja Webpackista seuraamalla seuraavia opetusohjelmia.

Milloin ja miksi käyttää Andrew Rayn Webpackia

Opi Web-paketti -opetusohjelma Learn Code Academy

Voit määrittää paikallisen React-ympäristön Webpackin avulla viittaamalla seuraavaan GitHub-repoon:

Reagoi SPA-malliin, jonka on kirjoittanut Hanif Roshan

Mielestäni yllä olevat opetusohjelmat ovat riittäviä Webpackin käytön aloittamiseen. Perusteellisen tiedon saamiseksi voit kuitenkin käyttää seuraavia oppaita:

SurviveJS: n webpack-esittely

Webpackin viralliset asiakirjat

Palvelimen hahmontaminen

Palvelimen renderointi on yksi Reactin hienoimmista ominaisuuksista. Sitä voidaan käyttää minkä tahansa taustajärjestelmän kanssa.

React-palvelimen puolen renderöinti (SSR) auttaa sinua luomaan komponentteja palvelimeen ja hahmonnamaan ne HTML-muodossa selaimessasi. Ja kun kaikki JavaScript-moduulit ladataan selaimeen, React astuu vaiheeseen. Yksinkertainen!

Ensinnäkin, katso React-DOM-sovellusliittymä:

React-DOM-sovellusliittymä, React

Noudata alla olevia oppaita saadaksesi syvällistä tietoa:

Reagoi palvelimen renderointi Tyler McGinnisin toimesta

Reagoi reititinpalvelimen renderointi Roilan Salinasin toimesta

React Server -puolen renderointiopas, kirjoittanut Dennis Brotzky

Redux

Redux on JavaScript-kirjasto, joka on kehitetty sovellustilojen ylläpitoon. Kun rakennat monimutkaista sovellusta, se lisää yleiskustannuksia komponenttien tilojen hallintaan. Redux auttaa sinua tallentamaan kaikki tilasi yhteen lähteeseen. Ja tietysti, React pelaa hyvin Reduxin kanssa :)

Aloittaminen:

Redux-opetusohjelmakirjoittanut Learn Code Academy

Redux-opetus aloittelijoille, Valentino Gagliardi

Reagoi Redux CSS-temppujen avulla

Nämä oppaat ovat enemmän kuin tarpeeksi Reduxin käytön aloittamiseen. En kuitenkaan voi olla vastustamatta myöskään alla olevan opetusohjelman mainitsemista. Se on sen arvoista :)

Dan Abramovin aloittaminen Reduxin kanssa

Resurssit

Mahtava reaktio

Jos pidät artikkelista, älä unohda jakaa sitä :)