TechCodeview

Iniciar un nou projecte React és molt complicat, amb tantes eines de creació. Utilitza moltes dependències, fitxers de configuració i altres requisits com Babel, Webpack, ESLint abans d'escriure una sola línia de codi React. L'eina Create React App CLI elimina totes aquestes complexitats i fa que l'aplicació React sigui senzilla. Per a això, heu d'instal·lar el paquet mitjançant NPM i, a continuació, executar unes quantes ordres senzilles per obtenir un nou projecte React.

El crear-reaccionar-aplicació és una excel·lent eina per a principiants, que us permet crear i executar el projecte React molt ràpidament. No pren cap configuració manualment. Aquesta eina inclou totes les dependències necessàries com Paquet web , Babel per al projecte React en si i després només us heu de centrar a escriure codi React. Aquesta eina configura l'entorn de desenvolupament, ofereix una excel·lent experiència de desenvolupament i optimitza l'aplicació per a la producció.

Requisits

L'aplicació Create React és mantinguda per Facebook i pot funcionar en qualsevol plataforma , per exemple, macOS, Windows, Linux, etc. Per crear un projecte React amb create-react-app, heu d'haver instal·lat les coses següents al vostre sistema.

1. Versió del node >= 8.10
2. Versió NPM >= 5.6

Comprovem la versió actual de Node i NPM en el sistema.

Executeu l'ordre següent per comprovar la versió del node a l'indicador d'ordres.

 $ node -v 

Executeu l'ordre següent per comprovar la versió de NPM a l'indicador d'ordres.

 $ npm -v 

Instal·lació

Aquí, aprendrem com podem instal·lar React CRA eina. Per a això, hem de seguir els passos que es detallen a continuació.

Instal·leu React

Podem instal·lar React mitjançant el gestor de paquets npm mitjançant l'ordre següent. No cal preocupar-se per la complexitat de la instal·lació de React. El gestor de paquets create-react-app npm gestionarà tot el necessari per al projecte React.

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

Creeu un nou projecte React

Un cop la instal·lació de React tingui èxit, podem crear un nou projecte React mitjançant l'ordre create-react-app. Aquí, trio el nom 'reactproject' per al meu projecte.

 C:Usersjavatpoint> create-react-app reactproject 

NOTA:Podem combinar els dos passos anteriors en una sola comanda utilitzantnpx. El npx és una eina d'execució de paquets que inclou la versió npm 5.2 i superior.

 C:Usersjavatpoint> npx create-react-app reactproject 

L'ordre anterior trigarà un temps a instal·lar el React i crear un nou projecte amb el nom 'reactproject'. Ara, podem veure el terminal com a continuació.

La pantalla anterior indica que el projecte React s'ha creat correctament al nostre sistema. Ara, hem d'iniciar el servidor per poder accedir a l'aplicació des del navegador. Escriviu la següent comanda a la finestra del terminal.

 $ cd Desktop $ npm start 

NPM és un gestor de paquets que inicia el servidor i accedeix a l'aplicació al servidor predeterminat http://localhost:3000. Ara tindrem la següent pantalla.

A continuació, obriu el projecte a l'editor de codi. Aquí, estic fent servir Visual Studio Code. L'estructura predeterminada del nostre projecte és com la imatge següent.

A l'aplicació React, hi ha diversos fitxers i carpetes al directori arrel. Alguns d'ells són els següents:

mòduls_nodes:Conté la biblioteca React i qualsevol altra biblioteca de tercers necessària.públic:Manté els béns públics de l'aplicació. Conté l'index.html on React muntarà l'aplicació per defecte a l'element.src:Conté els fitxers App.css, App.js, App.test.js, index.css, index.js i serviceWorker.js. Aquí, el fitxer App.js sempre s'encarrega de mostrar la pantalla de sortida a React.package-lock.json:Es genera automàticament per a qualsevol operació en què el paquet npm modifica l'arbre node_modules o package.json. No es pot publicar. S'ignorarà si troba un altre lloc en lloc del paquet de nivell superior.package.json:Conté diverses metadades necessàries per al projecte. Proporciona informació a npm, que permet identificar el projecte així com gestionar les dependències del projecte.README.md:Proporciona la documentació per llegir sobre temes de React.

Configuració de l'entorn React

Ara, obriu el src >> App.js fitxer i feu els canvis que vulgueu mostrar a la pantalla. Després de fer els canvis desitjats, guardar l'arxiu. Tan bon punt desem el fitxer, Webpack recompila el codi i la pàgina s'actualitzarà automàticament i els canvis es reflectiran a la pantalla del navegador. Ara, podem crear tants components com vulguem, importar el component acabat de crear dins del App.js fitxer i aquest fitxer s'inclourà a la nostra pàgina principal index.html fitxer després de la compilació per Webpack.

A continuació, si volem fer el projecte per al mode de producció, escriviu l'ordre següent. Aquesta ordre generarà la construcció de producció, que s'optimitza millor.

 $ npm build