Hei oameni buni!

Acest ghid este destinat persoanelor care încep cu React. Am organizat cu atenție cele mai bune videoclipuri și articole din fiecare secțiune pentru a ușura învățarea.

Notă: Nu sunt asociat cu niciunul dintre site-urile web menționate mai jos. Este pur și simplu punctul meu de vedere.

Condiții prealabile

  1. Cunoștințe de bază despre HTML, CSS și JavaScript.
  2. Înțelegerea de bază a caracteristicilor ES6. Iată a mea articol explicând unele dintre caracteristicile ES6.
    Pentru a începe, ar trebui să cunoașteți cel puțin următoarele caracteristici:
    1. Să
    2. Const
    3. Funcții săgeată
    4. Importuri și exporturi
    5. Cursuri
  3. Înțelegerea de bază a modului de utilizare npm.

Noțiuni de bază

Puteți utiliza editori de coduri online pentru a practica sau puteți utiliza Creați aplicația React.

Am configurat un mediu de dezvoltare în JSFiddle si in Codepen.

Pentru a înțelege toate elementele fundamentale ale React, puteți începe cu următoarele tutoriale:

Reacționează documentația oficială de React

Ghid pentru începători pentru a reacționa de Kent C. Dodds

Fundamentele React de Samer Buna

Până acum, ar trebui să aveți o idee de bază despre fundamentele React. Este suficient să începeți să dezvoltați aplicații web simple în React.

Acum, aruncați o privire la tutorialul oficial React:

Reactionați tutorialul oficial de React

Este un articol bine scris care acoperă elementele fundamentale ale React. Și, de asemenea, explică foarte clar subiectele specifice.

Nu în ultimul rând, aflați cum să vă conectați la API-uri cu aplicațiile React:

Se preia API-ul cu React.js de Ethan Jarrell

Începeți construirea unor proiecte

  1. Aplicație simplă pentru tot
  2. Aplicație simplă pentru calculator
  3. Construiește un coș de cumpărături
  4. Afișați statisticile utilizatorilor GitHub utilizând GitHub API

React Router

Routerul React vă ajută să creați rute către aplicațiile dvs. cu o singură pagină. Este foarte puternic și ușor de utilizat cu aplicația dvs. React.

Pentru a incepe:

Tutorial React Router de Paul Sherman

React Router și introducere în SPA de Learn Code Academy

Rutare aplicații React de Scotch.io

Aceste articole sunt mai mult decât suficiente pentru a începe cu rutare React.

Proiecte

  1. O aplicație simplă CURD
  2. Clona Hacker News

Dacă sunteți cu adevărat interesat să aflați multe despre Router, consultați următorul ghid:

React Router ghid complet de React Training

Webpack

Webpack este un celebru pachet de module JavaScript. Webpack vă ajută să mențineți dependențele ca fișiere statice pentru proiectul dvs., astfel încât dezvoltatorii nu trebuie să o facă.

Webpack vine și cu încărcătoare. Încărcătoarele vă ajută să rulați sarcini specifice în jurul proiectului dvs.

Pentru a afla mai multe despre Webpack, urmați următoarele tutoriale.

Când și de ce să utilizați Webpack de Andrew Ray

Tutorial Webpack de Learn Code Academy

Pentru a vă configura mediul local React utilizând Webpack, puteți consulta următoarea repo GitHub:

Șablonul React SPA de Hanif Roshan

Cred că tutorialele de mai sus sunt suficiente pentru a începe cu Webpack. Cu toate acestea, pentru a obține cunoștințe aprofundate, puteți consulta următoarele ghiduri:

Introducere Webpack de SurviveJS

Webpack documente oficiale

Redarea serverului

Redarea serverului este una dintre cele mai interesante caracteristici din React. Poate fi utilizat cu oricare dintre tehnologiile back-end.

Redarea laterală a serverului (SSR) în React vă ajută să creați componente în server și să le redați ca HTML în browserul dvs. Și când toate modulele JavaScript sunt descărcate în browser, React intră în scenă. Simplu!

În primul rând, aruncați o privire la React-DOM API:

API React-DOM de React

Și urmați tutorialele de mai jos pentru a obține cunoștințe aprofundate:

Reactați redarea serverului de Tyler McGinnis

Reactați randarea serverului routerului de Roilan Salinas

Ghid de redare laterală React Server de Dennis Brotzky

Redux

Redux este o bibliotecă JavaScript dezvoltată pentru menținerea stărilor aplicației. Când creați o aplicație complexă, aceasta va adăuga cheltuieli generale pentru a gestiona stările între componente. Redux vă ajută să stocați toate stările într-o singură sursă. Și, desigur, React joacă bine cu Redux 🙂

Pentru a incepe:

Tutorial Redux de Learn Code Academy

Tutorial Redux pentru începători de Valentino Gagliardi

React Redux de CSS Tricks

Aceste tutoriale sunt mai mult decât suficiente pentru a începe cu Redux. Cu toate acestea, nu pot rezista să menționez și tutorialul de mai jos. Se merită 🙂

Noțiuni introductive despre Redux de Dan Abramov

Resurse

Minunat React

Dacă îți place articolul, nu uita să-l împărtășești 🙂