Reacționează cursul de crash pentru începători, partea 1

În această serie de tutorial vom face un scufundări direct în utilizarea React, pe măsură ce construim o aplicație complet funcțională pentru a afișa o galerie de filme.

Învățați cum să construiți o aplicație de la zero este o mare oportunitate de a practica folosind toate caracteristicile cheie ale React, în timp ce aliniați abilitățile de dezvoltare. Sunt urmate toate metodele recomandate și cele mai bune practici, care sunt esențiale pentru crearea de aplicații React moderne.

Vom crea o nouă aplicație React folosind aplicația Create-reacționează aplicație , dezvoltat de Facebook, precum și în detalierea următoarelor subiecte React:

• Componente 
• JSX
• Recuzită
• Stat
• Structurarea corectă a aplicației
• Utilizarea funcțiilor ES6 pentru dezvoltarea aplicațiilor moderne

Ce vom construi

Pentru a face mai multă distracție învățarea despre dezvoltarea React, vom construi o aplicație pe deplin funcțională, în loc să prezentăm fragmente generice de cod atunci când sunt acoperite noi aspecte ale React.

Împreună vom construi filmul "Movie Mojo", o aplicație pentru a afișa o galerie de filme de bun simț. După finalizare, aplicația va încărca câteva filme la încărcarea paginii și va încărca mai mult atunci când se face clic pe un buton. În cele din urmă, veți putea introduce propriile titluri de filme printr-un formular personalizat care, atunci când va fi trimis, va insera dinamic din nou un nou film în galerie.

Cerințe preliminare

Acesta este un tutorial de nivel intermediar și veți beneficia foarte mult dacă aveți cunoștințe anterioare despre următoarele subiecte:

• Funcțiile ES6, cum ar fi funcțiile, clasele și modulele săgeților.
• Aflați ce sunt componentele React, recuzita și statul.
• Unele experiențe folosind Node.js și NPM.
• Cel puțin un nivel de bază al competenței JavaScript.

Cele mai multe dintre acestea sunt acoperite în detaliu pe măsură ce mergem, dar aș recomanda să vă spăl pe anumite zone, dacă este necesar.

Să ne pregătim

Vom folosi Create-reacționează aplicație instrument pentru a configura aplicația noastră React. Este extrem de ușor de utilizat și ne va permite să ne concentrăm direct pe codarea aplicației noastre imediat, fără a trebui să navigăm printr-un proces complicat de configurare.

A folosi Create-reacționează aplicație, va trebui să aveți Node.js și NPM instalat. Puteți verifica dacă sunt disponibile ambele prin tastarea următoare într-o fereastră de linie de comandă:

nod -v

Și apoi:

npm -v

Dacă ambele sunt instalate, veți vedea numărul versiunii curente pentru fiecare.

MacBook-Pro: ~ davidgwyer $ node -v v6.11.1 MacBook-Pro: ~ davidgwyer $ npm -v 5.3.0 MacBook-Pro: ~ davidgwyer $

Dacă trebuie să instalați sau să actualizați Node.js și NPM atunci cea mai simplă cale este de a descărca Node.js de pe pagina web oficială. Node.js este asociat cu NPM astfel încât nu este necesar să efectuați o instalare separată.

A instala Create-reacționează aplicație la nivel global, tastați acest lucru în orice fereastră de linie de comandă:

npm instalează -g create-react-app

Acum putem merge mai departe și putem folosi Create-reacționează aplicație pentru a schimba noua noastră aplicație React. Acesta va crea, de asemenea, un dosar de nivel superior pentru a conține fișierele noastre de proiect. Deschideți o fereastră de linie de comandă și navigați la dosarul pe care doriți să-l localizați (de ex. / Desktop) și introduceți următoarele:

create-react-app-film-mojo

Va dura un minut pentru a finaliza, dar când se întâmplă, ar trebui să vedeți un mesaj similar cu acesta:

Succes! Crearea filmului-mojo la / Users / davidgwyer / Desktop / film-mojo În interiorul acelui director puteți rula mai multe comenzi: start thread Începe serverul de dezvoltare. construirea firelor Bundle aplicația în fișiere statice pentru producție. test de fire Începe testul de încercare. fire eject Elimină acest instrument și copiază dependențe de construire, fișiere de configurare și scripturi în directorul de aplicații. Dacă faceți acest lucru, nu vă puteți întoarce! Vă sugerăm să începeți prin a scrie: cd film-mojo fire start Happy hacking!

Un nou film-Mojo folderul va fi creat cu următoarea structură de fișier:

src dosarul este locul în care vă veți edita fișierele de proiect, iar când veniți să implementați aplicația, acestea vor fi grupate și adăugate la public dosar, gata pentru distribuire.

Pentru a vedea aplicația probă în browserul dvs., hai să profităm de mini serverul web inclus Create-reacționează aplicație. Trebuie să fim în dosarul proiectului pe care tocmai l-am creat, deci în fereastra liniei de comandă, tastați:

