de Marius Espejo

Cum să navigați în ecosistemul React.js fără a vă pierde

Cum sa navigati in ecosistemul Reactjs fara a va pierde
Fotografie de Garrett Parker

În lumea dezvoltării de software este adesea greu să găsești o cale directă pentru a învăța ceva nou. Ar trebui să citești o carte? Urmăriți un tutorial? Urmărește un videoclip? Cere un sfat?

Cu atât de multe căi posibile și opțiuni de luat, pierderea este uşor.

Învățarea React.js este de fapt simplă, nu trebuie decât să știi ce cale să urmezi.

Condiții prealabile

Iată câteva lucruri pe care vă recomand să le înțelegeți înainte de a începe să învățați React.

1611315313 440 Cum sa navigati in ecosistemul Reactjs fara a va pierde
Fotografie de Alice Donovan Rouse

Asigurați-vă că aveți o oarecare înțelegere a HTML și CSS

Aproape fiecare dezvoltare web va necesita o formă de cunoaștere a acestor două. Dacă sunteți un începător absolut în acest spațiu, aș recomanda să vizionați videoclipurile lui Travis Neilson, cum ar fi Elementele de bază HTML5 și Noțiuni de bază CSS. Apoi sări peste Routech.org sau codeacademy.com pentru unele practici.

Scopul dvs. final ar trebui să fie să luați un design sau o structură de bază pentru o pagină web, să o transformați în cod și să vedeți vizual cum sperați că va arăta. În mod ideal, va arăta foarte asemănător cu designul dvs.

Cunoașteți JavaScript în sine

Nu recomand să încercați să învățați cadre și biblioteci înainte de a petrece ceva timp învățând mai întâi limba JavaScript. Există o cantitate extraordinară de resurse pentru a învăța JavaScript în funcție de experiența dvs.

Pentru un începător absolut, Routech are un set minunat de resurse, inclusiv un playlist video din toate elementele de bază JavaScript și un loc interactiv pentru a învăța și a practica corect chiar pe site-ul lor web.

Cel mai bun mod de a învăța codul este să scrieți cod!

Dacă ați folosit deja JavaScript în trecut și aveți nevoie de o reîncărcare, verificați acest lucru reintroducere.

Dacă nu sunteți sigur dacă cunoașteți JavaScript, pariez Nu-l cunoști pe JS. Aceasta este de fapt o serie de cărți populare care este utilă pentru cei dintre voi care doresc să înțeleagă mai bine limba.

„Când te străduiești să îți înțelegi codul, creezi o muncă mai bună și devii mai bun în ceea ce faci. Codul nu mai este doar munca ta, ci meseria ta. ”

– Jenn Lukas

Dincolo de învățarea JavaScript-ului de bază, va trebui, de asemenea, să înțelegeți decent unele caracteristici ECMAScript 2015 (ES6)

Mai exact, concentrați-vă pe înțelegerea următoarelor:

  • Module (import / export)
  • lasa si const
  • Funcții săgeată
  • Clase
  • Destructurarea
  • Odihnă / răspândire

Acestea sunt garantate să apară în codul dvs. React și o înțelegere a acestora vă va permite să consumați documentația mult mai ușor.

Pentru a începe rapid acest lucru, aș recomanda LearnCode.academy’s Foaie de cheats ES6 sau unul dintre Resursele lui Babel.

Aflați cum să utilizați Node Package Manager (npm)

Instalați Node.js și va veni cu npm ambalat cu el. În acest moment npm este una dintre cele mai bune modalități de a descărca dependențe de dezvoltare JavaScript.

De exemplu, această comandă simplă vă va permite să instalați și să descărcați React pentru un proiect:

npm install --save react

Majoritatea a ceea ce trebuie să știți inițial este cum să instalați pachete. Numai acest lucru vă va deschide către un set extins de instrumente și biblioteci care vă vor permite să faceți mai mult în mai puțin timp.

(Opțional) Aflați elementele de bază ale programării funcționale

Deși nu este necesar să învățați React, înțelegerea conceptelor de programare funcțională de bază va fi utilă de multe ori în dezvoltarea dvs. React.

Aș recomanda înțelegerea compoziției funcției, a purității și a funcțiilor de ordin superior. Scopul aici nu este să fii expert în acest subiect, ci să fii cel puțin expus acestuia. Pentru o introducere rapidă, iată o discuție minunată de la un mare vorbitor. Sau poți învăța chiar de la Inbox dacă dorești.

1611315313 367 Cum sa navigati in ecosistemul Reactjs fara a va pierde
Fotografie de Luke Pamer

„Fiecare vârf de munte este la îndemână dacă tot urci.”

Barry Finlay

În funcție de experiența dvs. de dezvoltare, puteți învăța noțiunile de bază React câteva ore până la câteva zile. Dincolo de asta, este nevoie de ceva mai multă experiență și veți putea crea aplicații în cel mai scurt timp.

Cum este posibil? Bine…

În primul rând, nu învățați încă Redux sau alte biblioteci

