Configurați un mediu de reacție, Partea 3

Observați cum în componentă putem crea cât mai multe elemente pe care le dorim adăugând mai multe apeluri către React.createElement (). De asemenea, elemente de recuzită sunt transmise în componentele copilului prin intermediul unui a recuzită Obiect JavaScript, care poate fi apoi accesat în interiorul componentelor prin parametrul funcției recuzită.

Deschis index.html într-un browser pentru a vedea ieșirea React.

Nu voi intra în mai multe detalii aici React.createElement (), și alte subiecte non-JSX, deoarece majoritatea utilizatorilor React aleg să-și scrie componentele utilizând JSX. Vom folosi JSX pentru componentele noastre React pentru restul seriei tutorial.

În mod evident, lipsa instrumentelor, cum ar fi Babel, limitează cât de ușor este să scrieți complet codul React de la zero. Există multe alte instrumente pe care le putem profita de asemenea, cum ar fi un pachet care creează un singur fișier JavaScript din toate bibliotecile React necesare, plus codul nostru de aplicație. Vom descoperi o abordare mai bună în secțiunea următoare, care este la fel de ușor de configurat.

Creați aplicația React

Pentru a rezolva problema setărilor complexe manuale React, Facebook a introdus create-react-app, care este un mod ușor de utilizat pentru a începe dezvoltarea cu React. Acesta vă oferă o configurație completă a construirii, dar nu necesită nicio configurare manuală.

Să mergem mai departe și să instalăm aplicația create-react-app. Tastați următorul cod într-o fereastră de linie de comandă.

npm instalează -g create-react-app

Aceasta va instala aplicația create-react-global la nivel global, astfel încât să puteți accesa din orice director.

Veți avea nevoie de npm instalat pentru a rula această comandă, și Node.js pentru a rula create-react-app. Deoarece npm vine împreună cu Node.js, pur și simplu descărcați și instalați cea mai recentă versiune a Node.js de pe site-ul oficial.

Acum vom crea o nouă aplicație React numită mi-primul-componente. Rețineți că aplicația create-react-create creează în mod automat folderul care conține aplicația dvs., deci trebuie să vă asigurați că vă aflați în directorul în care doriți să fie creat directorul de aplicații.

Rulați aceste comenzi pentru a crea aplicația dvs. și pentru a rula scriptul de pornire.

create-react-app-my-first-components cd-my-first-components / npm start

S-ar putea să dureze un minut sau două pentru a crea-react-app pentru a finaliza instalarea tot. După ce ați terminat, introduceți npm start comanda și o nouă fereastră de browser se va deschide și, după câteva secunde, va fi afișată aplicația dvs. React.

Lucru frumos despre app create-react-app este că include un mini server web și urmărește, de asemenea, fișierele din aplicație pentru modificări. Ori de câte ori se efectuează o modificare, aplicația dvs. este reconstruită, iar fereastra browserului se reîncarcă automat pentru a afișa aplicația actualizată.

În timpul procesului de configurare automată, aplicația create-react-generate generează mai multe fișiere, precum și următoarele trei dosare:

• node_modules
• public
• src

Pentru a vă simți cum creăm componente și le conectăm împreună într-o aplicație generată de aplicația create-react-app, vom crea aceleași componente cu care am lucrat până acum.

Ieșirea implicită a aplicației sugerează modificarea App.js ca punct de plecare, deschideți astfel acest fișier și eliminați apelurile de import pentru logo-ul și fișierele CSS, deoarece nu vom avea nevoie de acestea. De asemenea, putem simplifica componentă și adăugați din cele două componente ale copilului nostru înainte.

Ta App.js fișierul ar trebui să arate astfel:

import React, Component de la "reacție"; clasa App extinde Component render () return ( 
 
Componentele mele de primă reacție!
   
  clasa MyFirstComponent extinde Component render () return ( 
this.props.number: Bună ziua de la React!
 ) clasa MySecondComponent extinde Component render () return ( 
this.props.number: Componenta mea a doua reacție.
  Exportați aplicația implicită;

Salvați modificările și aplicația creați-reacție va actualiza automat aplicația în browser. Acest lucru are ca rezultat aceeași ieșire ca înainte. (Observați că este încărcat în browser prin intermediul serverului web de data aceasta, deși.)

Să facem acest lucru mai modular, totuși, pentru a fi în conformitate cu cele mai bune practici moderne pentru crearea de aplicații React. Creați două fișiere noi în interiorul src dosarul numit MyFirstComponent.js și MySecondComponent.js.

Interior MyFirstComponent.js, adăugați următorul cod:

import React, Component de la "reacție"; class MyFirstComponent extinde Component render () return ( 
this.props.number: Bună ziua de la React!
 ) export implicit MyFirstComponent;

Și înăuntru MySecondComponent.js, adăugați cod similar:

import React, Component de la "reacție"; clasa MySecondComponent extinde Component render () return ( 
this.props.number: Componenta mea a doua reacție.
 ) export implicit MySecondComponent;

În cele din urmă, trebuie să ne actualizăm App.js pentru a importa ambele componente copil, deoarece acestea se află acum în fișiere separate:

import React, Component de la "reacție"; import MyFirstComponent din "./MyFirstComponent"; import MySecondComponent din "./MySecondComponent"; clasa App extinde Component render () return ( 
 
Componentele mele de primă reacție!
   
  Exportați aplicația implicită;

Această abordare a structurării aplicației dvs. React este mult mai modulară și mai portabilă. De asemenea, permite o depanare mai ușoară, deoarece fiecare componentă este autonomă în interiorul propriului modul.

Concluzie

În acest tutorial, am abordat două metode pentru configurarea React local: abordarea manuală și utilizarea instrumentului create-react-app de pe Facebook.

Crearea manuală a aplicației React de la zero și inserarea dependențelor de script direct în interiorul index.html fișierul este destul de ineficient. Pe măsură ce aplicația dvs. scade, iar versiunile diferite ale scripturilor dvs. sunt lansate, actualizarea manuală a scripturilor va deveni rapid imposibil de gestionat. În plus, nu putem folosi funcțiile ES6 sau nu putem scrie componentele noastre în JSX!

Cu ajutorul aplicației create-react-app, pe de altă parte, este un proces foarte lină. Este instalat și inițializat cu câteva comenzi. Odată ce rulează, app-create-react-app reconstruiește aplicația dvs. și actualizează fereastra browserului de fiecare dată când editați fișierele de proiect. Acesta este un flux de lucru foarte frumos atunci când faceți multe schimbări minore, deoarece vă ajută să accelerați dezvoltarea aplicațiilor.

În următorul tutorial, vom crea o aplicație React de la zero, care folosește Webpack și Babel pentru a îmbina și procesa aplicația noastră într-un singur fișier JavaScript. Spre deosebire de aplicația create-react-where, unde totul se face pentru dvs., vom configura manual toate fișierele de configurare și vom discuta de ce ați alege această abordare.