Frontend Development●Principiante

React Fundamentals y Setup

120 min

0 vistas

31 diciembre 2025

Conceptos base de React, Virtual DOM, configuración con Vite y JSX.

¿Qué es React?

Biblioteca de UI: React se enfoca en construir interfaces reutilizables con componentes.
Virtual DOM: Crea una representación en memoria y actualiza solo lo que cambia, mejorando rendimiento.
Declarativo: Describes el resultado esperado y React se encarga del cómo.
Componentes: Piezas pequeñas que se combinan para formar pantallas completas.

Setup con Vite

Crear un proyecto rápido y liviano con npm create vite@latest.
Vite ofrece recarga en caliente, build rápido y configuración moderna.

bash
1npm create vite@latest mi-app-react -- --template react
2cd mi-app-react
3npm install
4npm run dev

JSX

Permite escribir HTML dentro de JavaScript con sintaxis de componentes.
Usa {} para insertar variables y expresiones.
className reemplaza class y estilos se pasan como objeto.

javascript
1function Saludo() {
2  const nombre = "Juan";
3  return <h1>Hola {nombre}</h1>;
4}

Ejemplos de Código

3 ejemplos

Punto de entrada

javascript

1import React from "react";
2import ReactDOM from "react-dom/client";
3import App from "./App.jsx";
4
5ReactDOM.createRoot(document.getElementById("root")).render(
6  <React.StrictMode>
7    <App />
8  </React.StrictMode>
9);

Componente inicial

javascript

1function App() {
2  return (
3    <div className="App">
4      <h1>Hola React</h1>
5      <p>Mi primera aplicación</p>
6    </div>
7  );
8}

Condicional en JSX

javascript

1function Estado({ activo }) {
2  return <span>{activo ? "Activo" : "Inactivo"}</span>;
3}

Recursos

3 recursos disponibles

¡Hora de Practicar!

PrácticaPrincipiante15 min

Práctica guiada - Setup con Vite

Práctica

Crear un proyecto con Vite y modificar el componente App con texto personalizado.

Desafío de Código

EjercicioPrincipiante15 min

Ejercicios - JSX

Ejercicios

(1) Crear saludo dinámico, (2) listas con map, (3) render condicional con ternario.

Documentación Oficial

DocumentaciónPrincipiante15 min

React Docs

Documentación oficial de React.

React