Sådan lærer du at reagere - En køreplan fra begynder til avanceret

Hej folkens!

Denne guide er til folk, der starter med React. Jeg har omhyggeligt kurateret de bedste videoer og artikler i hvert afsnit for at gøre det lettere for læring.

Bemærk: Jeg er ikke tilknyttet nogen af ​​nedenstående websteder. Det er rent min opfattelse.

Forudsætninger

  1. Grundlæggende viden om HTML, CSS og JavaScript.
  2. Grundlæggende forståelse af ES6-funktioner. Her er min artikel, der forklarer nogle af ES6-funktionerne.

    For at komme i gang skal du i det mindste kende følgende funktioner:

    1. Lad

    2. Konst

    3. Pilfunktioner

    4. Import og eksport

    5. Klasser

  3. Grundlæggende forståelse af, hvordan man bruger npm.

Kom godt i gang

Du kan bruge online kodeditorer til at øve, eller du kan bruge Opret React-app.

Jeg har oprettet et udviklingsmiljø i JSFiddle og i Codepen.

For at forstå alt det grundlæggende i React kan du starte med følgende tutorials:

Reager officiel dokumentation fra React

Begyndervejledning til at reagere af Kent C. Dodds

Fundamentals of React af Samer Buna

Nu skal du have en grundlæggende idé om det grundlæggende i React. Det er nok at begynde at udvikle enkle webapps i React.

Se nu på den officielle React-tutorial:

Reager Officiel tutorial af React

Det er en velskrevet artikel, der dækker det grundlæggende i React. Og det forklarer også de specifikke emner meget tydeligt.

Sidst men ikke mindst, lær hvordan du opretter forbindelse til API'er med React-apps:

Henter API med React.js af Ethan Jarrell

Begynd at bygge nogle projekter

  1. Enkel todo-app
  2. Enkel lommeregner-app
  3. Byg en indkøbskurv
  4. Vis GitHubs brugerstatistikker ved hjælp af GitHub API

Reager router

React Router hjælper dig med at oprette ruter til dine applikationer med en enkelt side. Det er meget kraftfuldt og let at bruge med din React-applikation.

For at komme i gang:

React Router tutorial af Paul Sherman

Reager Router og introduktion til SPA af Learn Code Academy

Routing React-apps fra Scotch.io

Disse artikler er mere end nok til, at du kan komme i gang med React routing.

Projekter

  1. En simpel CURD-applikation
  2. Hacker News klon

Hvis du virkelig er interesseret i at lære meget om Router, skal du tjekke følgende guide:

React Router komplet guide af React Training

Webpack

Webpack er en berømt JavaScript-bundler. Webpack hjælper dig med at opretholde afhængigheder som statiske filer til dit projekt, så udviklere ikke behøver at gøre det.

Webpack leveres også med læssere. Loaders hjælper med at køre specifikke opgaver omkring dit projekt.

For at lære meget mere om Webpack, følg følgende tutorials.

Hvornår og hvorfor man bruger Webpack af Andrew Ray

Webpack tutorial af Learn Code Academy

For at konfigurere dit lokale React-miljø ved hjælp af Webpack kan du henvise til følgende GitHub repo:

Reager SPA-skabelon af Hanif Roshan

Jeg synes, at ovenstående tutorials er nok til at komme i gang med Webpack. For at få dybdegående viden kan du dog henvise til følgende guider:

Webpack introduktion af SurviveJS

Webpack officielle dokumenter

Servergengivelse

Servergengivelse er en af ​​de sejeste funktioner i React. Det kan bruges med en hvilken som helst af backend-teknologierne.

Server Side Rendering (SSR) i React hjælper dig med at oprette komponenter på serveren og gengive det som HTML i din browser. Og når alle JavaScript-moduler downloades i browseren, tager React scenen. Enkel!

Først og fremmest skal du kigge på React-DOM API:

React-DOM API af React

Og følg nedenstående vejledninger for at få dybdegående viden:

Reager servergengivelse af Tyler McGinnis

Reagér routerservergengivelse af Roilan Salinas

React Server side rendering guide af Dennis Brotzky

Redux

Redux er et JavaScript-bibliotek udviklet til opretholdelse af applikationstilstande. Når du bygger en kompleks applikation, tilføjer den overhead for at administrere tilstande på tværs af komponenter. Redux hjælper dig med at gemme alle dine stater i en enkelt kilde. Og selvfølgelig spiller React godt med Redux :)

For at komme i gang:

Redux tutorialaf Learn Code Academy

Redux tutorial til begyndere af Valentino Gagliardi

Reager Redux med CSS Tricks

Disse tutorials er mere end nok til at komme i gang med Redux. Jeg kan dog ikke modstå at nævne nedenstående tutorial. Det er det værd :)

Kom godt i gang med Redux af Dan Abramov

Ressourcer

Fantastisk reaktion

Hvis du kan lide artiklen, så glem ikke at dele den :)