Construir un proyecto de e-commerce en React partiendo desde cero es una de las mejores formas de consolidar tus habilidades como desarrollador frontend. Aquí se recorre paso a paso la preparación del entorno, la inicialización del repositorio y la estructura de carpetas que servirá como base para todo el desarrollo posterior.
¿Cómo inicializar un proyecto React con git y npm?
Antes de escribir una sola línea de código, es fundamental preparar el terreno. El flujo comienza abriendo la terminal y verificando la ubicación actual con el comando pwd [0:52], que muestra la ruta del directorio en el que te encuentras. Esto evita crear archivos en lugares inesperados.
A continuación se crea la carpeta del proyecto con mkdir [1:05]:
mkdir react-shop genera el directorio.cd react-shop te posiciona dentro de él.
Una vez dentro, se ejecutan dos comandos esenciales:
- git init [1:20]: inicializa un repositorio local de Git que más adelante se conectará con un repositorio en la nube.
- npm init [1:33]: arranca la configuración del archivo
package.json, donde se definen nombre, versión, descripción, entry point, keywords, autor y licencia del proyecto.
Durante el proceso de npm init, el entry point se establece en src/index.js [2:10], indicando dónde vivirá el código principal. Las keywords como React y JavaScript [2:38] ayudan a describir con qué tecnologías está construido el proyecto. La licencia elegida es MIT [3:08], una de las más permisivas y populares en el mundo open source.
¿Qué dependencias necesitas instalar primero?
Con el package.json listo, llega el momento de instalar las dependencias principales [3:22]:
bash
npm install react react-dom
- React es la librería central para construir interfaces basadas en componentes.
- ReactDOM es el paquete que permite renderizar esos componentes dentro del DOM del navegador.
Estas dos dependencias son el corazón de cualquier aplicación React y estarán presentes en prácticamente todos los proyectos que construyas.
¿Cuál es la estructura de carpetas recomendada para un proyecto React?
Después de abrir el editor de código —en este caso Visual Studio Code [3:48]— se observa que solo existen package.json, package-lock.json y node_modules. A partir de aquí se construye la arquitectura del proyecto con dos carpetas clave [4:10]:
- src/: contiene todo el código fuente de la aplicación. Aquí se separa claramente la lógica y los componentes del resto de archivos.
- public/: almacena los archivos que estarán disponibles de forma pública en el compilado de producción, como el
index.html.
Dentro de src se crean dos elementos iniciales:
index.js: el archivo de punto de entrada.- La carpeta components/ [4:52], donde vivirán todos los componentes reutilizables.
¿Cómo se crea el primer componente en React?
Dentro de components/ se crea el archivo app.jsx [4:58]. Utilizar la extensión .jsx indica que ese archivo contiene JSX, la sintaxis que combina JavaScript con una estructura similar a HTML. Un snippet o shortcut del editor permite generar rápidamente un stateless component [5:12], es decir, un componente funcional sin estado interno.
El componente App simplemente retorna un "Hola mundo" como primera prueba de vida de la aplicación.
Para que ese componente se muestre en el navegador, el archivo src/index.js necesita la configuración base [5:30]:
javascript
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/app';
ReactDOM.render(<App />, document.getElementById('app'));
- Se importan React y ReactDOM.
- Se llama a
ReactDOM.render() pasando dos argumentos: el componente raíz <App /> y el elemento del DOM donde se montará, identificado mediante document.getElementById('app') [5:55].
Este patrón de render es la pieza que conecta tu código React con el archivo index.html de la carpeta public, donde debe existir un <div id="app"></div>.
¿Qué viene después de la configuración inicial?
Con esta base lista, el siguiente paso natural es integrar herramientas como Babel para transpilar JSX y JavaScript moderno, y Webpack [6:15] para empaquetar el proyecto tanto en modo desarrollo como en producción. Estas configuraciones permiten cumplir con los estándares que las empresas exigen actualmente en el frontend.
Si ya completaste estos pasos, comparte en los comentarios cómo te fue con la inicialización de tu proyecto y qué editor de código prefieres usar.
