Începeți cu React

Bibliotecile din JavaScript care sunt însărcinate cu manipularea vizualizărilor și modul în care afișează informațiile includ din ce în ce mai multe funcționalități care fac dezvoltarea aplicațiilor mai ușoară pentru dezvoltator și mai plăcută pentru utilizatorii care le folosesc.

Printre aceste biblioteci avem Reacţiona, care este o bibliotecă de JavaScript de open source axat în principal pe crearea de interfețe utilizator pentru aplicații cu o singură pagină sau aplicații cu o singură pagină folosite de Facebook și Instagram pentru a gestiona tot ceea ce se referă la vizualizări, rezolvând problema aplicațiilor mari în care datele prezentate utilizatorului se schimbă constant.

Reacționează caracteristicile

Pentru a rezolva această problemă pe care am menționat-o Reacţiona își bazează filosofia pe următoarele caracteristici:

SimpluAceastă caracteristică exprimă modul în care aplicația noastră ar trebui să arate într-un anumit punct și în ce mod o face și ce face Reacţiona este că gestionează automat toate actualizările interfeței cu utilizatorul atunci când se fac modificări fundamentale ale aplicației.
DeclarativCând informațiile se schimbă în aplicația noastră Reacţiona îndeplinește funcția de reîmprospătare a paginii noastre, dar numai acolo unde informațiile s-au schimbat.
Construcția componentelor combinabileCând vorbim despre Reacţiona, vorbim în principal despre construcția componentelor reutilizabile, de fapt, cu această bibliotecă ceea ce facem de cele mai multe ori este construirea componentelor și datorită faptului că sunt încapsulate, fac reutilizarea codului, testele și separarea funcționalităților extrem de simplu.

Getting React

Acum, că știm în ce constă Reacţiona și caracteristicile sale, vom obține cea mai recentă versiune a bibliotecii și vom realiza o implementare simplă pentru a arăta faimoasa Hello World.

Pentru a obține cea mai recentă versiune, descărcăm o tabletă cu biblioteca de la următorul link. După descărcare, dezarhivăm și plasăm conținutul într-un folder numit Bună_React iar în interior creăm un fișier numit hello_react.html care va conține următorul conținut:

După cum putem vedea, este un cod destul de simplu care ne permite să redăm un text în vizualizarea noastră principală grație includerii reacționează.js. În plus, folosim JSX ce este sintaxa XML în cadrul nostru JavaScript și apoi faceți transformarea în browser, pe care o putem folosi datorită implementării celei de-a doua biblioteci numită JSXTransformer.js

În plus, putem face codul nostru mai lizibil și modular prin separarea logicii sale, putem realiza acest lucru făcând două fișiere, pentru aceasta creăm unul numit hello_react.js și punem următorul cod:

 React.render (, document.getElementById ('example_react'));

Apoi în HTML ceea ce facem este să includem fișierul nostru .js în eticheta scriptului și vom avea aceeași operație:

Să vedem atunci când rulăm exemplul nostru în browser răspunsul său:

După cum putem vedea, manipularea datelor a fost destul de simplă, totuși există o modalitate mai bună de implementare Reacţiona, deoarece modul în care o facem, codul folosește transformatorul de JSX a browserului așa cum vom vedea în mesajul pe care îl primim prin consolă.

Acest mesaj consolă ne oferă soluția la acest mic avertisment și este să efectuăm o precompilare a codului nostru .js, pentru aceasta vom folosi managerul de pachete al Node.js pentru această sarcină, deci dacă nu avem acest mediu instalat pe computerul nostru, mergem la pagina oficială și îl descărcăm în cazul în care lucrăm în Windows și în cazul în care lucrăm în Linux putem urma pașii din acest tutorial.

Precompilarea codului nostru

Pentru a efectua această sarcină, mergem la consola noastră Node.js și cu ajutorul npm am instalat instrumentul Reacţiona pentru consola de comandă numită instrumente de reacție pentru care trebuie doar să executăm această linie:

 npm instala -g react-tools

Acum ceea ce facem este să traducem codul nostru în JavaScript pur după cum urmează:

 jsx - ceas hello_react.js

Aceasta nu numai că traduce codul nostru, ci generează automat fișierul hello_react.js De fiecare dată când se face o modificare a aplicației noastre, să vedem răspunsul de la consolă atunci când executăm această comandă:

În cele din urmă ne modificăm HTML eliminarea includerii bibliotecii JSXTransformer.js întrucât nu avem nevoie de el și includem scriptul într-un mod convențional, să vedem:

 Bună ziua reacționează!

După cum am menționat, ultima operație pe care o realizăm prin consolă generează automat fișierul de fiecare dată când facem o modificare în aplicația noastră, deci dacă am făcut modificări, consola ne va notifica după cum urmează:

După cum putem vedea, avem două notificări privind modificările aduse fișierului, care au fost efectiv cele pe care le-am făcut în ceea ce privește eliminarea bibliotecii și includerea convențională a unui fișier JavaScript.

Așa am terminat acest tutorial, unde am putea face primii pași Reacţiona și implementarea sa în aplicațiile noastre, aceasta pentru a ne ajuta cu construcția de componente pentru vizualizarea datelor în vizualizările noastre, verificând că nu este doar simplu, ci că ne oferă instrumente care ne vor face dezvoltarea mult mai ușoară.