cd film-mojo

Și apoi:

npm start

Această comandă simplă are trei lucruri principale. O sa:

• Compilați aplicația React de exemplu.
• Deschideți o nouă fereastră de browser și afișați aplicația noastră.
• Monitorizați modificările la fișierele proiectate.

Odată compilat, veți vedea următoarea ieșire:

Compilați cu succes! Acum puteți vizualiza filmul-mojo în browser. Local: http: // localhost: 3000 / În rețeaua dvs.: http://192.168.0.15:3000/ Rețineți că dezvoltarea de dezvoltare nu este optimizată. Pentru a crea o construcție de producție, utilizați construirea firelor.

Iată exemplul de aplicație care rulează în browser.

Când se fac modificări în aplicația dvs., aceasta va fi recompusă automat și reîncărcată în fereastra browserului. Aceasta este o caracteristică foarte misto Create-reacționează aplicație și vă va salva o mulțime de timp în timpul dezvoltării!

De asemenea, vă permite să vă concentrați asupra codării aplicației fără a fi distrasă de necesitatea de a recompila manual și de a actualiza continuu fereastra browserului pentru a vedea ultimele modificări.

Poate că cel mai bun flux de lucru, dacă aveți spațiul disponibil pe ecran, este ca browserul și editorul de text să fie deschise unul lângă altul. Astfel, ori de câte ori faceți o schimbare la unul dintre fișierele de proiect, veți vedea modificările afișate aproape instantaneu în fereastra browserului.

Să încercăm să facem o schimbare a proiectului nostru de eșantion.

În interiorul src dosar, deschis App.js în editorul de text. Încercați să schimbați linia:

Pentru a începe, editați src / App.js și salvați pentru a reîncărca.

la:

Bine ați venit în aplicația "Movie Mojo" React!

Imediat ce salvați modificările, aplicația React se recompila automat și fereastra browserului se reîmprospătează. Dacă ați rearanjat spațiul de lucru așa cum vi s-a sugerat mai sus, atunci veți vedea cât de instantaneu este acesta.

Structurarea aplicației noastre

Să stabilim structura aplicației noastre pe care o vom folosi pentru restul acestui tutorial.

Create-reacționează aplicație instrumentul face o treabă excelentă de schelă a aplicației noastre, dar avem totuși flexibilitatea de a-l optimiza pentru a se potrivi nevoilor noastre.

În primul rând, să scăpăm de fișierele pe care nu mai avem nevoie de la noi src pliant. Nu avem nevoie de lucrători de serviciu în aplicația noastră, deci ștergeți registerServiceWorker.js fişier. Aceasta este menționată în index.js, deschideți-o într-un editor și ștergeți toate referințele, astfel încât să pară următoarele:

import Reacționează de la "reacționează"; import ReactDOM de la "react-dom"; import "./index.css"; aplicația de import de la "./App"; ReactDOM.render (, document.getElementById ( 'root'));

Apoi, ștergeți logo.svg fișier și editați App.js pentru a elimina referințele la acesta. Fișierul dvs. actualizat ar trebui să arate astfel:

import React, Component de la "reacție"; import "./App.css"; clasa App extinde Component render () return ( 
 
 
Bine ați venit la React
 
 
 Bine ați venit în aplicația "Movie Mojo" React! 
 
 );  exportă aplicația implicită;

De asemenea, putem să scăpăm de App.test.js fişier. Acest lucru ne va lăsa cu următoarele fișiere în src:

• index.js
• index.css
• App.js
• App.css

Vom crea mai multe componente, așa că să creăm un folder dedicat pentru a le stoca pe toate src, creaza un nou componente folder și adăugați App.js fișier. Aplicația noastră nu va fi compilată în mod corespunzător până când actualizăm câteva referințe.

În index.js, actualizați calea pentru a importa  componente:

importați aplicația din "./components/App";

Si in App.js, actualizați calea spre App.css:

import "... /App.css";

Salvați modificările și asigurați-vă că aplicația dvs. se recompila cu succes.

Acum suntem aproape gata să începem să codificăm aplicația noastră "Movie Mojo". În primul rând, însă, să ne familiarizăm cu modul în care este oferită aplicația noastră.

Aruncăm o privire la index.js. Acesta este fișierul care face efectiv aplicația noastră DOM. Aceasta face acest lucru prin ReactDom.render () , care are două argumente. Primul argument este componenta pe care dorim să o facem. În cazul nostru, acesta este  componentă, care este componenta de nivel superior (și în prezent numai) din aplicația noastră.

Al doilea argument specifică elementul țintă DOM pe care dorim să-l monteze aplicația React. În mod implicit, "create-react-app" creează automat acest element. Dacă aruncați o privire înăuntru public dosar, există un index.html care conține a