Introducción
Como desarrollador e instructor técnico con años de experiencia en React, .NET y tecnologías modernas, he visto cómo React ha evolucionado hasta convertirse en uno de los frameworks más esenciales para la creación de interfaces web.
En este curso rápido, te guiaré paso a paso para que aprendas los fundamentos de React JS en solo 20 minutos, usando un enfoque claro, práctico y adaptado a 2025.
¿Qué es React JS?
React JS es una biblioteca de JavaScript desarrollada por Meta (Facebook) para construir interfaces de usuario basadas en componentes reutilizables. Se basa en el principio de la programación declarativa y permite crear aplicaciones SPA (Single Page Applications) rápidas y eficientes.
¿Por qué aprender React en 2025?
En 2025, React sigue siendo uno de los stacks más demandados por las empresas tecnológicas gracias a:
- Su ecosistema robusto (Next.js, React Native, etc.)
- Gran comunidad y soporte.
- Excelente rendimiento para interfaces dinámicas.
- Compatible con IA generativa y microfrontend.
🛠️ Tecnologías que usaremos
- Lenguaje base: JavaScript (ES6+)
- Entorno de desarrollo: Vite.js o Create React App
- Editor recomendado: VS Code
- Complementos útiles: React Developer Tools, ESLint, Prettier
⚙️ Paso a paso: Aprende React en 20 minutos
1. Instalar el entorno
npm create vite@latest my-react-app --template react
cd my-react-app
npm install
npm run devEsto crea una aplicación React moderna usando Vite, más rápida que Create React App.
2. Estructura de carpetas
📁 src
┣ 📄 App.jsx
┣ 📄 main.jsx
┗ 📁 components/
App.jsxes el componente principal. Puedes crear otros dentro de/components.
3. Crear tu primer componente
// src/components/Greeting.jsx
function Greeting({ name }) {
return <h2>Hola, {name} 👋</h2>;
}
export default Greeting;4.Usarlo en tu App
// src/App.jsx
import Greeting from './components/Greeting';
function App() {
return (
<div>
<h1>Mi Primer App React</h1>
<Greeting name="Juan" />
</div>
);
}
export default App;React te permite reutilizar componentes y pasarles datos a través de props.
5. Hooks: Usa useState en 1 minuto
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Contador: {count}</p>
<button onClick={() => setCount(count + 1)}>Sumar</button>
</div>
);
}useState es uno de los hooks más usados en React. Controla estados sin clases.
6.Manejo de eventos
function handleClick() {
alert("¡Hiciste clic!");
}
<button onClick={handleClick}>Clic aquí</button>Los eventos en React se escriben en camelCase y usan funciones JS.
✅ Buenas prácticas
- Usa nombres significativos para tus componentes.
- Divide tu aplicación en componentes pequeños y reutilizables.
- Mantén el estado local solo donde sea necesario.
- Usa extensiones como React DevTools para depurar más fácil.
❌ Errores comunes y cómo evitarlos
| Error | Solución |
|---|---|
Usar class en lugar de className | React usa className para evitar conflictos con JS |
| Olvidar exportar componentes | Asegúrate de usar export default |
| No envolver JSX en un solo elemento | Usa <div> o <>...</> para agrupar nodos |
🙋 FAQs sobre React en 2025
¿Necesito saber TypeScript para usar React?
No es obligatorio, pero sí recomendable. Puedes comenzar con JavaScript puro y migrar luego a TS.
¿React sigue siendo relevante en 2025?
Sí. Junto con Next.js y React Native, es uno de los stacks más usados en desarrollo web y móvil.
¿Puedo combinar React con inteligencia artificial?
Claro, muchos proyectos actuales integran React con APIs como ChatGPT, Hugging Face o TensorFlow.js.
🌟 Ejemplo real
En mis sesiones de formación técnica, suelo guiar a los alumnos a crear un contador con historial, usando useState y useEffect, como primer mini-proyecto real. Este tipo de ejemplos refuerzan la comprensión de hooks y eventos desde el inicio.
