11. Creando un proyecto react con create-react-app

  ¡Vamos a crearnos ahora nuestros proyectos de realidad!

Vamos a ver dos formas.

La primera va a ser con el clásico Create React App, que, por cierto, tiene una gran ventaja: encontrarás muchísimos proyectos inicializados con esta herramienta. Es decir, podrás acceder a bastantes códigos fuente que usan este tipo de creación.

Esta es la forma que también React nos recomienda para arrancar. Podemos verlo en su documentación oficial, donde se explica paso a paso cómo crear un proyecto con esta herramienta.

Paso a paso:

  1. Creamos una carpeta raíz para almacenar todos nuestros proyectos. Yo la llamé "React intensivo".

  2. Abrimos Visual Studio Code (nueva ventana) y arrastramos la carpeta dentro. Así usamos la interfaz gráfica, aunque también se puede hacer directamente por consola.

  3. Una vez dentro de la carpeta, abrimos una nueva terminal en VS Code.

Según la documentación de React, el comando es:

bash
npx create-react-app <nombre-de-la-app>

Copiamos y pegamos en la terminal, cambiamos el nombre de la app (yo lo dejé por defecto) y presionamos Enter.

El proceso comenzará a crear el proyecto con todo lo necesario. Al finalizar, veremos un mensaje que nos indica cómo acceder y ejecutar el proyecto.

¡Importante!
Mi terminal estaba en la raíz de la carpeta "React intensivo", pero el proyecto se creó dentro de una subcarpeta (por ejemplo, "app"). Por lo tanto, primero debemos ingresar al proyecto:

bash
cd <nombre-del-proyecto>

Luego, ya dentro, podemos ejecutar los comandos que nos sugieren:

  • npm start: Para inicializar el proyecto y verlo en el navegador.

  • npm run build: Cuando queramos subir el proyecto a un hosting.

  • npm test: Para ejecutar pruebas.

  • npm run eject: (Menos común) Para personalizar la configuración.

El comando principal para iniciar cualquier proyecto creado con create-react-app es npm start. Más adelante veremos que hay otra forma de crear proyectos, pero la mayoría de los proyectos que encontrarás se inician con este comando.

¿Qué es npm?

Son las siglas de Node Package Manager, el administrador de paquetes de Node.js.

Si abrimos el proyecto en VS Code, veremos todas las carpetas y archivos creados automáticamente. Sí, puede demorar un poco, pero la ventaja es que te instala todo completo, sin necesidad de agregar nada manualmente.

Por ahora no entraremos en detalle sobre para qué sirve cada archivo o carpeta… eso lo veremos más adelante.

En el siguiente video, veremos otra forma de crear un proyecto React, esta vez con Vite, que es un poco más rápido.

¡Nos vemos en el próximo videito, a toda prueba

Comentarios

Publicar un comentario

Entradas más populares de este blog

29. useEffect

  Tutorial: 29. useEffect en React Introducción a useEffect useEffect es uno de los Hooks más importantes en React que nos permite ejecutar efectos secundarios en nuestros componentes funcionales. Los efectos secundarios son operaciones que pueden incluir peticiones a APIs, suscripciones, manipulación del DOM, etc. 1. Sintaxis Básica La sintaxis básica de useEffect es: javascript useEffect (() => {    // Código a ejecutar }, []) // Array de dependencias Ejemplo visual de la sintaxis: text useEffect(()=>{},[]) 2. Ejemplo Práctico: Sistema de Likes Vamos a construir un componente de likes para entender cómo funciona useEffect : javascript import { useState , useEffect } from "react" ; export function Prueba () {    const [ likes , setLikes ] = useState ( 0 );       const darLike = () => {      setLikes ( likes + 1 );    };       // useEffect ejecutando darLike un...
Leer más

38. 4 Routers

  Tutorial 38.4: Implementando Router en nuestra App de Películas Introducción a React Router Ahora que tenemos nuestra aplicación mostrando películas, necesitamos implementar navegación entre diferentes vistas. Vamos a crear rutas para: Ver la lista de películas (página principal) Ver el detalle de cada película Otras vistas futuras (búsqueda, favoritos, etc.) Paso 1: Estructura de carpetas Primero, vamos a organizar nuestro proyecto con una estructura más profesional: text src/ ├── assets/ ├── components/ │   ├── ContextMovieCard.jsx │   └── MovieCard.jsx ├── data/ ├── pages/ │   └── LandingPage.jsx ├── routers/ │   └── routes.jsx ├── App.css ├── App.jsx ├── index.css └── main.jsx Paso 2: Instalar React Router DOM Abrimos una terminal en nuestro proyecto 1-peliculas y ejecutamos: bash cd 1 -peliculas yarn add react-router-dom O con npm: bash npm install react-router-dom Paso 3: Crear componentes básicos MovieCard.jsx (Componente individual de película) j...
Leer más