Cea mai mare greșeală pe care o fac mulți oameni atunci când învață React pentru prima dată este căutarea unui șablon de pornire sau a unui tutorial care include deja Redux și o grămadă de alte biblioteci în el.

Oamenii mă întreabă adesea care este cel mai bun mod de a învăța React. Din anumite motive, niciodată nu le vine în minte că documentație oficială este de fapt un loc minunat pentru a începe, deoarece se concentrează pe învățarea dvs. doar Reacţiona.

Uitați de Redux pentru moment. S-ar putea chiar să nu nevoie de el.

Uitați de alte biblioteci și plăci centrale.

„Învățarea reacționează prin copierea plăcilor este ca și cum ai învăța să gătești mâncând mâncare în restaurante elegante. Nu merge. Trebuie să începeți cu elementele de bază și să ignorați frica de a pierde ”. – Dan Abramov

Concentrați-vă pe Reacționează și reacționează singur.

Aș recomanda acest lucru din același motiv pentru care este posibil să nu doriți să învățați Calculul înainte de a vă simți confortabil cu Algebra. Sau s-ar putea să nu aveți nevoie chiar de Calcul pentru a rezolva o simplă problemă matematică.

Aflați ce probleme React poate și nu poate rezolva singur. Acest lucru vă va oferi un ghid de bază pentru a ști când este timpul să introduceți mai multe biblioteci și, în cele din urmă, mai multe lucruri de învățat, în proiectul dvs.

Iată cel mai simplu mod de a începe

Începe cu creați-reacționați-aplicație. Vă va oferi tot ce aveți nevoie pentru a începe mic, fără a fi reținut de boilerplate și configurare.

Vă permite libertatea de a vă concentra asupra învățării Reactați singuri, fără să vă faceți griji cu privire la învățarea și configurarea Webpack, Babel și diverse alte configurații.

npm install -g create-react-app create-react-app my-app  
cd my-app npm start

Aceste patru comenzi simple vă vor oferi tot ce aveți nevoie pentru a începe un proiect. Include instrumente care vă vor reîmprospăta browserul atunci când vă schimbați codul.

De asemenea, oferă o comandă de construcție care vă va compila codul pe câteva active statice pe care le puteți implementa cu ușurință oriunde și un lucru extraordinar manualul utilizatorului care vă va ghida prin procesul respectiv.

Mă gândesc la crearea-reacționarea-aplicației ca la un fel de ghete de drumeție. Nu aveți neapărat nevoie de ghete de drumeție pentru a urca pe un munte, dar cu siguranță vă vor ajuta și ar putea chiar ușura urcarea anumitor suprafețe. Și dacă îți dai seama că nu ai nevoie de ele, poți oricând „scoate”Le din picioare!

Cu instrumentele scoase din cale, să revenim pe calea învățării React.

Stăpânește fundamentele React

Verificați această postare excelentă pe principal conceptele de React. De fapt, nu sunt multe lucruri pe care trebuie să le înveți.

În general, ar trebui să înțelegeți următoarele:

  • JSX: ce este, cum diferă de HTML-ul tradițional și cum să îl configurați în mod declarativ pentru a gestiona modificările dinamice
/* Notice how you have to use className instead of class     And how the expression inside the curly braces allow it to    dynamically handle any name passed in via props */
<h1 className="greeting">Hello, {this.props.name}</h1>
  • Aflați cum să scrieți componente fără stare funcționale. Iata de ce.
// These are really just simple functions which return JSXfunction MyComponent(props) {      return <h1 className="greeting">Hello, {props.name}</h1>; }
// Alternatively write them using arrow functionsconst MyComponent = (props) => (<h1 className="greeting">Hello, {props.name}</h1>);
  • Aflați cum să scrieți componente utilizând sintaxa clasei ES6. Vă permite să scrieți componente mai complexe cu acces la cârligele ciclului de viață și statul local
class MyComponent extends React.Component {      render() {          return <h1 className="greeting">Hello, {this.props.name}</h1>;      } }
  • Asigurați-vă că înțelegeți bine stat și cum să-l utilizați în mod corespunzător. Înțelegerea avantajelor și dezavantajelor utilizării stării locale a unei componente vă va oferi elementele mentale pentru când și când să nu utilizați o altă soluție de gestionare a stării
  • Aflați cum să scrieți și să utilizați cârlige pentru ciclul de viață ale componentelor și când fiecare poate fi util
class MyComponent extends React.Component {   // A couple examples of hooks that I've had to use a lot:
   componentDidMount() {      /* useful for initializing or triggering events after the          component renders to the DOM */                                   }          shouldComponentUpdate() {     /* useful for performance purposes and preventing redundant           re-rendering */   }      componentWillReceiveProps() {     /* useful for when you need to trigger changes when new props             come in */   }      render() {          return <h1 className="greeting">Hello, {this.props.name}</h1>;      } }
  • Aflați cum să utilizați PropTypes. Este o modalitate ușoară de a adăuga unele componente de verificare de bază
