Crearea unei aplicații React necesită configurarea unor instrumente de construcție precum Babel și Webpack. Aceste instrumente de construcție sunt necesare, deoarece sintaxa JSX a React este un limbaj pe care browserul nu îl înțelege.

Pentru a rula aplicația React, trebuie să vă transformați JSX în JavaScript simplu, pe care browserele îl înțeleg.

Creați aplicația React (CRA) este un instrument pentru a crea aplicații React cu o singură pagină, care este susținut oficial de echipa React.

Scriptul generează fișierele și folderele necesare pentru a porni aplicația React și a o rula în browser. Acest lucru vă permite să vă concentrați asupra codificării aplicației dvs. fără a fi nevoie să vă deranjați cu configurațiile de construire.

Dependențele pe care le creează-reacționează-aplicația

Deși nu puteți vedea Babel sau Webpack listate ca dependențe în generat package.json fișier, CRA folosește în continuare Babel și Webpack sub capotă. Doar că configurațiile vă sunt ascunse în interiorul react-scripts pachet.

Când te uiți în package.json fișierul de react-scripturi, veți vedea toate pachetele necesare pentru ca React să funcționeze în browser. Are 58 de pachete, de la linia 31 la 88:

facebook / create-react-app
Configurați o aplicație web modernă executând o singură comandă. Contribuiți la dezvoltarea facebook / create-react-app prin crearea unui cont pe GitHub.
Comanda Start React Scripts Scripturi NPM Create React App

Sunt o mulțime de pachete! Să o descompunem puțin pentru a înțelege pentru ce sunt folosite aceste pachete.

Vă rugăm să rețineți că acest articol a fost scris folosind aplicația Create React versiunea 4.0.1 ca referință. Acest articol vă va ajuta să înțelegeți ce se întâmplă sub capotă atunci când utilizați scripturi Create React App NPM.

Babel

Scopul principal al Babel este de a face codul dvs. lizibil de browserele mai vechi. De la lansarea ES 2015, browserele au înregistrat progrese lente, dar constante, în implementarea noilor API-uri și caracteristici JavaScript.

Cele mai avansate browsere, cum ar fi Chrome și Safari, pot accepta noi versiuni JavaScript, dar JSX este o caracteristică numai React care nu face parte din versiunile ES.

Babel transformă codul dvs. JavaScript modern în versiunea mai veche, apoi adaugă polifenituri, o bucată de cod care implementează caracteristici lipsă în browser, dar necesare aplicației dvs.

ESLint

ESLint este un linter JavaScript care vă va scana codul și va semnaliza orice erori de cod. Biblioteca vă va avertiza din consolă dacă aveți erori. De asemenea, se joacă bine cu un editor de cod modern, cum ar fi VSCode.

Glumă

Jest este o bibliotecă de testare de Facebook care se joacă foarte bine cu React. Dependențele pentru Jest vă permit să scrieți scripturi de test pentru aplicația dvs. fără a fi nevoie să instalați o altă bibliotecă de testare.

PostCSS

PostCSS este un plugin JavaScript pentru a vă transforma CSS-ul. Plugin-urile PostCSS vă pot depăși CSS-ul, pot suporta sintaxele variabilelor și mix-urilor, transpile sintaxa CSS viitoare și multe altele, în funcție de configurațiile sale.

Webpack

Webpack este un pachet de module pentru JavaScript care pune laolaltă tot ce este necesar pentru aplicația dvs. Această bibliotecă poate rula, de asemenea, sarcini precum rularea Babel, Jest, ESLint și PostCSS deasupra codului dvs.

Acum, că aveți o idee pentru ce sunt folosite dependențele, să continuăm să înțelegem ce react-scripts chiar în spatele scenei.

Ce fac scripturile de reacție

React-scripturile sunt pur și simplu scripturi pentru a rula instrumentele de construcție necesare pentru a transforma sintaxa React JSX în JavaScript simplu programatic.

Există patru scripturi furnizate de acest pachet:

"scripts: {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
},
Comanda scripturilor generate de CRA

Când rulați unul dintre scripturi, /bin/react-scripts.js va fi executat pentru a începe procesul. Acest script va analiza argumentele pe care le-ați transmis în apel. Acceptă numai pornirea, construirea, testarea și scoaterea argumentelor.

Orice alt argument pe care l-ați trecut va face ca scriptul să returneze un script necunoscut în jurnal:

1611183667 932 Comanda Start React Scripts Scripturi NPM Create React App
Ieșire consolă script necunoscută CRA

Când treceți un argument valid, acesta va rula scripturile situate în interiorul /scripts pliant. Să începem prin a ne uita la start.js scenariu.

Cum funcționează procesul de pornire a scripturilor de reacție

