La Social Tables, incercam intotdeauna sa folosim tehnologie de ultima ora. Ca echipa de ingineri, fiecare ne petrecem o anumita parte din timp in proiecte de cercetare si dezvoltare. In consecinta, coechipierii mei Rohit si Matthew au decis sa foloseasca React.js pentru cel mai recent proiect al lor. Au fost impresionati de React si au vorbit continuu despre cat de cool a fost React.

Array

Prin urmare, am decis sa folosim React pe noul nostru produs, oferindu-mi posibilitatea de a explora aceasta biblioteca pentru a construi interfete utilizator.

React este o biblioteca front-end, o colaborare comuna intre Facebook si Instagram. Multe cadre front-end moderne folosesc arhitectura MVVM. Daca utilizati o arhitectura MVVM, React este doar partea V (vizualizare) a MVVM conform documentatiei React.

React creeaza un DOM virtual si construieste un DOM real din DOM virtual.

Array

Daca exista o modificare a DOM-ului virtual, acesta insereaza sau elimina modificarile din DOM-ul real. Nu exista sabloane si totul este legat de Vizualizare. Vizualizarea este alcatuita din una sau mai multe „componente”. Voi explica cateva dintre conceptele React pe baza unei aplicatii foarte simple.

Deoarece ne place SVG la Social Tables, sa cream un exemplu de aplicatie folosind SVG.

Array

Vom crea o panza SVG. Cand se face clic pe panza, se va reda un cerc unde a avut loc clicul. Asa cum a spus odata un scriitor celebru, un singur exemplu de valoare este in valoare de mii de cuvinte. Deci, am creat un jsfiddle pentru fiecare pas.

Pasul 1: Creati SvgCanvas.

Componenta de baza React

Acesta este minimul necesar pentru a crea o componenta in React. Am definit o componenta React numita <SvgCanvas /> si am redat o panza SVG 300 x 300. Fiecare componenta trebuie sa aiba o metoda de redare. Cand renderComponent este numit, o DOM virtuala este creat. Reactati verificarile daca exista modificari pe DOM virtual si actualizati DOM-ul real in consecinta.

Acum, sa introducem un cerc rosu static in panza noastra.

componenta cercului

Am creat o componenta <Circle /> care este practic un cerc rosu la coordonatele 100.100. Componenta cercului nostru nu are nicio semnificatie decat daca o inseram in componenta noastra SvgCanvas. Structura noastra este foarte simpla.

Pasul 2: Creati o componenta Circle in componenta SvgCanvas.

atrage fluxul de lucru

Documentatia React sugereaza trasarea relatiei dintre componente pentru a vizualiza fluxul de date. In aceasta diagrama, componenta SvgCanvas transmite date catre componenta Circle si componenta Circle reda aceste date. Datele curg intotdeauna intr-o directie de sus in jos. Sarcina componentei Circle este de a reda datele. Nimic altceva.

Exemplul nostru static este foarte usor de creat. Sa cream o versiune dinamica a aplicatiei noastre simple. In acest moment, statul joaca un rol crucial. Starea este practic cea mai recenta conditie (valoare) a datelor. In aplicatia noastra, singurele date pe care dorim sa le actualizam sunt coordonatele x si y ale cercului nostru, deci cream stari pentru x si y pe componenta de nivel superior. In acest caz, componenta SvgCanvas detine Circle Component. Vom folosi construit in getInitialState metoda in SvgCanvas pentru a initializa x si y valori.

Pasul 3: Utilizati starea si recuzita intr-un exemplu static .

metoda getInitialState

Valorile actuale ale lui x si y sunt egale cu this.state.x si this.state.y.

Am definit starile pe SvgCanvas si „transmitem” starile catre componentele interioare folosind elemente de recuzita. In acest moment, aplicatia este inca statica, dar este foarte aproape de a fi o aplicatie dinamica.

Acum vrem sa schimbam valorile lui x si y ale cercului. Vrem sa obtinem valorile facand clic pe panza.

Deoarece vom face clic pe SvgCanvas, sa definim o functie numita handleClicking in componenta SvgCanvas. handleClicking ia un eveniment mouse-ul, extrage valorile x si y in punctul pe care am facut clic si schimba starea curenta a lui x si y folosind metoda setState incorporata . Cand se apeleaza metoda setState, componentele secundare care primesc date de la stare sunt redate.

Desigur, trebuie sa captam clicul pe elementul SVG, asa ca vom folosi cladirea onClick pentru a captura clicul . onClick functioneaza cam ca atributul evenimentului onclick al javascriptului vanilat.

Pasul 4: aplicatia finala

La inceput, intelegerea a ceea ce se intampla cu React nu este foarte usoara, deoarece conceptele React nu sunt ca orice alte concepte ale cadrului existent. Cu toate acestea, odata ce intelegeti conceptele React, lucrul cu React este foarte placut.

Construiti-va urmatorul proiect cu React. Echipa React pastreaza o documentatie foarte buna si va va ajuta sa invatati rapid conceptele React.

ARTICOLE SIMILAREDE LA ACELAȘI AUTOR