Cómo crear una aplicación web moderna con React desde cero

React es una de las tecnologías más utilizadas actualmente para desarrollar interfaces web modernas, rápidas e interactivas. Su enfoque basado en componentes permite construir aplicaciones grandes dividiéndolas en piezas pequeñas, reutilizables y fáciles de mantener.

En este tutorial veremos cómo crear una aplicación React desde cero y cuáles son las prácticas básicas para comenzar un proyecto moderno.

1. Preparar el entorno

Antes de comenzar necesitas tener instalado Node.js, que incluye npm, el administrador de paquetes que utilizaremos para instalar las dependencias del proyecto.

Puedes comprobar la instalación ejecutando:

node --version
npm --version

Para crear un proyecto React moderno podemos utilizar Vite:

npm create vite@latest mi-app

Selecciona React como framework y JavaScript o TypeScript como lenguaje.

Después entra en la carpeta:

cd mi-app

Instala las dependencias:

npm install

Y ejecuta el servidor de desarrollo:

npm run dev

Vite mostrará una dirección local desde la que podrás visualizar la aplicación.

2. Entender la estructura

Un proyecto React está compuesto principalmente por componentes.

Por ejemplo, podemos crear un componente:

function Saludo() {
    return <h1>Hola, mundo</h1>;
}

export default Saludo;

Después podemos utilizarlo desde otro componente:

import Saludo from "./Saludo";

function App() {
    return (
        <main>
            <Saludo />
        </main>
    );
}

export default App;

Esta es una de las principales ventajas de React: dividir la interfaz en componentes independientes.

3. Trabajar con datos

Los componentes pueden recibir información mediante props:

function Usuario({ nombre }) {
    return <h2>Hola, {nombre}</h2>;
}

Y utilizarlo:

<Usuario nombre="Carlos" />

También podemos manejar información que cambia utilizando useState:

import { useState } from "react";

function Contador() {
    const [contador, setContador] = useState(0);

    return (
        <button onClick={() => setContador(contador + 1)}>
            Clics: {contador}
        </button>
    );
}

Cada vez que el usuario presiona el botón, React actualiza automáticamente la interfaz.

4. Crear una aplicación más profesional

Una aplicación real normalmente necesita varias páginas, componentes reutilizables, formularios y comunicación con APIs.

Para las rutas puedes utilizar React Router. Para consumir una API puedes utilizar fetch:

fetch("https://api.ejemplo.com/productos")
    .then(response => response.json())
    .then(data => console.log(data));

También es recomendable organizar el proyecto por responsabilidades:

src/
├── components/
├── pages/
├── services/
├── hooks/
├── assets/
└── App.jsx

Esta estructura facilita que el proyecto pueda crecer sin convertirse en un conjunto de archivos difíciles de mantener.

5. Diseñar una interfaz moderna

React se encarga principalmente de la interfaz y la lógica, por lo que puedes combinarlo con CSS tradicional, CSS Modules, Tailwind CSS u otras soluciones.

Una buena interfaz debe ser responsive, utilizar componentes reutilizables y mantener una experiencia consistente en móviles, tablets y computadores.

6. Preparar la aplicación para producción

Cuando la aplicación esté terminada puedes generar una versión optimizada:

npm run build

Vite creará los archivos finales que posteriormente podrás desplegar en servicios de hosting compatibles con aplicaciones web estáticas.

Conclusión

Crear una aplicación moderna con React no consiste solamente en aprender JSX. Es importante comprender componentes, props, estado, eventos, consumo de APIs y organización del proyecto.

Una buena forma de aprender es comenzar con proyectos pequeños, como una lista de tareas, un catálogo de productos o un panel administrativo, y posteriormente añadir autenticación, APIs, bases de datos y otras funcionalidades.

React te permite comenzar con una aplicación sencilla y evolucionarla progresivamente hasta convertirla en una aplicación web completa, escalable y profesional.