Configuración del proyecto: Vite, layout y servidor de desarrollo
Cree una aplicación React con Vite (o una herramienta similar), comprenda la estructura básica de carpetas, ejecute un servidor de desarrollo y verifique el renderizado con un componente pequeño.
Configuración del proyecto: Vite, layout y servidor de desarrollo es una lección gratuita de React Academy en CoddyKit. Esta es la lección 2 de 3. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de React Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Academy incluye 3 lecciones en total.
Descripción general de la configuración
Objetivo: Cree un proyecto rápidamente, aprenda la estructura de carpetas e inicie un servidor de desarrollo con recarga en caliente.
- Inicialización de un proyecto con Vite (o similar)
- Ubicación de los archivos
- Inicio y comprobación de la aplicación
Requisitos previos
Requisitos previos:
- Node.js LTS y npm instalados
- Acceso a una terminal
- Uso básico de la CLI (cd, ls)
Genere la estructura con Vite
Cree el proyecto con una herramienta rápida:
- Genere la estructura inicial (por ejemplo, npm create vite@latest)
- Seleccione React (JavaScript)
- Instale las dependencias (npm install)
Elementos esenciales de las carpetas
Estructura (habitual):
- index.html: contiene
div#root - src/main.jsx: crea la raíz y renderiza App
- src/App.jsx: su componente
Inicie el servidor de desarrollo
Servidor de desarrollo:
- Inícielo con npm run dev
- Abra la URL local
- Edite App.jsx; los cambios se muestran al instante (recarga en caliente)
Compruebe el renderizado
Renderice una aplicación App pequeña para confirmar que la configuración funciona; cambie el texto para ver la recarga en caliente.
<div id="root"></div>
Archivo del punto de montaje
Resumen
Resumen: Genere la estructura con Vite, aprenda dónde se encuentran index.html, main.jsx y App.jsx, inicie el servidor de desarrollo y compruebe el renderizado con un componente pequeño.
Preguntas frecuentes
¿La lección «Configuración del proyecto: Vite, layout y servidor de desarrollo» es gratis?
Sí — el texto completo de «Configuración del proyecto: Vite, layout y servidor de desarrollo» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de React Academy, actualiza a CoddyKit PRO. El curso de React Academy incluye 3 lecciones en total.
¿Qué aprenderé en «Configuración del proyecto: Vite, layout y servidor de desarrollo»?
Cree una aplicación React con Vite (o una herramienta similar), comprenda la estructura básica de carpetas, ejecute un servidor de desarrollo y verifique el renderizado con un componente pequeño. Practicas React Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar React Academy?
No se requiere experiencia previa. React Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 3.
¿Cuánto tiempo toma la lección «Configuración del proyecto: Vite, layout y servidor de desarrollo»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de React Academy?
Sí. Cada lección de React Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Inicio con React: conceptos y configuración
- Configuración del proyecto: Vite, layout y servidor de desarrollo
- Primer componente y renderizado