Unul dintre lucrurile bune despre React este că nu necesită dependențe suplimentare, ceea ce îl face conectabil cu aproape orice bibliotecă JS. Folosind această funcție, o vom include în stiva noastră Rails și vom construi o aplicație bazată pe frontend sau, dacă doriți, vederile Rails privind steroizii.
Modul de aplicare
În acest articol, vom crea de la zero o aplicație mică pentru urmărirea costurilor; fiecare intrare va conține o dată, titlu și sumă. Înscrierile vor fi împărțite în Credit dacă suma este mai mare decât zero și Debit în caz contrar. Iată structura proiectului:
Rezumând, cererea va avea următoarele cazuri:
- Atunci când un utilizator creează o înregistrare nouă printr-o formă orizontală, va fi adăugată (înregistrarea) în tabel cu toate intrările
- Utilizatorul va putea să editeze orice intrare line-by-line
- Dacă faceți clic pe orice buton Ștergeți, va șterge înregistrarea asociată din tabel
- Adăugarea, editarea și ștergerea înregistrărilor vor actualiza suma din caseta din partea superioară a paginii
Creați o aplicație
Orice aplicație începe cu lucruri simple. Creați aplicația și denumiți-o, de exemplu, Conturi:
Vă recomandăm să utilizați RVM pentru versiunea Ruby și pentru fiecare aplicație o piatră prețioasă separată, puteți vedea mai multe în acest articol.
Pentru interfața UI a proiectului nostru, va fi folosit Twitter Bootstrap. Procesul de instalare a sistemului bootstrap merge puțin din cadrul acestui modul, puteți instala o bijuterie oficială de bootstrap-sass urmând instrucțiunile sau utilizând elemente de șine.
Atunci când proiectul nostru este inițializat, trebuie să adăugați React la acesta. În această intrare vom instala reacționa-șine bijuterie oficiale, deoarece va utiliza unele contoare rece implementate în hemului, dar există și alte modalități de a realiza această sarcină, de exemplu, toate tezhe șine active, sau puteți descărca codul sursă de pe pagina oficială și puneți-le la pachete javascrips.
Dacă ați lucrat anterior cu Rails, atunci știți cum să adăugați cu ușurință un heme la proiect, adăugați bijuteria de reacție-șinele de care avem nevoie în Gemfile:
Apoi, firește, vom instala noi pietre:
Dacă, după procesul de instalare, căutați în fișierul application.js, veți găsi trei linii noi:
Crearea unei resurse
Vom crea o resursă înregistrată. care va include câmpurile de date. titlul și suma. În loc să utilizați generatorul de schele. vom folosi generatorul de resurse. deoarece nu avem nevoie de toate fișierele și metodele create atunci când folosim schela.
Un pic de magie și vom avea o înregistrare pregătită de resurse. Acestea includ modelul, controlerul și rutele. Rămâne doar să creați o bază de date și să rulați migrarea.
În plus, puteți crea mai multe înregistrări în baza de date utilizând consola șinelor:
Nu uitați să porniți serverul cu comanda șinelor.
Ura! Acum putem cifra.
Componente încorporate: lista de înregistrări
Prima noastră sarcină va fi aceea de a face orice înregistrări în tabel. În primul rând, trebuie să creați un indice de acțiune în controlerul nostru de înregistrări:
Apoi, trebuie să creați un nou fișier index.html.erb în directorul app / views / records / folder. Acest fișier va fi o punte între aplicația Rails și componentele React. Pentru a realiza acest lucru, vom folosi metoda helper react_component. care primeste numele componentei React, pe care dorim sa il facem impreuna cu datele pe care dorim sa le transmitem.
Merită remarcat faptul că acest ajutor este furnizat de bijuteria react-rail și dacă folosiți alte modalități de integrare a React în aplicația Rails, nu va funcționa.
C astfel de marcaje, react_ujs vede ceea ce încercăm să facă componenta React și va inițializa, inclusiv proprietățile pe care le au trecut prin react_component. în cazul nostru, conținutul înregistrărilor.
Fiecare componentă trebuie să conțină o metodă de randare. care va fi responsabil pentru redarea în sine. Această metodă ar trebui să returneze o instanță a ReactComponent de clasă, în acest caz, atunci când React efectua re-face-o (copie) vor fi tratate în cel mai bun mod (React detectează existența unor site-uri noi prin crearea unui DOM virtual în memorie). In exemplul de mai sus am creat ekzmeplyar h2, construit ReactComponent.
O altă modalitate de a inițializa ReactComponents în cadrul metodei de redare este prin sintaxa JSX. Exemplul de cod de mai sus este echivalent cu următoarele:
Vă recomandăm să utilizați sintaxa React.DOM în loc de JSX dacă lucrați cu soffescript. deoarece codul va fi ierarhic, cum ar fi, de exemplu, în haml. Cu toate acestea, dacă integrați React într-o aplicație existentă cu erb, puteți re-executa codul existent, transformându-l în JSX.
Acum actualizați pagina în browser.
Excelent! Am făcut prima noastră componentă React. Acum este momentul să vă afișăm înregistrările.
În plus față de metoda de randare, componentele React au capacitatea de a comunica între ele și de a raporta starea lor pentru a determina dacă o randare este necesară sau nu. Trebuie să inițializăm stările componentelor și proprietăților noastre cu valorile cerute:
Metoda getDefaultProps va expune proprietățile unei componente în cazul nostru am uitat să trimită date în timpul inițializării sale, iar metoda getInitialState va genera starea inițială a componentelor noastre. Acum trebuie să afișăm înregistrările care ne sunt furnizate de vizualizarea Rails.
Componenta de înregistrare va afișa un rând al tabelului care conține celulele pentru fiecare atribut de înregistrare. Nu vă faceți griji cu privire la aceste nul în apelurile către React.DOM. *, Ceea ce înseamnă că nu trimitem atribute componentelor. Actualizați acum metoda de redare în componenta Înregistrări cu următorul cod:
Am creat un tabel cu o linie antet și în interiorul corpului tabelului am creat un element Record pentru fiecare înregistrare existentă. Cu alte cuvinte, am implantat componentele React încorporate și personalizate. Răcoros, nu?
Pentru ca nu reacționează prea mult la actualizarea interfeței utilizatorilor, atunci când creăm un element Record, trimitem cheia: record.id cu acesta. Dacă nu facem acest lucru, vom vedea un avertisment în consola browserului (și cel mai probabil vom avea o durere de cap mai târziu).
Puteți vedea aici codul final al acestei secțiuni sau doar modificările de aici.
Comunicarea părinte-descendentă: crearea de înregistrări
Acum când afișăm toate înregistrările disponibile, este bine să adăugăm un formular pentru a crea noi înregistrări, să adăugăm această caracteristică în aplicația React / Rails. La început, trebuie să adăugăm o metodă la controlerul Rails (nu uitați să folosiți parafele puternice):
Nimic fantastic, doar o formă inline Bootstrap. Observați cum afirmăm atributul value pentru a seta valoarea atributului intp și onChange pentru a lega metoda handler, care va fi apelată pentru fiecare apăsare de tastă. Metoda handleChange handler va folosi numele atributului pentru a determina ce intrare a declanșat evenimentul și a actualiza valoarea corespunzătoare a stării:
Utilizăm interpolarea șirurilor pentru a determina dinamic cheile obiectului, echivalentul titlului @setState: e.target.value când numele este egal cu titlul. Dar de ce ar trebui să folosim @setState. De ce nu putem extrage valoarea dorită pentru @state așa cum facem de regulă în obiectele obișnuite JS? Deoarece @setState va efectua 2 acțiuni:
- Actualizați statele componente
- Rulați o verificare / actualizare a unui UI pe baza unei noi stări
Este foarte important să țineți cont de acest lucru de fiecare dată când folosim statul în interiorul componentelor noastre.
Să ne uităm la butonul de trimitere. la sfârșitul metodei noastre de redare:
Am definit atributul dezactivat cu valoarea! @valid (). ceea ce înseamnă că vom scrie metoda validă. care va verifica dacă datele trimise de utilizator sunt corecte.
Pentru simplitate, verificăm @state pentru șiruri goale. Astfel, butonul Creare va fi activat și dezactivat în funcție de existența datelor în câmpuri.
Acum, când avem un controler și o formă gata, este timpul să trimitem noi înregistrări la server. Avem nevoie de un eveniment pentru a procesa formularul, adăugați atributul onSubmit la formularul nostru și metoda handleSubmit (în același mod în care am gestionat evenimentul onChange mai devreme):
Să analizăm noua linie de linie după linie:
- împiedicați trimiterea formularului html
- POST datele de înregistrare nouă la URL-ul curent
- succes invers
Reluarea succesului este partea principală a procesului, după crearea cu succes a unei noi înregistrări, vom fi anunțați despre acest eveniment și statul va fi restabilit la valoarea sa implicită. Rețineți că am menționat că componentele comunică între ele prin @props? Aici, asta este. Componenta curentă trimite datele înapoi la componenta părinte prin intermediul @props.handleNewRecord pentru al notifica despre existența noii înregistrări.
Ai ghicit, ori de câte ori vom crea elementul RecordForm avem nevoie pentru a transfera handleNewRecord proprietate metoda c revine, ceva de genul React.createElement RecordForm, handleNewRecord: @addRecord. Componenta noastră înregistrări mamă are o stare cu toate înregistrările existente, trebuie să o actualizăm în funcție de înregistrarea adăugată.
Adăugați o nouă metodă addRecord în fișierul records.js.coffee și creați un nou element RecordForm. imediat după antetul h2 (în interiorul metodei de redare)
Actualizați fila, completați formularul de o nouă intrare și faceți clic pe Creare ... Nu există întârzieri, poștă și se adaugă imediat după eliminate formularul sabmita, actualizați pagina din nou, pentru a vă asigura că magazinul backend noile date.
Dacă ați utilizat alte cadre de JS cu bare (de exemplu, AngularJS), pentru a pune în aplicare o funcționalitate similară, ai putea fi confruntat cu problema thrash solicitării dvs. POST, deoarece nu conține un jeton CSRF, care necesită șine. De ce nu am întâlnit asta acum? Pur și simplu, vom folosi jQuery pentru a comunica cu backend, și jquery_ujs conducător auto se va adăuga un jeton CSRF în fiecare cerere AJAX pentru noi. Se răcește!
Puteți vedea aici codul final al acestei secțiuni sau doar modificările de aici.
Componente reutilizabile: indicatori reziduali
Ce aplicație poate fi fără indicatori (drăguți)? Să adăugăm blocuri în partea de sus cu informații utile. Scopul nostru este să afișăm 3 valori: creditul total, debitul total și soldul. Se pare că acesta este un loc de muncă pentru 3 componente sau poate pentru unul, dar cu proprietăți?
Utilizăm elementul panou Bootstrap pentru a afișa informațiile în blocuri și pentru a seta culoarea prin proprietatea tip. Am adăugat, de asemenea, un simplu formatator - amountFormat, care citește proprietatea sumă și îl afișează în formatul valutar.
În partea bună, pentru a avea o soluție completă, trebuie să creați un astfel de element (de 3 ori) în interiorul componentei principale și să trimiteți proprietățile necesare, în funcție de ceea ce dorim să afișăm. Să facem mai întâi metoda calculatorului, să deschidem componenta Înregistrări și să adăugăm următoarele metode:
creditele însumează toate înregistrările cu o valoare mai mare de 0, debite - însumează toate înregistrările cu o valoare mai mică decât zero și soldul vorbește de la sine. Acum că metodele de calculator sunt în loc, trebuie doar să creăm elementele AmountBox în interiorul metodei de redare (chiar deasupra componentei RecordForm)
Am terminat cu acest cip! Actualizați pagina în browser, ar trebui să vedeți trei blocuri, sumele defensive pe care le-am calculat mai devreme. Dar așteptați! Există și altceva! Adăugați o intrare nouă și vedeți ce se întâmplă ...
Puteți vedea aici codul final al acestei secțiuni sau doar modificările de aici.
În loc să încheiem
Din moment ce materialul este destul de voluminos, am decis să îl împart în două părți și acesta este primul:
A doua parte va fi despre setState / replaceState. ștergerea și editarea înregistrărilor, refactorizarea și fluxul de date reactive.
Distribuiți acest lucru
Trimiteți-le prietenilor: