React

1. 1

   ¿Qué es React?

   Te damos la bienvenida. Si nunca has escrito una línea de JavaScript y no tienes claro qué es un "framework", estás en el sitio adecuado. Al terminar...

   What React isComponents as functionsVirtual DOM intuitionRendering JSXCreating a Vite app
   25 min
2. 2

   JSX y Components

   En la lección anterior viste un componente que devolvía algo con pinta de HTML: return <h1>Hello, React</h1>;. Eso debería haberte chirriado un poco....

   JSX syntax rulesSingle root elementClassName vs classEmbedding expressions with {}Defining componentsComposing components
   30 min
3. 3

   Props

   Todos los componentes que has escrito hasta ahora tenían el contenido fijo en el código. Greeting saluda siempre al mismo nombre, Card muestra...

   Passing props as attributesReceiving props objectDestructuring props in signatureDefault valuesThinking about prop shapes
   30 min
4. 4

   State con useState

   Todos los componentes que has escrito hasta ahora devuelven la misma salida para las mismas props, siempre. Eso está bien para un título o una...

   UseState hookReading stateCalling the setterUpdater function formNever mutate stateCounter pattern
   35 min
5. 5

   Manejo de eventos

   Un componente que solo renderiza a partir de props y estado no es interactivo por sí solo: algo tiene que darse cuenta de cuándo el usuario pulsa un...

   OnClick handlerOnChange basicsPassing functions vs calling themEvent objectPassing handlers as props
   30 min
6. 6

   Renderizado condicional y listas

   Casi todas las pantallas que has usado en tu vida muestran una cosa u otra según alguna condición: un aviso de «tienes mensajes nuevos» que solo...

   && for show/hideTernary for either/orMapping arrays to JSXThe key propWhy keys need to be stable
   30 min
7. 7

   Formularios y Controlled Inputs

   Escribe una letra en un <input> de HTML normal y el navegador se encarga de todo: el elemento del DOM va guardando en silencio lo que has tecleado y...

   Controlled input patternValue and onChange togetherMulti-field form stateOnSubmit and preventDefaultGathering form data
   35 min
8. 8

   Effects con useEffect

   Hasta ahora, el trabajo de un componente ha sido mirar sus props y su estado actuales y responder a una sola pregunta: qué debe verse en pantalla...

   What counts as a side effectUseEffect signatureDependency arrayRunning on mount onlyCleanup functionSubscribe/unsubscribe pattern
   40 min
9. 9

   Obtención de datos

   Casi ninguna aplicación real se las arregla mostrando solo los datos que el usuario ya tiene en pantalla. En algún momento un componente necesita...

   Fetch inside useEffectLoading/error/data statesAbortController cleanupPreventing setState after unmountMention TanStack Query as a next step
   40 min
10. 10

    Composición de Components

    Has construido una tarjeta con borde y sombra, y queda bien. Ahora necesitas esa misma tarjeta alrededor de una foto, alrededor de un formulario de...

    Children propWrapping componentsPassing JSX as propsLifting state upThinking in component trees
    35 min
11. 11

    Context y useContext

    Tu aplicación tiene un interruptor de modo oscuro. El interruptor vive en el panel de ajustes, pero quien necesita saber su valor es un botón que...

    CreateContextContext.ProviderUseContextWhen context is the right toolContext vs prop drilling tradeoffs
    35 min
12. 12

    useReducer

    Un formulario de pago empieza siendo simple. Hay un valor, así que añades useState. Luego necesita un mensaje de error, o sea otro useState. Luego...

    When to reach for useReducerReducer function shapeAction objectsDispatchCombining useReducer with useContext
    35 min
13. 13

    Hooks personalizados

    Escribiste un cajón que se abre y se cierra. Tres líneas de useState y un manejador que invierte un booleano. Luego lo mismo para un desplegable, y...

    Extracting stateful logic into a functionUse prefix conventionUseToggle exampleUseLocalStorage exampleHooks rules
    35 min
14. 14

    Rendimiento y Memoization

    Tu aplicación tiene una tabla con dos mil filas y una caja de búsqueda encima. Cada pulsación se siente pesada: escribes y medio segundo después...

    React.memo for componentsUseMemo for expensive computationsUseCallback for stable function referencesWhen memoization is overkillMeasuring before optimizing
    35 min
15. 15

    Enrutamiento con React Router

    Todo lo que has construido hasta ahora vive en una sola dirección. Hay una única página y, sea lo que sea lo que quieras enseñar al usuario, lo...

    Installing react-router-domBrowserRouterRoutes and RouteLink for navigationUseParamsUseNavigate
    40 min
16. 16

    Pruebas de Components de React

    Cambias una línea en un componente compartido y después te pasas veinte minutos haciendo clic por toda la aplicación para comprobar que no se ha roto...

    Vitest + React Testing Library setupRender and screenGetByRole queriesUserEvent for interactionsWriting one good button test
    40 min
17. 17

    Proyecto final: Aplicación de tareas

    Hasta ahora cada lección te ha ido dando una idea cada vez, con un ejemplo pequeño alrededor. Las aplicaciones reales no son así. En una aplicación...

    Combining state, lists, controlled inputsCustom hook for localStorage persistenceSmall routing setupPutting it together
    60 min

Cada lección, examen y respuesta del tutor aparece en tu idioma. El tutor de IA responde en el idioma en que le hablas.

See how hiring teams interview engineers on React, in production-like environments.