Comenzar un proyecto de React con una estructura profesional marca la diferencia entre un desarrollo ordenado y uno que se vuelve difícil de mantener. Aquí se explica paso a paso cómo crear la carpeta de trabajo, inicializar el repositorio, instalar las dependencias y organizar los archivos tal como lo hace un desarrollador en el mercado actual.
¿Cómo se inicializa un proyecto de React profesional?
Antes de escribir una sola línea de código, es necesario preparar el entorno. El primer paso consiste en crear la carpeta del proyecto desde la terminal [0:42]:
mkdir platzi-video crea el directorio.cd platzi-video nos ubica dentro de él.
Una vez dentro, lo primero que un buen desarrollador debe hacer es inicializar un repositorio con Git [1:01]. Ejecutar git init genera un repositorio local que más adelante se puede conectar a un servicio en la nube como GitHub. Este paso garantiza control de versiones desde el inicio.
El siguiente comando clave es npm init -y [1:28]. La bandera -y pre-configura el archivo package.json con valores por defecto, evitando responder cada pregunta de forma manual. Este archivo es fundamental porque almacena el nombre del proyecto, las dependencias instaladas, los scripts y toda la información que identifica al proyecto.
¿Qué estructura de carpetas se recomienda?
La organización de archivos sigue un estándar adoptado por la comunidad de desarrolladores [2:14]. Mantener esta estructura facilita que cualquier persona del equipo entienda dónde vive cada parte del código.
¿Para qué sirve la carpeta src?
La carpeta src (abreviación de source) es donde se escribe todo el código del proyecto [2:30]. Dentro de ella se crea la subcarpeta components, destinada a alojar los componentes de React. También se genera el archivo de entrada principal llamado index.js [3:08], que funciona como punto de arranque de la aplicación.
¿Qué papel juega la carpeta public?
La carpeta public contiene los archivos que se van a publicar en producción [2:44]. Aquí se coloca el index.html, el documento HTML base que el navegador cargará cuando la aplicación esté lista para desplegarse.
La estructura resultante queda así:
src/ → código fuente.src/components/ → componentes de React.src/index.js → archivo de entrada.public/index.html → archivo HTML principal.package.json → configuración del proyecto.
¿Cómo se instala React y qué precauciones tomar?
Con la estructura lista, se procede a instalar las dos dependencias esenciales con el comando [3:30]:
bash
npm install react react-dom
React es la biblioteca principal que permite construir interfaces mediante componentes. React-dom se encarga de renderizar esos componentes en el DOM del navegador. Ambas trabajan en conjunto y son indispensables para cualquier proyecto web con React.
Durante la instalación, es importante revisar las vulnerabilidades que npm reporta [3:55]. Si el resultado indica cero vulnerabilidades, el paquete es seguro. En caso de recibir un warning, se debe evaluar si conviene utilizar esa dependencia o buscar una alternativa. React cuenta con el respaldo de una comunidad activa y de Facebook, por lo que se mantiene libre de vulnerabilidades conocidas.
Tras la instalación aparecen nuevos elementos en el proyecto:
- node_modules: carpeta que contiene todos los paquetes y dependencias descargadas [4:55]. No se modifica manualmente.
- package-lock.json: archivo que registra las versiones exactas de cada paquete instalado [4:30]. Garantiza que todo el equipo trabaje con las mismas versiones.
- package.json actualizado: ahora incluye la sección
dependencies con react y react-dom [4:42].
Con estos pasos completados, el proyecto tiene la base necesaria para continuar con la configuración de herramientas como Babel, Webpack y ESLint, además de crear el primer componente que muestre contenido en pantalla. Si ya seguiste el proceso, comparte en los comentarios cómo organizas tus proyectos de React y qué herramientas adicionales utilizas desde el inicio.
