Como crear una aplicación React con create-react-app

React es una biblioteca jаvascript de código abierto diseñada para crear interfaces gráficas de usuario. Desarrollado por Facebook y la comunidad de software libre. Hay más de mil desarrolladores libres en el proyecto.

Se ha vuelto muy popular en la comunidad de desarrollo web en los últimos años y ofrece sólidas oportunidades de trabajo en el mercado Front-end en muchos países.

Front-end: El desarrollo web Front-end consiste en la conversión de datos en una interfaz gráfica para que el usuario pueda ver e interactuar con la información de forma digital usando HTML, CSS y jаvascript.

¿Qué es create-react-app?

Existen varias maneras de crear un proyecto con React, una de ellas es instalando las herramientas necesarias (Babel, WebPack, etc.) de manera manual, para ello se necesita tener ciertos conocimientos para poder configurar dichas herramientas de la manera adecuada; esto puede ser algo desmotivante e intimidante para alguien que recién comienza a familiarizarse con esta tecnología.

create-react-app es una forma más sencilla de poder crear proyectos pre-configurados y listos para usarse, omitiendo de esta manera la configuración inicial permitiéndonos trabajar de inmediato en nuestro proyecto. Create React App no maneja bases de datos o lógica de back-end; simplemente crea una canalización de compilación de frontend, por lo que puede usarla con cualquier backend que desee. Debajo del capó, usa Babel y webpack, pero no necesitas saber nada sobre ellos.

Como crear una aplicación React

Para poder crear un nuevo proyecto de React usando create-react-app necesitamos tener instalado en nuestro ordenador tanto node.js como npm.

Para instalar estos dos paquetes, dependencias o software como los quiera llamar:

Node.js es un entorno en tiempo de ejecución multiplataforma, de código abierto, para la capa del servidor basado en el lenguaje de programación jаvascript, asíncrono, con E/S de datos en una arquitectura orientada a eventos y basado en el motor V8 de Google.

npm es el sistema de gestión de paquetes por defecto para Node.js.

Si estamos ejecutando windows - Administradores de versiones de Node de Windows:

nodista - En este tutorial utilizaremos esta Opcion
nvm-windows

Si usamos OSX o Linux - Gestores de versiones de Node de OSX o Linux:

Descargamos NodistSetup-v0.9.1.exe y lo instalamos normalmente como solemos hacerlo con un programa en nuestro ordenador. Una vez que contemos con Node y npm bastará con seguir los siguientes pasos:

Para verificar que los tenemos instalados podemos utilizar los siguientes comandos: node --version y npm --version

En una terminal (y en el directorio de su preferencia) ejecutar: npx create-react-app my-app. Este comando instalará de manera global el paquete create-react-app.

Si anteriormente instaló create-react-app globalmente a través npm install -g create-react-app, le recomendamos que desinstale el paquete usando npm uninstall -g create-react-app o yarn global remove create-react-app para asegurarse de que npx siempre use la última versión.

Cuando crea una nueva aplicación, la CLI usará npm o Yarn para instalar las dependencias, según la herramienta que use para ejecutar create-react-app.

Ejecutar cualquiera de estos comandos creará un directorio llamado my-app dentro de la carpeta actual. Dentro de ese directorio, generará la estructura del proyecto inicial e instalará las dependencias transitivas:

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── serviceWorker.js
    └── setupTests.js

Una vez finalizada la creación del proyecto se puede ejecutar npm start que inicializará un servidor de desarrollo.

npm test o yarn test: Ejecuta el observador de prueba en un modo interactivo. De forma predeterminada, ejecuta pruebas relacionadas con los archivos modificados desde la última confirmación.

npm run build o yarn build: Crea la aplicación para la producción en la carpeta build. Empaqueta correctamente React en modo de producción y optimiza la compilación para obtener el mejor rendimiento.

La compilación se minimiza y los nombres de archivo incluyen los hashes.

Su aplicación está lista para ser implementada.

PD:// Para cerrar la aplicacion o el servidor de desarrollo cerrar la consola o el CMD... :)