¿Qué es React?

Parte de la sección Fundamentos del Journey de React de Coddy. Lección 1 de 42.

React es la biblioteca más popular del mundo para crear interfaces de usuario. Facebook, Netflix, Airbnb: las partes interactivas de la web que usas todos los días están creadas con ella.

La idea principal es sencilla: en lugar de escribir una página enorme, construyes piezas pequeñas y reutilizables llamadas componentes. Un botón es un componente. Una tarjeta de perfil es un componente. Una página completa no es más que componentes dentro de componentes.

Un componente no tiene nada de aterrador: es una función de JavaScript que devuelve lo que debería aparecer en pantalla:

function App() {
    return <h1>Hello, React!</h1>;
}

Eso que parece HTML dentro de JavaScript se llama JSX. Te permite describir la pantalla justo donde se encuentra la lógica. React toma lo que devuelven tus componentes y mantiene sincronizada la página real. Describes qué quieres, y React determina cómo actualizar el navegador.

En este curso editarás App.jsx, el componente principal de una pequeña aplicación de React. La vista previa de la derecha muestra tu aplicación en directo mientras escribes. Construyamos algo.

Desafío

Principiante

Aquí tienes tu primer componente de React, ya escrito por ti.

Qué hacer:

Lee App.jsx: es una función que devuelve JSX.
Presiona el botón Ejecutar.
Observa cómo la vista previa de la derecha muestra lo que devolvió el componente.

Ese es todo el ciclo de React: un componente devuelve JSX y React lo coloca en la pantalla. A partir de la próxima lección, escribirás el JSX tú mismo.

Pruébalo tú mismo

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>