Notă: Unele browsere (de exemplu Chrome) nu reușesc să încarce fișierul dacă nu sunt difuzate prin HTTP, deci asigurați-vă că utilizați un server local. Vă recomandăm proiectul browsersync.

Transformare offline

De asemenea, puteți utiliza interfața de linie de comandă (CLI) pentru a vă transforma JSX-ul utilizând instrumentele din linia de comandă babel. Acest lucru este ușor de achiziționat prin intermediul comenzii npm:

$ sudo npm instalați --global babel 

--global sau -g steagul pe scurt va instala pachetul babel la nivel global, astfel încât acesta să fie disponibil peste tot. Aceasta este o practică foarte bună cu utilizarea Nodului pentru mai multe proiecte și instrumente de linie de comandă.

Acum că babel este instalat, să facem traducerea helloworld.js tocmai am creat în pasul anterior. La promptul de comandă din directorul rădăcină în care ați dezarhivat setul de pornire, executați:

$ babel src - vizionează --out-dir build 

Acum dosarul construi / helloworld.js va fi generat automat ori de câte ori faceți o schimbare! Dacă sunteți interesat, citiți documentația Babel CLI pentru a obține o cunoaștere mai avansată.

Acum, că babel a generat construi / helloworld.js, care conține doar JavaScript direct, actualizați codul HTML fără etichete de script script activate de babel.

Deci, pentru a revedea, cu babel putem încărca JSX direct în a scenariu etichetă prin Text / babel atributul tip. Acest lucru este bun în scopuri de dezvoltare, dar pentru a merge la producție putem furniza un fișier JavaScript generat care poate fi stocat în cache pe mașina locală a utilizatorului.

Generarea acestei copii se face pe linia de comandă și, deoarece aceasta este o sarcină repetitivă, recomand foarte mult automatizarea procesului prin utilizarea --ceas steag. Sau puteți merge un pas mai departe și să utilizați WebPACK și browsersync pentru a vă automatiza complet fluxul de lucru pentru dezvoltare. Pentru a face acest lucru în cea mai ușoară cale posibilă, putem automatiza configurarea unui nou proiect cu un generator Yeoman.

Instalarea cu Schele Yeoman

Yeoman este un instrument foarte util pentru pornirea rapidă a proiectelor și cu un flux optim de lucru și configurarea instrumentului. Ideea este să vă permiteți să petreceți mai mult timp pe dezvoltare decât să configurați zona de lucru a proiectului și să minimalizați sarcinile repetitive (a se ține seama de acest lucru - RSI este motivul pentru care coderii opresc codarea). Deci, ca o bună practică, economisirea timpului cu instrumentele și implementarea D.R.Y în viața de zi cu zi va crește sănătatea și eficiența și vă va permite să vă petreceți mai mult timp făcând codul real decât configurația.

Există o mulțime de schele acolo, care vin în multe arome pentru diferite scale de proiect. Pentru acest prim exemplu vom folosi reacționează-fullstack schele de la generatoarele Yeoman; puteți vedea o demonstrație a rezultatului final.

Notă: Aceasta este o configurație fullstack, care este, probabil, overkill pentru orice proiecte mici. Motivul pentru care aleg această schelă este să vă dau un mediu complet setat, astfel încât să puteți vedea cum kitul de pornire se transformă într-o aplicație mai mare. Există un antet și un subsol și puteți vedea unde va merge o caracteristică de conectare și înregistrare a utilizatorului, deși nu sunt încă codificate în exemplu.

folosire

Pentru a utiliza geamanul, mai întâi instalați-l și dacă nu aveți omologii necesari ai lui yeoman înghiţitură, umbrar și groh-cli, instalați-le astfel:

$ sudo npm instalați -g yo bower grunt-cli gulp 

Acum instalați schela React cu:

$ sudo npm instalați -g generator-react-fullstack 

Acum, creați un director pentru proiectul dvs. și CD la el:

$ mkdir reacție-proiect $ cd react-project 

În cele din urmă, utilizați yo comandați cu generatorul de schemă React-fullstack pentru a crea aplicația dvs. de reacție în interiorul directorului:

$ yo reacționează - plin 

