Share
React este o bibliotecă JavaScript pentru crearea interfețelor utilizator (UI). Este menținută și dezvoltată de Facebook și este unul dintre cele mai populare instrumente pentru crearea de aplicații web astăzi.
Cu toate acestea, a avut un pic de reputație pentru că nu a fost foarte ușor de utilizat pentru a configura o aplicație React, în special pentru începători. Problema provine din momentul în care React a devenit mai popular, iar metoda standard de a crea o aplicație React a implicat o configurație manuală complexă a unei întregi serii de fișiere de instalare.
Multe tutoriale destinate să ajute începătorii să înceapă cu React au introdus abordări diferite și instrumente pentru a configura o aplicație de lucru. Chiar și cu diferențe subtile între metodele de construcție sugerate, confuzia a fost inevitabilă.
Pentru a putea configura cu succes o aplicație React prin configurație manuală, este necesară o bună înțelegere a mai multor tehnologii diferite.
Această flexibilitate în configurare este de fapt un lucru minunat. Aveți libertatea completă de a alege instrumentele specifice pe care doriți să le creați aplicația React și configurați-le exact așa cum este necesar.
După ce vă veți simți confortabil cu aceste instrumente, veți avea încrederea să le utilizați la potențialul lor maxim și să creați aplicații complexe complexe. Până atunci, rămâne o barieră de intrare pentru o mulțime de dezvoltatori care nu au avut neapărat experiență cu instrumentele de linie de comandă necesare pentru a crea aplicații React.
Pentru a ajuta la atenuarea acestei frustrări, această serie de tutori se concentrează asupra diferitelor metode de configurare a aplicațiilor React. Vom începe cu cea mai de bază abordare și apoi vom construi până la setări mai complexe. Hai să lăsăm lucrurile departe, totuși, clarificând în detaliu tipurile de React de configurare pe care le vom acoperi.
Până la sfârșitul acestei serii de tutori, veți putea să configurați aplicațiile React în patru moduri principale:
Prima metodă demonstrează cum să utilizați un editor de cod online, cum ar fi CodePen, pentru a configura foarte repede o aplicație React. Folosind această metodă, veți codifica literalmente prima dvs. aplicație în câteva secunde!
Apoi, vom trece la configurarea Reactului într-un mediu de dezvoltare locală, începând cu adăugarea directă a script-urilor într-un fișier HTML, fără a folosi niciun fel de instrumente de construire. Următoarele două metode de configurare se concentrează pe modul în care ați creat o aplicație tipică React în dezvoltarea zilnică.
Așa cum veți vedea, folosirea instrumentului create-react-app face extrem de ușor să transformați aplicațiile React cu o singură comandă! În cele din urmă, acoperim modul de a configura o aplicație React prin linia de comandă complet de la zero, calea vechi.
Fiecare metodă de configurare are locul ei și nu există o abordare "mai bună", doar alternative în funcție de nevoile dvs..
React este o bibliotecă fantastică pentru a crea aplicații web și este și o mulțime de distracție! Să aruncăm o privire la cerințele preliminare pentru a vă asigura că vă grăbiți.
Metoda cea mai simplă pentru configurarea unei aplicații React nu necesită decât o conexiune la internet. Cu toate acestea, pe măsură ce trecem la setări mai complexe, vom trece la configurarea completă a aplicației React de la zero. Prin urmare, se recomandă cunoașterea următoarelor subiecte.
Windows, macOS și Linux oferă acces la instrumentele de linie de comandă. Acestea sunt folosite foarte mult în dezvoltarea web modernă pentru îndeplinirea rapidă și eficientă a sarcinilor complexe. Dacă nu aveți nicio experiență de lucru cu linia de comandă pentru a efectua operații cum ar fi gestionarea fișierelor / folderelor, instalarea de instrumente, rularea scripturilor și așa mai departe, atunci ar merita timpul să învățați cel puțin elementele de bază.
Dacă ați făcut o dezvoltare web pentru orice perioadă de timp, probabil că ați auzit cel puțin despre Node.js și npm. Node.js a fost creat inițial pentru a rula JavaScript pe server, dar este și acum utilizat pe scară largă pentru dezvoltarea de aplicații web, simplificând și automatizând sarcinile comune, toate într-un singur mediu.
Există literalmente sute de mii de module Node.js disponibile și npm a fost introdus ca un manager de pachete dedicat pentru a ajuta la instalarea, organizarea și gestionarea tuturor modulelor din aplicația dvs. web. Deoarece npm este asociat cu Node.js, tot ce trebuie să faceți este să instalați cea mai recentă versiune de Node.js pe sistemul dvs. pentru al face disponibil prin intermediul liniei de comandă.
Un nivel rezonabil de JavaScript este necesar pentru a configura și a dezvolta aplicații React. În caz contrar, veți încerca, într-un anumit moment, să creați aplicații React de orice adâncime sau complexitate. Aceasta include câteva caracteristici ale ES6, cum ar fi funcțiile, clasele și modulele săgeților. Vă recomandăm să vă spălați abilitățile JavaScript, dacă este necesar, înainte de a încerca să dezvoltați o aplicație React.
Această serie de tutori se concentrează pe crearea de aplicații React, nu pe dezvoltarea acestora, așa că nu vom fi prea adânc în subiecte specifice cum ar fi componente, recuzită și stat. Este o idee bună, totuși, să aveți niște cunoștințe de bază despre ceea ce sunt, deci în următoarea secțiune vom acoperi caracteristicile de bază ale React și vom explora modul în care toate piesele se potrivesc împreună pentru a forma o aplicație de lucru.
Înainte de a ne scufunda în prima noastră metodă de instalare, hai să facem un tur rapid al Reactului în sine.
În centrul său există trei caracteristici fundamentale ale Reactului în care sunt compuse cele mai multe aplicații. Acestea sunt:
Acestea sunt caracteristicile cheie pe care trebuie să le stăpânești pentru a scrie aplicații React eficiente. Odată ce ați ajuns la acea etapă, veți fi foarte bine pregătiți să vă aruncați cu mult mai mult în React și să dezvoltați aplicații mai complexe.
S-ar putea să fiți plăcut surprinși să descoperiți că componentele React, posturile de recuzită și statul nu sunt atât de greu să vă înșive capul. Experiența mea personală a fost că procesul de configurare React a fost mai dificil decât învățarea React în sine!
Blocurile de bază ale oricărei aplicații React sunt componente. Gândiți-vă la ele ca blocuri reutilizabile de cod care încapsulează marcarea, comportamentul și stilurile. Ele pot fi de asemenea imbricate unul în celălalt, ceea ce le face foarte reutilizabile. De exemplu, este posibil să aveți a
Pentru a ușura construirea componentelor, JSX a fost creat pentru a oferi componentelor o structură asemănătoare HTML-ului. Dacă sunteți familiarizați cu HTML sau XML atunci veți fi chiar acasă folosind JSX pentru a construi componente. Merită menționat că nu este necesar să utilizați JSX deloc în React, dar acum devine metoda standard acceptată pentru a defini componentele.
Elementele de susținere vă permit să transmiteți informații între componente. Și în React, informațiile pot fi transmise doar prin intermediul elementelor de recuzită de la componente părinte la componente copil.
Dacă alegeți să utilizați JSX în definițiile componentelor dvs. (și vă recomand să faceți acest lucru), definirea elementelor de recuzită pe o componentă este remarcabil similară cu adăugarea atributelor HTML. Acesta este unul dintre motivele pentru care JSX este atât de popular! Fiind capabil să utilizeze sintaxa asemănătoare HTML pentru componentele React și recuzita, este foarte ușor să le scanezi rapid aplicația.
Să aruncăm o privire mai atentă la noi
Mai întâi, iată
clasa BookIndex extinde React.Component render () return ()Lista tuturor cărților
Apoi, în fiecare
clasa de carduri extinde React.Component render () return ()This.props.title
Autor: this.props.author
Publicat: this.props.published
Dacă sintaxa de mai sus pentru crearea componentelor React pare ciudată, nu vă faceți griji - este destul de simplă. O clasă ES6 extinde clasa componentei de bază, iar apoi o metodă de redare (necesară) se ocupă de ieșirea componentei.
Statul ne permite să urmărim toate datele dintr-o aplicație React. Trebuie să putem actualiza interfața utilizator ori de câte ori se schimbă ceva și statul ne ocupă de acest lucru. Ori de câte ori este schimbat statul, React este suficient de inteligent pentru a ști care părți ale aplicației dvs. au nevoie de actualizare. Acest lucru face React foarte repede, deoarece va actualiza numai piesele care s-au schimbat.
De obicei, statul este aplicat componentei de nivel superior din aplicația dvs. React, astfel încât este disponibil pentru fiecare componentă copil să consume date de stare, după cum este necesar.
Asta e pentru turul nostru de vârtej al lui React. Nu este deloc cuprinzător și mai sunt multe lucruri pe care trebuie să le învățați înainte de a putea crea aplicații complexe complexe, dar înțelegerea componentelor, a recuzităților și a stării vă va oferi un început solid.
În acest tutorial, am pus bazele pentru a învăța cum să configurați un mediu React. Restul seriei tutorial se concentrează asupra metodelor specifice necesare pentru a face acest lucru. Vom aborda metode de configurare variind de la metode foarte simple la metode complexe care necesită configurare manuală.
În următorul tutorial, vom începe să aruncăm o privire asupra utilizării CodePen, un editor de coduri online, pentru a configura o aplicație React în doar câteva clicuri de mouse. Aceasta este de departe cea mai simplă și mai rapidă modalitate de a obține codificarea în React!
Accentsconagua