Configurați un mediu de reacție, Partea 2

Dacă sunteți nou la React, atunci, pur și simplu, doriți să obțineți codificarea și să jucați cu câteva componente simple pentru a vedea cum funcționează React. Chiar nu vrei să treci printr-un proces de instalare îndelungat în prima instanță.

În acest tutorial vă voi arăta cum să începeți codarea cu React în câteva secunde, eliminând aproape complet procesul de configurare! Veți folosi CodePen, un editor de coduri online, care vă permite să începeți imediat să scrieți codul React.

Un efect secundar util al utilizării editorilor de coduri on-line este că vă puteți împărtăși cu ușurință munca dvs. altor persoane printr-o adresă URL unică. Tot ceea ce creați poate fi, de asemenea, căutat de alți dezvoltatori care caută exemple bazate pe React.

Să aruncăm o privire la CodePen și să vedem cât de ușor este să configurați React și să începeți să codificați prima aplicație!

CodePen

CodePen vă oferă acces la trei ferestre pentru a edita HTML, CSS și JavaScript, plus o altă fereastră pentru a face ieșirea. Puteți utiliza CodePen complet gratuit și nici măcar nu trebuie să vă înregistrați pentru un cont care să vă împărtășească munca. Cu toate acestea, dacă utilizați serviciul în mod regulat, vă recomandăm să luați în considerare deschiderea unui cont astfel încât să puteți completa un profil și să începeți să construiți un portofoliu.

Fiecare nouă creație din CodePen este numită "stilou". Du-te la pagina de pornire și faceți clic pe mare Crea butonul din partea dreaptă sus a ecranului și apoi New Pen din meniul derulant.

În funcție de setările implicite, cei trei editori vor fi fie pe partea stângă, fie pe partea dreaptă a ferestrei principale, fie vor fi așezate în partea superioară într-un singur rând.

Fereastra de ieșire CodePen este actualizată automat de fiecare dată când tastați în oricare dintre ferestrele editorului. Acest lucru este opțional și poate fi dezactivat prin setările stiloului.

Configurarea setărilor

Înainte de a putea scrie orice cod React, trebuie să importați scripturile de bibliotecă necesare și să configurați procesorul nostru JavaScript. Vom folosi JSX în interiorul componentelor noastre React, precum și câteva caracteristici ale ES6, pentru a fi siguri că editorul JavaScript CodePen poate interpreta codul nostru, avem nevoie de un instrument care să ne ia codul JSX și ES6 și să îl compilam la standard JavaScript pe care toate browserele pot rula.

Vom folosi Babel ca și compilatorul nostru JavaScript, astfel încât veți putea să utilizați în siguranță toate funcțiile cele mai recente ale JavaScript fără a vă mai fi nevoie să vă faceți griji cu privire la compatibilitatea browserului. Suportul adăugat pentru compilarea JSX este un bonus real, deoarece înseamnă că trebuie să folosim doar un singur instrument.

Pentru a permite Babel în CodePen, trebuie să configurați setările penului. Apasă pe Setări în meniul din dreapta sus și apoi pe JavaScript în Setările penului caseta de dialog care apare. De asemenea, putem adăuga bibliotecile React necesare.

Faceți clic pe Quick-add dropdown și selectați Reacţiona din listă. Observați că React este adăugat la prima casetă de intrare cu calea completă la biblioteca specificată. Faceți clic din nou pe meniul derulant pentru a adăuga React DOM. Acest lucru este necesar pe măsură ce redăm componentele noastre React în DOM browser-ul.

În cele din urmă, în cadrul Preprocesor JavaScript dropdown, selectați hărmălaie. Ta Setările penului dialogul trebuie să pară asemănător cu acesta:

Versiunile exacte ale script-urilor React și React DOM pot fi ușor diferite pe ecran, deoarece CodePen se va actualiza în mod inevitabil la cea mai recentă versiune din când în când.

Clic Închide pentru a reveni la interfața principală CodePen. Observați că lângă JS etichetă în fereastra de editor JavaScript, o suplimentare (Babel) eticheta a fost adăugată ca un memento că JavaScript va fi trecut prin compilatorul Babel înainte de a fi executat în browser.

Prima noastră aplicație React

În fereastra editorului HTML CodePen, adăugați un singur 

 element. Acest lucru servește ca un loc de plecare gol, pe care aplicația noastră React o poate folosi pentru a ne recomanda componenta.

Nu este nevoie să adăugăm mult HTML manual deoarece React se ocupă de adăugarea și actualizarea elementelor DOM pentru noi. Nu vom adăuga niciun fel de CSS stiloului nostru, deci nu ezitați să rearanjați ferestrele astfel încât editorul JavaScript și fereastra de ieșire să aibă mai mult spațiu disponibil.

