Iniciar un nuevo proyecto de React es muy complicado, con tantas herramientas de compilación. Utiliza muchas dependencias, archivos de configuración y otros requisitos como Babel, Webpack, ESLint antes de escribir una sola línea de código React. La herramienta Create React App CLI elimina todas esas complejidades y simplifica la aplicación React. Para esto, necesita instalar el paquete usando NPM y luego ejecutar algunos comandos simples para obtener un nuevo proyecto de React.

El crear-reaccionar-aplicación es una excelente herramienta para principiantes, que le permite crear y ejecutar proyectos React muy rápidamente. No requiere ninguna configuración manualmente. Esta herramienta envuelve todas las dependencias requeridas como paquete web , Babel para el proyecto React en sí y luego debe concentrarse en escribir código React únicamente. Esta herramienta configura el entorno de desarrollo, proporciona una excelente experiencia de desarrollador y optimiza la aplicación para producción.

Requisitos

La aplicación Create React es mantenida por Facebook y puede funcionar en cualquier plataforma , por ejemplo, macOS, Windows, Linux, etc. Para crear un proyecto React usando create-react-app, debe haber instalado lo siguiente en su sistema.

1. Versión del nodo >= 8.10
2. Versión NPM >= 5.6

Comprobemos la versión actual de Nodo y MNP en el sistema.

Ejecute el siguiente comando para verificar la versión del nodo en el símbolo del sistema.

 $ node -v 

Ejecute el siguiente comando para verificar la versión de NPM en el símbolo del sistema.

 $ npm -v 

Instalación

Aquí, aprenderemos cómo podemos instalar React usando CRA herramienta. Para ello, debemos seguir los pasos que se detallan a continuación.

Instalar reaccionar

Podemos instalar React usando el administrador de paquetes npm usando el siguiente comando. No hay necesidad de preocuparse por la complejidad de la instalación de React. El administrador de paquetes npm create-react-app administrará todo lo necesario para el proyecto React.

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

Crea un nuevo proyecto de React

Una vez que la instalación de React sea exitosa, podemos crear un nuevo proyecto de React usando el comando create-react-app. Aquí, elijo el nombre 'reactproject' para mi proyecto.

 C:Usersjavatpoint> create-react-app reactproject 

NOTA:Podemos combinar los dos pasos anteriores en un solo comando usandonpx. npx es una herramienta de ejecución de paquetes que viene con npm 5.2 y versiones superiores.

 C:Usersjavatpoint> npx create-react-app reactproject 

El comando anterior tardará algún tiempo en instalar React y crear un nuevo proyecto con el nombre 'reactproject'. Ahora, podemos ver el terminal como se muestra a continuación.

La pantalla anterior indica que el proyecto React se creó correctamente en nuestro sistema. Ahora, necesitamos iniciar el servidor para poder acceder a la aplicación en el navegador. Escriba el siguiente comando en la ventana de terminal.

 $ cd Desktop $ npm start 

NPM es un administrador de paquetes que inicia el servidor y accede a la aplicación en el servidor predeterminado http://localhost:3000. Ahora, obtendremos la siguiente pantalla.

A continuación, abra el proyecto en el editor de código. Aquí, estoy usando Visual Studio Code. La estructura predeterminada de nuestro proyecto se ve como la imagen de abajo.

En la aplicación React, hay varios archivos y carpetas en el directorio raíz. Algunos de ellos son los siguientes:

módulos_nodo:Contiene la biblioteca React y cualquier otra biblioteca de terceros necesaria.público:Posee los activos públicos de la aplicación. Contiene el index.html donde React montará la aplicación de forma predeterminada en el elemento.origen:Contiene los archivos App.css, App.js, App.test.js, index.css, index.js y serviceWorker.js. Aquí, el archivo App.js siempre es responsable de mostrar la pantalla de salida en React.paquete-lock.json:Se genera automáticamente para cualquier operación en la que el paquete npm modifica el árbol node_modules o package.json. No se puede publicar. Se ignorará si encuentra cualquier otro lugar que no sea el paquete de nivel superior.paquete.json:Contiene varios metadatos necesarios para el proyecto. Proporciona información a npm, lo que permite identificar el proyecto y manejar las dependencias del proyecto.README.md:Proporciona la documentación para leer sobre temas de React.

Configuración del entorno de reacción

Ahora, abre el src >> Aplicación.js archivo y realice los cambios que desee mostrar en la pantalla. Después de realizar los cambios deseados, ahorrar el archivo. Tan pronto como guardamos el archivo, Webpack vuelve a compilar el código, la página se actualizará automáticamente y los cambios se reflejarán en la pantalla del navegador. Ahora, podemos crear tantos componentes como queramos, importar el componente recién creado dentro del aplicación.js archivo y ese archivo se incluirá en nuestro archivo principal índice.html archivo después de compilarlo con Webpack.

A continuación, si queremos realizar el proyecto para el modo de producción, escriba el siguiente comando. Este comando generará la compilación de producción, que está mejor optimizada.

 $ npm build