Yeoman va crea directoarele și fișierele necesare; veți putea vedea actualizări despre acest lucru în linia de comandă.

Odată cu înființarea schelei, să construim proiectul nostru:

$ npm start 

În mod implicit începem depanare modul, și pentru a merge live doar adăugăm -- eliberare steagul, de exemplu. npm run - release.

Veți vedea acum pornirea inițializării și inițierea pachetului web. Odată ce acest lucru se va face, veți vedea ieșirea din pachetul web care vă va oferi informații detaliate despre construirea și adresele URL de accesat.

Accesați aplicația prin intermediul adreselor URL afișate la sfârșitul ieșirii, cu browserul implicit la adresa http: // localhost: 3000. Pentru a accesa interfața de administrare pentru sincronizarea browserului, accesați http: // localhost: 3001.

Notă: Este posibil să fie necesar să deschideți portul serverului pentru portul de dezvoltare. Pentru utilizatorii ubuntu / debian cu UFW, urmează următoarele instrucțiuni:

$ ufw permite 3001 / tcp $ ufw permite 3000 / tcp 

Conversia site-ului existent la JSX

Facebook oferă un instrument online dacă trebuie doar să convertiți un fragment al codului dvs. HTML în JSX.

Pentru cerințe mai mari există un instrument NPM pentru numele acela htmltojsx. Descărcați-l cu:

npm instalează htmltojsx 

Utilizarea acestuia prin linia de comandă este la fel de simplă:

$ htmltojsx -c MyComponent existent_code.htm 

pentru că htmltojsx este un modul de nod, îl puteți utiliza, de asemenea, direct în cod, de exemplu:

var HTMLtoJSX = necesită ('htmltojsx'); var convertor = nou HTMLtoJSX (createClass: true, outputClassName: "HelloWorld"); var output = converter.convert ('
Salut Lume!
„); 

Exemplu de listă

Să începem să lucrăm la crearea unei liste de sarcini de bază, astfel încât să puteți vedea cum funcționează React. Înainte de a începe, vă rugăm să vă configurați IDE-ul. Vă recomandăm să utilizați Atom.

La promptul bash, instalați linterul pentru React prin apm:

apm install linter linter-eslint react Instalarea linterului în /Users/tom/.atom/packages ✓ Instalarea linter-eslint în /Users/tom/.atom/packages ✓ Instalarea reacției la /Users/tom/.atom/packages ✓ 

Notă: cea mai recentă versiune de Linter-eslint făcea MacBook Pro foarte lent, așa că am dezactivat-o.

Odată ce acest lucru se face, putem începe să creăm o listă de bază în cadrul schelei pe care am făcut-o în etapa anterioară cu Yeoman, pentru a vă arăta un exemplu de lucru al fluxului de date.

Asigurați-vă că serverul dvs. a început cu npm start, și acum să începem să facem niște schimbări.

Mai întâi de toate, există trei fișiere de șablon de jad furnizate în acest schelă. Nu le vom folosi pentru exemplul respectiv, deci începeți prin eliminarea index.jade fișier, deci este doar un fișier gol. După ce salvați fișierul, verificați browserul și ieșirea terminalului.

Actualizarea este afișată instantaneu, fără a fi necesară actualizarea. Aceasta este configurația webpack și browsersync pe care schela le-a asigurat că va intra în vigoare.

Apoi deschideți directorul de componente și creați un nou director:

$ cd componente $ mkdir UserList 

Acum, în interiorul listei de utilizatori director, creați un package.json fișier cu următoarele:

"nume": "UserList", "versiune": "0.0.0", "privat": true, "main": "./UserList.js" 

De asemenea, încă în interiorul listei de utilizatori director, creați UserList.js fișier și adăugați următoarele:

// Import React import Reacționează, PropTypes, Component de la "reacționează"; // Crearea clasei de componente UserList UserList extinde Component // Principala metodă de render este apelată în toate componentele pentru afișarea rendere () // Descărcați mai jos pentru a vedea obiectul din consola //console.log(this.props.data ); // Iterați datele furnizate aici var list = this.props.data.map (funcția (item) return 
Item.first Item.last
 ); // Reveniți afișarea afișajului ( 
 listă 
 );  // Asigurați-o accesibilă pentru restul aplicației implicite pentru exportul de aplicații; 

