¡Esta es una revisión vieja del documento!

React

React es una biblioteca Javascript de código abierto diseñada para crear interfaces de usuario con el objetivo de facilitar el desarrollo de aplicaciones en una sola página.

Web oficial

Resumen

La sintaxis JSX permite escribir código como si fuese HTML.

Sin JSX:

import { createElement } from 'react'
 
const Desplegable = (props) => {
    return createElement(
        "details", null,
        createElement("summary", null, props.titulo),
        createElement("p", null, props.contenido),
    )
}

Con JSX:

import { createElement } from 'react'
 
const Desplegable = (props) => {
  return (
    <details>
      <summary>{props.titulo}</summary>
      <p>{props.contenido}</p>
    </details>
  )
}

Las etiquetas siempre deben cerrarse (<etiqueta></etiqueta> o <etiqueta />)
El nombre de los componentes utilizan Pascal-case
Variables, constantes, funciones, atributos HTML… en camel-case
El atributo HTML class se escribe className porque class es palabra reservada en JavaScript.
El atributo HTML for se escribe htmlFor porque for es palabra reservada en JavaScript.

Crear un proyecto rápidamente con Vite:

npx create-vite

Para ver los cambios que hagamos en directo, conviene lanzar el servicio web con:

npm run dev

Siempre hay que asociar el componente raíz a un elemento del DOM. Esto lo podemos ver en el fichero src/main.jsx:

import { App } from './App.jsx'
 
ReactDOM.createRoot( 
  document.querySelector('#root')
).render(<App />)

Quiere decir que asociaremos el componente App al elemento de la web que tenga id="root" como podemos ver en el fichero index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="src/style.css">
  </head>
  <body>
    <div id="root"></div>
(...)