11 - Generar Proyecto de React JS

 Bienvenida

¡Hola! Bienvenido a esta sección donde vamos a crear el front-end para nuestra aplicación usando React. Lo haremos de manera sencilla, explicando algunos componentes pero sin profundizar demasiado, para que aprendas rápido y podamos avanzar con agilidad.

📋 Prerrequisitos

Para llegar a esta sección, debes tener completa la carpeta de API (back-end) que creamos en la primera sección. Yo lo tengo corriendo en mi terminal:

https://imagen-terminal-api.png

También tengo una carpeta front creada en la sección de Angular. Si te saltaste Angular, no pasa nada, crearemos otro front-end con React.

🚀 Comenzando

Paso 1: Verificar instalaciones

Vamos a traer nuestra terminal y movernos a la carpeta del proyecto. Verificamos que tengamos instalado:

bash

npm -v

bash

npx -v

Ambos deben mostrar la versión instalada.

Paso 2: Instalar Node.js (si es necesario)

En caso de no tener Node.js instalado:

1. Ve a Chrome y busca "Node.js"

2. Entra a la sección de descargas

3. Descarga la versión correspondiente a tu sistema operativo

4. Ejecuta el instalador (siguiente, siguiente, continuar, finalizar)

5. Reinicia la terminal

6. Verifica nuevamente con npm -v y npx -v

Paso 3: Crear el proyecto React

Ejecutamos en la terminal:

bash

npx create-react-app front-end-react

Explicación:

• npx busca un template que cumpla con la especificación

• create-react-app es el boilerplate oficial de React

• front-end-react es el nombre de nuestro proyecto

El proceso comenzará a:

• Descargar archivos necesarios

• Instalar dependencias (React, React DOM, React Scripts, etc.)

• Configurar el proyecto base

Nota: Esto puede tomar unos minutos dependiendo de tu velocidad de internet.

Paso 4: Estructura del proyecto creado

Una vez terminada la instalación, verás esta estructura:

text

front-end-react/
├── node_modules/     # Módulos npm instalados
├── public/           # Archivos públicos
│   ├── index.html    # Punto de entrada HTML
│   └── ...
├── src/              # Código fuente principal
│   ├── App.js        # Componente principal
│   ├── App.css
│   ├── index.js      # Punto de entrada JS
│   └── ...
├── .gitignore        # Archivos a ignorar por Git
├── package.json      # Dependencias y scripts
└── README.md         # Documentación

Paso 5: Iniciar el proyecto

bash

cd front-end-react
npm start

Esto:

• Iniciará el servidor de desarrollo

• Abrirá automáticamente el navegador en localhost:3000

• Mostrará la aplicación React funcionando

Paso 6: Explorar el código inicial

En src/App.js:

jsx

function App() {
  return (
    <div className="App">
      <h1>Bienvenido a React</h1>
    </div>
  );
}

Característica importante: React usa JSX - una sintaxis que permite escribir HTML dentro de JavaScript.

Paso 7: Organizar nuestro proyecto

Vamos a crear una estructura organizada para nuestra aplicación:

Crear carpeta de componentes:

bash

mkdir src/components

Dentro creamos:

• src/components/Movie.js - Para detalles de una película

• src/components/Movies.js - Para múltiples películas

• src/components/MovieList.js - Para listar y gestionar películas

Crear carpeta de servicios:

bash

mkdir src/services

Dentro creamos:

• src/services/MovieService.js - Para conectar con nuestra API

Estructura final organizada:

text

src/
├── components/
│   ├── Movie.js
│   ├── Movies.js
│   └── MovieList.js
├── services/
│   └── MovieService.js
├── App.js
└── index.js

🎯 Lo que haremos en los próximos pasos

1. Instalar Bootstrap y Bootstrap Icons para el diseño

2. Crear componentes funcionales con React Hooks

3. Conectar con nuestra API usando servicios

4. Implementar CRUD completo para películas

5. Manejar estados y efectos secundarios

📝 Notas importantes

• React usa componentes como bloques de construcción

• JSX parece HTML pero es JavaScript

• El estado maneja datos dinámicos en componentes

• Los efectos manejan operaciones secundarias

• Los hooks simplifican el uso de características de React

✅ Verificación

Asegúrate de que:

• Tu API está corriendo en el puerto 5000 (o el que configuraste)

• React está corriendo en el puerto 3000

• No hay errores en la terminal

• Puedes ver la página de bienvenida de React

🚀 Siguientes pasos

En el siguiente video instalaremos Bootstrap y Bootstrap Icons para darle estilo a nuestra aplicación y comenzaremos a programar nuestros primeros componentes.

---

💡 Tip: Si tienes problemas con los puertos, verifica que no haya conflictos. React generalmente usa el 3000, pero si está ocupado, te preguntará si quieres usar otro.

¡Listo! Ya tenemos nuestro proyecto React configurado y organizado.