Acum, pentru a termina, trebuie să adăugăm câteva date pentru această listă. Vom face asta înăuntru Componente / ContentPage / ContentPage.js. Deschideți acel fișier și setați conținutul după cum urmează:

/ *! Activați Kitul de pornire Licența MIT | http://www.reactstarterkit.com/ * / import React, PropTypes, Component de la "reacție"; stiluri de import din './ContentPage.css'; import cu Stil de la "... / ... / decoratori / cu Stil"; import UserList din "... / UserList"; // Aici vom importa componenta UserList pe care am creat-o cu clasa @withStyles (stiluri) ContentPage extinde Component static propTypes = path: PropTypes.string.isRequired, content: PropTypes.string.isRequired, title: PropTypes.string,; statică contextTypes = onSetTitle: PropTypes.func.isRequired,; render () // Definiți unele date pentru lista var listData = [primul: 'Peter', ultima: 'Tosh', primul: 'Robert', ultima: 'Marley' , ultimul: "Wailer",]; this.context.onSetTitle (this.props.title); întoarcere ( 
 
 this.props.path === '/'? nul : 
This.props.title
  
 // Utilizați componenta UserList ca JSX  
 
 );  implicit de export ContentPage; 

Acum, când vom salva, webpack-ul va fi reconstruit și browsersync va afișa modificările din browser. Uitați-vă la codul sursă pentru a vedea cum a fost redat.

rezumat

Am folosit generatorul de schele Yeoman reacționează-fullstack pentru a începe o aplicație Web React pe baza kitului de pornire. Pentru o explicație suplimentară a fișierului și aspectului directorului, verificați citirea în kitul de reacție git repo.

De aici am editat index.jade fișierul a fost anulat și a început să se creeze propriul nostru ecran, făcând o nouă componentă numită listei de utilizatori.

Interior Componente / / UserList.js listei de utilizatori definim modul în care lista va fi redată cu:

var list = this.props.data.map (funcție (element) retur 
Item.first Item.last
 ); 

Aici este important să rețineți că React solicită ca toate elementele iterate să aibă un identificator unic furnizat în cadrul cheie atribut.

Pentru a afișa lista vom include în interiorul ContentPage.js fișier cu import UserList din "... / UserList"; și definiți câteva date de testare cu:

 var listData = [primul: 'Peter', ultima: 'Tosh', primul: 'Robert', ultimul: 'Marley', first: 'Bunny', ultima: 'Wailer'; 

Interior ContentPage.js noi numim listei de utilizatori cu JSX .

Acum listei de utilizatori componenta poate accesa date atributul prin this.props.data.

Orice dată când trecem o valoare cu un atribut al unei componente, ea poate fi accesată prin intermediul this.props. De asemenea, puteți defini tipul de date care trebuie furnizate utilizând propTypes variabilă statică în cadrul clasei sale.

Componente extinse față de sintaxa React.createClass

În cele din urmă, un aspect important este acela că acest exemplu folosește componente extinse. Acest lucru are multe beneficii pentru structurarea semantică a codului. Dar ați putea dori să accesați o abordare mai mult oase goale, așa cum fac multe alte exemple.

Deci, în loc de clasa ComponentName extinde componenta pe care l-ați văzut înainte în acest tutorial, creați o clasă React cu următoarea sintaxă:

var MyListItem = React.createClass (render: function () retur 
This.props.data.text
; ); var MyNewComponent = React.createClass (render: function () retur ( 
 this.props.results.map (funcția (rezultatul) retur ; ) 
 ); ); 

Ei bine, asta ne împachetează pentru această introducere la React. Acum ar trebui să înțelegeți bine următoarele:

• obtinerea React
• cum să folosiți Babel cu React
• folosind JSX
• crearea unei componente prin metoda extensie
• folosind componenta și transmiterea datelor

În cele ce urmează, vom discuta cum să folosim în continuare JSX, cum să lucrăm cu o bază de date ca o sursă de date persistentă, precum și cum funcționează React cu alte tehnologii web populare precum PHP, Rails, Python și .NET.