Noțiuni de bază cu React.js

React.js este a flexibil și bazat pe componente Biblioteca JavaScript pentru construirea de interfețe utilizator interactive. A fost creat și deschis de la Facebook și este utilizat de multe companii de top de tehnologie, cum ar fi Dropbox, AirBnB, PayPal și Netflix. React permite dezvoltatorilor să creați aplicații grele de date care poate fi actualizat fără durere de către re-redarea doar a componentelor necesare.

Reacția este Afișați stratul din MVC modelul de design software, și în principal se concentrează asupra manipulării DOM. În aceste zile toată lumea vorbește despre React, în acest post ne uităm la cum poți începeți cu asta.

Instalați reacția

Puteți instala React fie cu managerul de pachete npm sau prin adăugând manual bibliotecile necesare la pagina HTML. Este recomandat folosind React cu Babel care vă permite să utilizați sintaxa ECMAScript6 și JSX în codul dvs. de reacție.

Dacă dorești instalați React manual, documentele oficiale recomandă utilizați acest fișier HTML. Puteți descărca pagina făcând clic pe Fișier> Salvați pagina ca ... din browserul dvs. Scripturile de care veți avea nevoie (React, React DOM, Babel) vor fi de asemenea descărcate în reacționează-example_files / pliant. Apoi, adăugați următoarele etichete de script la secțiune a documentului HTML:

În loc să le descărcați, puteți adăuga scripturile React de la CDN de asemenea.

De asemenea, puteți utiliza funcția versiuni minime din fișierele JavaScript de mai sus:

Dacă preferați instalați React cu npm, cea mai bună modalitate este de a utiliza Creați aplicația React Github repo creat de Facebook Incubator - aceasta este și soluția pe care o recomandă React docs. În afară de React, de asemenea conține Webpack, Babel, Autoprefixer, ESLint și alte instrumente de dezvoltare. Pentru a începe, folosiți următoarele comenzi CLI:

 npm instalare -g creare-reacție-app creare-reacție-app aplicație my-app cd my-app npm start

Când ești gata, poți accesați noua aplicație React pe localhost: 3000 Adresa URL:

Dacă doriți să citiți mai multe despre cum se instalează React, verificați ghidul de instalare a documentelor.

React și JSX

Deși nu este obligatoriu, poți utilizați sintaxa JSX în aplicațiile dvs. React. JSX înseamnă JavaScript XML, si el transpare în JavaScript obișnuit. Marele avantaj al lui JSX este acela că el vă permite să includeți codul HTML în fișierele JavaScript, prin urmare, facilitează definirea elementelor React.

Iată cele mai importante lucruri de știut despre JSX:

Etichete care începeți cu litere mici (carcasa inferioară) sunt redate ca elemente HTML obișnuite.
Etichete care începeți cu majuscule (caz de cămilă superioară) sunt redate ca componente React.
Orice cod scrise în brațele coapse ... sunt interpretate ca literal JavaScript.

Dacă doriți să aflați mai multe despre cum se utilizează JSX cu React consultați această pagină din docs, precum și din documentația JSX implicită puteți să aruncați o privire la wiki-ul JSX.

Creați elemente React

Reacția are a componente bazate pe arhitectură în care dezvoltatorii creează componente reutilizabile pentru a rezolva diferite probleme. O componentă React este construită din unele sau mai multe Reacționează elementele care sunt cele mai mici unități de aplicații React.

Mai jos, puteți vedea un exemplu simplu al unui element React care adaugă un buton Faceți clic pe o pagină HTML. În HTML, adăugăm a

container cu "MyDiv" ID-ul care va fi populate cu elementul React. Creăm elementul nostru React într-un

   Noi facem elementul nostru React cu ReactDOM.render () metodă care ia doi parametri necesari,  Elementul reacție () și containerul său (document.getElementById ( 'myDiv')). Puteți citi mai multe despre cum funcționează elementele React în “Efectuarea elementelor” secțiune a documentelor.
 Creați componente
 Reacționează componentele sunteți reutilizabile, unități UI independente în care puteți actualiza cu ușurință datele. O componentă poate fi făcută dintr-unul sau mai multe elemente React. Recuzită sunteți intrări arbitrare puteți utiliza pentru a transmite date către o componentă. Componenta React funcționează similar cu funcțiile JavaScript - de fiecare dată când este invocată generează un fel de ieșire.
 Puteți utiliza fie funcția clasică sintaxă sau noul Sintaxa clasei ES6 la definiți o componentă React. În acest articol, îl voi folosi pe acesta din urmă, deoarece Babel ne permite să folosim ECMAScript 6. Dacă sunteți interesat de cum să creați o componentă fără ES6, aruncați o privire la pagina Componente și recuzită din docs.
 Mai jos, puteți vedea component simplu React pe care o vom crea ca un exemplu. Este o notificare de bază pe care o văd utilizatorul după conectarea la un site. Există trei fragmente de date care vor schimbați de la caz la caz: numele utilizatorului, numărul de mesaje și numărul de notificări, le vom transmite acestea ca recuzită.
  
Fiecare componentă React este o clasă JavaScript care extinde React.Component clasa de bază. Componenta noastră va fi numită Statistici deoarece furnizează utilizatorului o statistică de bază. Noi primii creați Statistici clasă cu clasa Stats extinde React.Component ... sintaxa, atunci noi redați-l pe ecran prin apelarea ReactDOM.render () (am folosit-o deja în secțiunea anterioară).
  clasa Stats extinde React.Component render () return (  Bună this.props.name, aveți this.props.notifications notificări noi și this.props.messages mesaje noi. 
 );  ReactDOM.render ( , document.getElementById ("myStats")); 
 Primul argument al ReactDOM.render () metoda constă din numele componentei noastre React (), și recuzita (Nume, notificări, și mesaje) cu valorile lor. Cand declaram valorile recuzelor, trebuie sa fie siruri de caractere închise în ghilimele (ca "John Doe") și valorile numerice în paranteze curbate (ca 3).
 Rețineți că din cauza JavaScript, noi folosit numele clasei in loc de clasă pentru a transmite un atribut de clasă unei etichete HTML (className = "rezumat").
 Pagina HTML potrivită este următoarea:
          
    
 În documentele React, există multe alte exemple interesante cum să construiți și să gestionați componentele React, și ce altceva să știi despre recuzită.
 Citirea ulterioară
 Cu React, Facebook a fost introdus un nou tip de cadru în dezvoltarea de front-end că provoacă modelul de design MV *. Dacă doriți să înțelegeți mai bine cum funcționează și ce puteți și ce nu puteți realiza cu acesta, iată câteva articole interesante care vă pot ajuta:
 Facebook post pe blog pe de ce au construit React.
 Postul de blog strălucitor al lui Andrew Ray despre binele și răul lui React.
 Codmanatorul este activat cum reacționează React și AngularJS.
 FreeCodeCamp se gândește la întrebarea dacă MVC este mort la front-end.
 Articolul lui HackerNoon cum să optimizați performanța legate de React.