Contenido del curso
Maquetación con React.js
Interacción con React.js
Librería de Iconos Personalizados
Herramientas avanzadas: escalabilidad, organización y persistencia
- 13

Persistencia de datos con localStorage en React
25:48 min - 14

Custom Hook para Local Storage en React
17:53 min - 15

Cómo organizar carpetas de componentes React
07:40 min - 16

Feature-First Directories en React
09:12 min - 17

Tips para naming y abstracción de componentes React
12:24 min - 18

useEffect para controlar renders costosos
14:04 min - 19

Estados de carga y error
15:04 min - 20
![[]](https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_6449ac11a2423e6ce31f42d7_6449ac11a2423e6ce31f42e2_98s.jpg)
[]
16:19 min - 21

Loading Skeletons animados en React con CSS
11:59 min - 22

¿Qué es React Context?
20:57 min - 23

useContext
10:47 min - 24

¿Qué son los React Portals?
14:03 min - 25

Toggle de modales con estado previo en React
03:33 min - 26

Formularios en React sin recargar página
15:08 min - 27

Cómo crear addTodo con Context API
15:15 min
Deploy
Próximos pasos: React #UnderTheHood
Bonus: creando proyectos en React desde cero
Cómo crear un proyecto React con npx
Resumen
Crear un proyecto de React JS desde cero sin clonar repositorios ajenos es más sencillo de lo que parece. Con Create React App tienes un boilerplate listo, dependencias instaladas y una estructura base para empezar a construir tu propia aplicación en minutos.
Esta guía te muestra el flujo paso a paso usando npx, qué archivos genera la herramienta y qué hacer cuando algo falla en consola. Es útil si vienes del curso introductorio de React y quieres dar el salto a proyectos propios.
¿Qué es Create React App y para qué sirve?
Create React App es una herramienta oficial que arma toda la configuración inicial de un proyecto de React por ti. Instala la última versión de React y React DOM, prepara una estructura de carpetas y deja listo un entorno de testing para que solo te preocupes por programar.
¿Qué hace Create React App exactamente? Genera un proyecto de React con dependencias, scripts y configuración predeterminada, incluyendo un primer componente y un test de ejemplo, sin que tengas que configurar Webpack ni Babel manualmente.
Es una de las herramientas más longevas de la comunidad y, aunque hoy compite con alternativas más modernas, sigue siendo una puerta de entrada confiable para quien empieza.
¿Cómo instalar Create React App con npx paso a paso?
Ubícate en la carpeta donde quieres alojar tu proyecto y ejecuta el comando desde tu terminal. La estructura es directa: comando, nombre del proyecto, enter.
- Abre la terminal en la carpeta destino.
- Ejecuta
npx create-react-app cra-testreemplazandocra-testpor el nombre que quieras. - Espera a que termine la instalación.
Aquí entra en juego una distinción que vale la pena entender bien.
¿Cuál es la diferencia entre npm y npx?
Ambos pertenecen al mismo ecosistema, pero su comportamiento es distinto. npm instala dependencias de forma persistente en tu package.json y en node_modules, mientras que npx las descarga, las ejecuta una vez y luego las elimina.
¿Por qué se usa npx en lugar de npm para Create React App? Porque npx ejecuta la herramienta sin dejarla instalada globalmente en tu computadora. Solo corre lo necesario para crear el proyecto y después limpia las dependencias temporales.
Esto evita que acumules versiones viejas de Create React App y reduce conflictos a futuro.
¿Qué archivos y carpetas genera Create React App?
Al listar el contenido del proyecto con ls verás una estructura estándar lista para producción local. Cada elemento cumple un rol específico dentro de tu aplicación de React.
- La carpeta
srccontiene tus componentes y la lógica de la app. - La carpeta
publicguarda los archivos estáticos como elindex.html. - El
package.jsonlista dependencias y scripts disponibles. node_modulesalmacena todas las librerías instaladas.- El
READMEdocumenta los comandos básicos del proyecto.
Dentro de package.json también encontrarás varias dependencias de testing preconfiguradas. Create React App incluye un archivo de setup test y un primer test del componente principal, así que puedes empezar a escribir pruebas desde el día uno.
El componente inicial trae una estructura sencilla, pensada para que la modifiques y la conviertas en tu punto de partida.
¿Qué hacer si Create React App da error al instalarlo?
Si ya habías usado Create React App en el pasado, es probable que tengas una instalación global que genere conflictos con la versión actual. La consola te dará pistas, pero el ruido puede asustar al principio.
- Lee el mensaje de error con calma, sin pánico.
- Copia y pega el error en Google o en foros como Stack Overflow.
- Limpia la caché de npm si el problema persiste.
- Desinstala Create React App de la instalación global.
- Vuelve a ejecutar
npx create-react-appcon normalidad.
¿Cómo soluciono conflictos con instalaciones previas de Create React App? Limpia la caché de npm, elimina la versión global instalada y vuelve a ejecutar el comando con npx. Eso resuelve la mayoría de los choques de versiones.
La paciencia con la consola es una habilidad que vas a usar toda tu carrera, así que entrénala desde ahora.
¿Existen alternativas más modernas a Create React App?
Sí, y son varias. La comunidad ha desarrollado herramientas que compiten en popularidad y que proponen formas distintas de estructurar un proyecto de React, con tiempos de compilación más rápidos y configuraciones más opinadas.
No se trata de descartar Create React App, sino de tener criterio para elegir según el contexto. Cada herramienta tiene supuestos sobre cómo deberías trabajar, y conocerlos te permite decidir cuál encaja mejor con tu proyecto.
¿Qué herramienta usas tú para arrancar proyectos de React? Cuéntalo en los comentarios y comparte tu experiencia con quienes recién empiezan.