În fereastra editorului JavaScript, introduceți următorul cod pentru a adăuga prima noastră componentă.

clasa MyFirstComponent extinde React.Component render () return ( 
Bună ziua de la React!
 )

Aceasta este destul de mult cea mai elementară versiune a unei componente posibile în React. Am folosit o clasă ES6 pentru a extinde clasa de componente React core, care implementează a face() și returnează un element HTML.

Pentru a afișa componenta noastră, trebuie să sunăm ReactDOM.render () metodă:

ReactDOM.render ( , document.querySelector ('#app'));

Primul argument este componenta React pe care doriți să o redați, iar cea de-a doua specifică ce element DOM trebuie să redea.

Să creați acum încă câteva componente React. Mai întâi, adăugați acest fragment în fereastra HTML:

Acum adăugați o altă definiție a componentei în fereastra JavaScript:

clasa MySecondComponent extinde React.Component render () return ( 
Componenta mea a doua reacție.
 )

A doua componentă este foarte asemănătoare cu cea de-a doua, iar noi o facem div element cu id de app2 cu un alt apel la ReactDOM.render ().

ReactDOM.render ( , document.querySelector ('# app2'));

Cu toate acestea, nu este foarte eficient să se facă în acest fel componentele individuale. Abordarea acceptată în prezent este definirea unei componente de nivel superior, cum ar fi , care conține toate celelalte componente din aplicația dvs. React. Apoi, tot ce aveți nevoie este un singur apel RenderDOM.render (), mai degrabă decât un apel separat pentru fiecare componentă.

Deci, haideți să refacem aplicația noastră foarte simplă React pentru a utiliza această abordare de nivel superior.

În primul rând, eliminați

Acum, dacă am vrea să adăugăm niște informații  și  dar nu a vrut să-l specificați neapărat în interiorul definițiilor componentelor? Putem face acest lucru prin transmiterea informațiilor către componentele copilului din componente părinte utilizând sintaxa HTML. Acest lucru este cunoscut sub numele de recuzită în React.

Să demonstrăm acest lucru prin transmiterea informațiilor de numerotare celor două componente imbricate. Schimba definiția:

clasa App extinde React.Component render () return ( 
 
Componentele mele de primă reacție!
   
 )

Am adăugat două număr elemente de recuzită care vor fi transmise fiecărui component copil și puse la dispoziție printr-un obiect JavaScript. În interiorul definițiilor componentelor, putem accesa recuzele prin intermediul recuzită obiect, după cum urmează:

clasa MyFirstComponent extinde React.Component render () return ( 
this.props.number: Bună ziua de la React!
 )

clasa MySecondComponent extinde React.Component render () return ( 
this.props.number: Componenta mea a doua reacție.
 )

Să recapităm rapid cât de ușor a fost să începeți codarea cu React folosind CodePen.

În primul rând, am deschis un stilou nou și am configurat setările pentru a adăuga dependențele de script React și ReactDOM. De asemenea, am adăugat preprocesorul JavaScript Babel pentru a compila codul JSX și ES6 până la JavaScript standard.

Apoi, a fost doar un simplu caz de adăugare a componentelor noastre React la editorul JavaScript. În cele din urmă, pentru a afișa componentele noastre în fereastra de ieșire, am introdus a

element ca punct de montare pentru aplicația noastră React în fereastra editorului HTML.

Concluzie

Folosind CodePen, puteți obține o componentă React afișată pe ecran în doar câteva minute! Cu toate acestea, are unele limitări.

Cele mai bune practici de reacție moderne pentru dezvoltarea React recomandă o abordare modulară, fiecare componentă într-un fișier separat. Nu puteți face acest lucru cu versiunea de bază a CodePen.

De asemenea, deoarece fereastra de ieșire CodePen este încorporată în interiorul unui element iframe, nu aveți acces la instrumentele de dezvoltator ale Reactului de browser, ceea ce este un aspect important deoarece aplicațiile dvs. devin mai complexe.

Pentru începători, dar și pentru testarea rapidă a ideilor noi pentru aplicații simple, CodePen este un instrument excelent pentru dezvoltarea React. Ați putea, de asemenea, să o utilizați pentru a crea un portofoliu online sau pentru a crea o mini-bibliotecă de componente React gata să fie inserată în alte proiecte. Există o mulțime de alți editori de coduri on-line similare cu CodePen, cum ar fi JSFiddle, JS Bin și multe altele.

În următorul tutorial, ne vom concentra pe configurarea aplicațiilor React pe plan local.

Cod