¿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 simple: 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 es just componentes dentro de componentes.

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

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

That cosa con aspecto de HTML dentro de JavaScript se llama JSX. Te permite describir la pantalla justo donde reside la lógica. React toma lo que tus component return y mantiene sincronizada la página real. Describes qué quieres, y React decide cómo actualizar el navegador.

En este curso editarás App.jsx, el componente main 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 first React component, already escrito para ti.

Qué hacer:

Lee App.jsx: es una function que returns JSX.
Haz clic en el botón Run.
Observa cómo la vista previa de la derecha hace render de lo que devolvió el component.

Ese es todo el ciclo de React: un component returns JSX y React lo muestra en pantalla. A partir de la siguiente lección, tú escribirás el JSX.

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>