Începerea unui nou proiect React este foarte complicată, cu atât de multe instrumente de construcție. Folosește multe dependențe, fișiere de configurare și alte cerințe, cum ar fi Babel, Webpack, ESLint înainte de a scrie o singură linie de cod React. Instrumentul Create React App CLI elimină toate aceste complexități și face aplicația React simplă. Pentru aceasta, trebuie să instalați pachetul folosind NPM și apoi să rulați câteva comenzi simple pentru a obține un nou proiect React.

The create-react-app este un instrument excelent pentru începători, care vă permite să creați și să rulați proiectul React foarte rapid. Nu necesită nicio configurație manuală. Acest instrument include toate dependențele necesare, cum ar fi Webpack , Babel pentru proiectul React în sine și apoi trebuie să vă concentrați doar pe scrierea codului React. Acest instrument configurează mediul de dezvoltare, oferă o experiență excelentă pentru dezvoltatori și optimizează aplicația pentru producție.

Cerințe

Aplicația Create React este întreținută de Facebook și poate funcționa pe orice platformă , de exemplu, macOS, Windows, Linux etc. Pentru a crea un proiect React folosind create-react-app, trebuie să fi instalat următoarele lucruri în sistem.

1. Versiunea nodului >= 8.10
2. Versiunea NPM >= 5.6

Să verificăm versiunea actuală a Nodul și NPM in sistem.

Rulați următoarea comandă pentru a verifica versiunea Node în linia de comandă.

 $ node -v 

Rulați următoarea comandă pentru a verifica versiunea NPM în promptul de comandă.

 $ npm -v 

Instalare

Aici, vom afla cum putem instala React folosind CRA instrument. Pentru aceasta, trebuie să urmăm pașii indicați mai jos.

Instalați React

Putem instala React folosind managerul de pachete npm folosind următoarea comandă. Nu este nevoie să vă faceți griji cu privire la complexitatea instalării React. Managerul de pachete create-react-app npm va gestiona tot ceea ce este necesar pentru proiectul React.

 C:Usersjavatpoint> npm install -g create-react-app 

Creați un nou proiect React

Odată ce instalarea React are succes, putem crea un nou proiect React folosind comanda create-react-app. Aici, aleg numele „reactproject” pentru proiectul meu.

 C:Usersjavatpoint> create-react-app reactproject 

NOTĂ:Putem combina cei doi pași de mai sus într-o singură comandă folosindnpx. npx este un instrument de rulare a pachetelor care vine cu versiunea npm 5.2 și mai sus.

 C:Usersjavatpoint> npx create-react-app reactproject 

Comanda de mai sus va dura ceva timp pentru a instala React și a crea un nou proiect cu numele „reactproject”. Acum, putem vedea terminalul ca mai jos.

Ecranul de mai sus arată că proiectul React este creat cu succes pe sistemul nostru. Acum, trebuie să pornim serverul pentru a putea accesa aplicația din browser. Tastați următoarea comandă în fereastra terminalului.

 $ cd Desktop $ npm start 

NPM este un manager de pachete care pornește serverul și accesează aplicația la serverul implicit http://localhost:3000. Acum, vom primi următorul ecran.

Apoi, deschideți proiectul în Editorul de cod. Aici, folosesc Visual Studio Code. Structura implicită a proiectului nostru arată ca imaginea de mai jos.

În aplicația React, există mai multe fișiere și foldere în directorul rădăcină. Unele dintre ele sunt după cum urmează:

module_noduri:Conține biblioteca React și orice alte biblioteci terțe necesare.public:Acesta deține bunurile publice ale aplicației. Conține index.html unde React va monta aplicația în mod implicit pe element.src:Conține fișierele App.css, App.js, App.test.js, index.css, index.js și serviceWorker.js. Aici, fișierul App.js este întotdeauna responsabil pentru afișarea ecranului de ieșire în React.package-lock.json:Este generat automat pentru orice operațiuni în care pachetul npm modifică fie arborele node_modules, fie package.json. Nu poate fi publicat. Va fi ignorat dacă găsește alt loc decât pachetul de nivel superior.package.json:Deține diferite metadate necesare pentru proiect. Oferă informații către npm, ceea ce permite identificarea proiectului, precum și gestionarea dependențelor proiectului.README.md:Oferă documentația pentru a citi despre subiectele React.

Configurare React Environment

Acum, deschideți src >> App.js fișier și efectuați modificările pe care doriți să le afișați pe ecran. După efectuarea modificărilor dorite, Salvați fișierul. De îndată ce salvăm fișierul, Webpack recompilează codul, iar pagina se va reîmprospăta automat, iar modificările sunt reflectate pe ecranul browserului. Acum, putem crea câte componente dorim, importam componenta nou creată în interiorul App.js fișier și acel fișier va fi inclus în principal index.html fișier după compilare de către Webpack.

Apoi, dacă vrem să facem proiectul pentru modul producție, tastați următoarea comandă. Această comandă va genera versiunea de producție, care este cel mai bine optimizată.

 $ npm build