import PropTypes from 'prop-types';  
class MyComponent extends React.Component {      render() {          return <h1 className="greeting">Hello, {this.props.name}</h1>;      } }Greeting.propTypes = {    name: PropTypes.string };

Aflați cum să vă structurați codul

Odată ce aveți elementele fundamentale jos, veți dori să începeți să vă gândiți la modul în care este structurat codul dvs.

Căutați în conceptul de container și prezentare componente. Acest lucru vă va ajuta să înțelegeți cum să separați mai bine preocupările din codul dvs. React.

Dacă decideți să încorporați o soluție de gestionare a statului în viitor, cum ar fi Redux, atunci componentele Container vă vor ajuta în această tranziție. Veți ști că majoritatea datelor transmise în jurul aplicației dvs. provin din containere.

Dacă nu ați făcut-o deja, gândiți-vă și la structura folderelor. Pe măsură ce baza de coduri începe să crească, luați în considerare cât de bine se scalează structura folderelor.

Fișierele sunt ușor de găsit?

Dacă lucrați cu o echipă, sunt ei capabili să știe intuitiv unde sunt componentele specifice?

Rețineți că nu trebuie să aveți codul într-o anumită structură imediat. Încearcă să te obișnuiești cu refactorizare și îmbunătățirea codului dvs. pe măsură ce învățați fiecare dintre aceste concepte.

„Nu sunt un mare programator; Sunt doar un programator bun, cu obiceiuri grozave. ”

– Kent Beck

Construiți o aplicație care rezolvă o problemă reală

Cel mai bun și adevărat mod de a înțelege profund React este construind ceva cu el.

Încercați să construiți ceva care să vă motiveze de fapt să lucrați la el și evitați să creați lucruri la care probabil că deja știți soluția.

  • Încercați să încorporați un fel de date externe (poate efectuați un apel API) și aflați cum să obțineți aceste date să curgă corect în întreaga aplicație, profitând din plin de starea și recuzita
  • Luați în considerare integrarea react-router odată ce ai nevoie de mai multe pagini pentru aplicația ta
  • Utilizați unele biblioteci de componente pentru a porni și a rula rapid cu un aspect și o senzație de bază. Știți că acest uimitor ecosistem JavaScript pe care îl avem cu npm și Github vă permite să încorporați cu ușurință componente gata de utilizat în aplicația dvs.
  • Implementați aplicația dvs. undeva. Există atât de multe moduri diferite de a vă putea implementa codul gratuit. Încercați una. Nu este nimic mai interesant decât să-ți vezi munca desfășurată pe internet și să poți partaja acel link către altcineva
1611315314 618 Cum sa navigati in ecosistemul Reactjs fara a va pierde
Fotografie de Kalen Emsley

Dacă ați ajuns până aici, este minunat! Uită-te înapoi la progresul tău și fii mândru de asta.

Ți-e foame de mai mult? Iată câteva sfaturi.

Testați-vă codul!

Asigurați-vă că învățați cum să testați codul cât mai curând posibil. Utilizare Glumă (sau alergătorul dvs. de test preferat) și Enzimă.

Jest și Enzyme sunt destul de ușor de învățat și vă pot ajuta să înțelegeți cum funcționează componentele dvs. izolat.

În plus, testele fac codul mai sigur de refactorizare și îmbunătățire, servind în același timp și ca documentație dinamică pentru componentele dvs.

Utilizați gestionarea avansată a stării

Se simte ca și cum ai gestiona statul tău setState devine prea complex? Transmiteți în mod constant recuzită la mai multe niveluri de componente descendente?

E timpul să învățați Redux sau o altă aromă de Flux! Va trebui să înțelegeți ce beneficii aduce la masă un sistem de gestionare a statului și când sau când să nu îl utilizați.

Nu te repeta

Dacă vă aflați scriind același cod în mai multe locuri, vedeți dacă puteți folosi alte strategii pentru reutilizarea logicii. Aflați cum să creați și să utilizați Componente de ordin superior. Aceasta este o tehnică avansată pentru refolosirea logicii componentelor. Vă va îmbunătăți cunoștințele atunci când vine vorba de compoziția componentelor.

1611315314 370 Cum sa navigati in ecosistemul Reactjs fara a va pierde
Fotografie de Justin Luebke

Ridicarea nivelului

În realitate, lista nu se termină niciodată.

Există în mod constant lucruri noi pe care le puteți învăța să le îmbunătățiți și să le adăugați la aplicațiile și abilitățile dvs.

Dacă vă concentrați asupra elementelor de bază și faceți cele mai multe dintre cele de mai sus, cred că veți fi deja pe o cale bună nu numai cu React, ci și front-end și dezvoltarea JavaScript în general.

Ecosistemul JavaScript se schimbă constant. Păstrați-vă în mentalitatea învățare continuă. Continuați să încercați lucruri și aflați ce funcționează cel mai bine pentru dvs.

În viitor, experiența dvs. vă va ajuta să vă ghidați ce să faceți în continuare.

Mulțumesc pentru lectură! Dacă ți s-a părut util acest post, renunță la câteva ?? ???? pe această postare pentru ca alții să o poată găsi!