Cu start argument, NPM va începe procesul de a face un server de dezvoltare disponibil pentru aplicația dvs. React. Iată o listă de sarcini pentru acest script:

  • Setați mediul de construcție în development pentru Node și Babel
  • Asigurați-vă că variabilele de mediu sunt citite pentru procesul de construire
  • Verificați dacă pachetele instalate în proiectul dvs. nu sunt depășite
  • Verificați dacă codul este sau nu în TypeScript
  • Importați pachetele necesare pentru proces, în principal module legate de Webpack
  • Verificați dacă există portul disponibil și IP-ul gazdei, valorile implicite sunt 0.0.0.0:3000
  • Rulați compilatorul și ascultați toate mesajele de pe Webpack. Webpack se va ocupa de utilizarea Babel, ESLint și orice alte instrumente pentru a vă pregăti codul
  • În timp ce Webpack rulează, scriptul vă va deschide browserul și va porni serverul de dezvoltare

Serverul de dezvoltare creat de WebpackDevServer va crea, de asemenea, un ascultător pentru modificările din fișierul dvs. JavaScript. Când efectuați modificări și salvați fișierul JavaScript, serverul de dezvoltare vă va recompila codul și va reîmprospăta rapid browserul.

Cum se utilizează comanda react-scripts build

build comanda va porni procesul de creare a unei aplicații React gata de producție pentru dvs. În cea mai mare parte, face același pas ca un start comanda, cu excepția faptului că setează mediul de construcție la production.

În loc de a verifica porturile disponibile și de a rula un server de dezvoltare, scriptul va rula build funcţie, care va grupa toate fișierele separate într-un singur bundle.js fişier. Construcția de producție se va asigura, de asemenea, că codul dvs. este optimizat și minimizat pentru a vă asigura că are cele mai bune performanțe.

Dacă ați rulat deja build comandă înainte, scriptul va lua dimensiunea fișierului curent și îl va compara cu următoarea versiune. Vă va arăta cât de mult s-a schimbat dimensiunea fișierului:

1611183667 683 Comanda Start React Scripts Scripturi NPM Create React App
React arată comparația după gzip în consolă

Rezultatul final al acestei comenzi poate fi găsit în build/ folder, care este generat la rădăcina proiectului dvs.

Cum se utilizează comanda react-scripts test

test comanda va rula orice scripturi de test pe care le-ați scris folosind Glumă. Testele dvs. vor fi rulate într-un mediu Node. Jest va rula sub modul de ceas interactiv, ceea ce înseamnă că de fiecare dată când salvați un fișier, va rula din nou testele, cum ar fi modul în care start comanda recompilează codul.

Puteți salva fișierele de testare oriunde în interiorul src/ folder, iar scriptul va găsi și va executa orice fișier cu .test.js sau .spec.js extensii. De asemenea, va rula orice .js fișier sub __tests__/ pliant.

Puteți vedea rezultatul testului de la terminal:

1611183668 2 Comanda Start React Scripts Scripturi NPM Create React App
Jurnalul consolei cu rezultatul comenzii de testare react-scripts

Rețineți că comanda de testare a CRA acoperă doar testarea componentelor și logicii de afaceri într-un mediu stabil. Pentru a rula un test end-to-end în browser, trebuie să utilizați o altă bibliotecă de testare.

Cum se utilizează comanda react-scripts eject

Ultima comandă, eject, este folosit pentru a elimina dependența de react-scripts și expuneți instrumentele de construcție și configurațiile pe care le puteți modifica.

Toate fișierele de configurare de la react-scripts va fi copiat în rădăcina proiectului config/ folder, iar scripturile pentru a rula construirea vor fi copiate în scripts/ pliant. Dependențele vor fi, de asemenea, mutate în root package.json fişier.

Această comandă este o operație cu sens unic. După ce ați ieșit din CRA înființat, nu îl puteți anula. Dacă v-ați transferat codul într-un sistem de gestionare a codului sursă precum Git, puteți anula modificările cu git checkout sau git reset.

În general, nu este nevoie să executați această comandă, deoarece CRA a furnizat deja configurații sensibile, potrivite pentru proiecte mici și mijlocii. Dacă sunteți interesat să aflați mai multe, am scris o postare despre scoaterea aplicației React aici:

Ar trebui să scoateți aplicația Create React?

Concluzie

Pe măsură ce mai mulți oameni folosesc CRA, echipa de dezvoltare va primi mai multe feedback-uri despre modul în care instrumentul este utilizat în proiecte reale. Înțelegerile obținute de echipa de dezvoltare vor asigura că CRA va rămâne la curent cu cele mai noi instrumente și va avea cele mai bune practici pentru crearea aplicațiilor React.

Mulțumesc că ai citit. Sper că acest articol te-a ajutat să înțelegi cum funcționează CRA sub capotă 🙂

Mai multe despre React: