Lección 1.3: Creación del primer proyecto con Create React App

TL;DR: En esta lección, aprenderemos a configurar nuestro primer proyecto de React utilizando "Create React App" (CRA). Esencialmente, CRA es una herramienta que nos ahorra mucho tiempo y trabajo al darnos una estructura base de aplicación React bien configurada y lista para usar.

¡Pero Jorge, qué es Create React App y por qué lo necesitamos?

¡Excelente pregunta! Create React App es un entorno que viene con todo lo que necesitamos para comenzar un proyecto de React. Es una herramienta creada por los desarrolladores de Facebook (sí, los mismos que hicieron React) para ayudarte a arrancar con una nueva aplicación React sin tener que preocuparte por la configuración. Te proporciona un entorno de desarrollo que te permite usar las últimas características de JavaScript, proporciona un buen ambiente de desarrollo que te permite usar hot reloading (que es como magia, cada cambio que hagas en tu código se reflejará en tu aplicación en tiempo real), y optimiza tu aplicación para la producción.

Cómo usar Create React App para crear nuestro primer proyecto de React

1. Abre tu terminal o línea de comandos. En Windows, puedes usar "Command Prompt" o "PowerShell". En MacOS, puedes usar "Terminal". Asegúrate de tener instalado Node.js y npm (los cuales ya instalamos en la lección 1.2).

2. Navega hasta el directorio donde deseas crear tu nuevo proyecto de React. Puedes hacer esto utilizando el comando cd (change directory). Por ejemplo, si quieres crear tu proyecto en el escritorio, podrías usar el comando cd Desktop.

3. Ahora vamos a crear nuestro nuevo proyecto de React. Para esto, utilizaremos el comando npx, que es una herramienta que viene con npm y nos permite ejecutar paquetes. Escribimos el siguiente comando en la terminal:

   npx create-react-app mi-primera-app

4. Asegúrate de reemplazar "mi-primera-app" con el nombre que desees para tu proyecto. Este comando descargará todo lo necesario y creará un nuevo proyecto con el nombre que hayas elegido.

5. Una vez que el proceso haya terminado, deberías ver un nuevo directorio con el nombre de tu proyecto en la ubicación que elegiste. Ahora puedes entrar en ese directorio con el comando cd mi-primera-app (recuerda cambiar "mi-primera-app" por el nombre de tu proyecto).

6. Ahora, para arrancar nuestra aplicación, escribimos el siguiente comando en la terminal:

   npm start

7. Y voilà, tu aplicación React debería estar corriendo en el navegador. Puedes visitarla en la dirección "localhost:3000".

   ¡Ahora es tu turno! Juega un poco con tu nueva aplicación. Echa un vistazo a los archivos, cambia algunas cosas, y observa cómo se reflejan en el navegador. En la próxima lección, exploraremos más a fondo el proyecto y explicaremos la estructura de los archivos. ¡Nos vemos entonces!