Añadir React a un sitio web

You don’t have to build your whole website with React. Adding React to HTML doesn’t require installation, takes a minute, and lets you start writing interactive components right away.

Aprenderás

How to add React to an HTML page in one minute
What is the JSX syntax and how to quickly try it
How to set up a JSX preprocessor for production

Añade React en un minuto

React se ha diseñado desde un inicio para una adopción gradual. La mayoría de los sitios web no están (y no necesitan estar) construidos completamente con React. Esta guía te muestra como añadir «pequeñas gotas de interactividad» una página HTML existente.

Pruébalo con tu propio sitio web o un archivo HTML vacío. Todo lo que necesitas es una conexión a internet y un editor de texto como Notepad o VSCode). (¡Chequea aquí nuestra guía sobre cómo puedes configurar tu editor!).

Paso 1: Añade un elemento HTML raíz

Primero, abre la página HTML que quieres editar. Añade una etiqueta <div> vacía que marque el lugar en que quieres mostrar algo con React. Asigna a este <div> un valor único para el atributo id. Por ejemplo:

<!-- ... existing HTML ... -->

<div id="like-button-root"></div>

<!-- ... existing HTML ... -->

Se llama «raíz» porque es donde comenzará el árbol de React. Puedes ubicar un etiqueta HTML raíz como esta en cualquier lugar dentro de la etiqueta <body>. Déjala vacía, porque React reemplazará su contenido con tu componente de React.

Puedes tener tantas etiquetas HTML raíz como necesites en una página.

Paso 2: Añade las etiquetas script

En la página HTML, justo antes de cerrar la etiqueta </body>, añade tres etiquetas <script> para los siguientes archivos:

react.development.js te permite definir componentes de React.
react-dom.development.js le permite a React renderizar elementos HTML en el DOM.
like-button.js ¡Es donde escribirás tu componente en el próximo paso!

Tu HTML debe lucir así:

    <!-- end of the page -->
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <script src="like-button.js"></script>
  </body>
</html>

Atención

¡Antes de desplegar en un sitio público, asegúrate de reemplazar development.j con production.min.js! Los compilados de desarrollo de React proporcionan mensajes de error útiles, pero ralentizan tu sitio web por mucho.

Paso 3: Crea un componente de React

Crea un archivo que se llame like-button.js junto a tu página HTML, añade este fragmento de código y guarda el archivo. Este código define un componente de React llamado LikeButton. (Aprende más sobre como hacer componentes en la Guía rápida)

'use strict';

function LikeButton() {
  const [liked, setLiked] = React.useState(false);

  if (liked) {
    return 'You liked this!';
  }

  return React.createElement(
    'button',
    {
      onClick: () => setLiked(true),
    },
    'Like'
  );
}

Paso 4: Añade tu componente de React a la página

Por último, añade tres líneas al final de like-button.js. Estas líneas de código se encargan de encontrar el <div> que has añadido al HTML en el primer paso, crear una raíz de React y luego mostrar el componente de React del botón «Like» dentro de ella:

const rootNode = document.getElementById('like-button-root');
const root = ReactDOM.createRoot(rootNode);
root.render(React.createElement(LikeButton));

¡Felicidades! ¡Acabas de renderizar tu primer componente de React en tu sitio web!

¡Puedes reutilizar componentes!

Puede que quieras mostrar componentes de React en múltiples lugares en la misma página HTML. Esto es útil si las partes de tu página controladas por React están separadas unas de otras. Puedes hacerlo poniendo múltiples etiquetas raíz en tu HTML y luego renderizar componentes de React dentro de ellas con ReactDOM.createRoot(). Por ejemplo:

En index.html, añade un elemento contenedor adicional <div id="another-root"></div>.
En like-button.js, añade tres líneas más al final:

const anotherRootNode = document.getElementById('another-root');
const anotherRoot = ReactDOM.createRoot(anotherRootNode);
anotherRoot.render(React.createElement(LikeButton));

Si necesitas renderizar el mismo componente en muchos lugares puedes asignar un atributo class de CSS en lugar de id a cada raíz, y luego encontrarlas todas. Aquí hay un ejemplo que muestra tres botones «Like» y pasa datos a cada uno.

Paso 5: Minifica JavaScript para producción

El código no minificado de JavaScript puede ralentizar significativamente los tiempos de carga para tus usuarios. Antes de desplegar tu sitio web a producción es una buena idea minificar sus scripts.

Si no tienes un paso de minificación para tus scripts, aquí hay una forma de configurarlo.
Si ya estás minificando los scripts de tu aplicación, tu sitio estará listo para producción si te aseguras de que el HTML desplegado carga las versiones de React que terminan en production.min.js, como estas:

<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>

Prueba React con JSX

Los ejemplos de arriba dependen de funcionalidades que son compatibles de forma nativa con los navegadores. Es por esto que like-button.js utiliza una llamada a una función para decirle a React qué tiene que mostrar:

return React.createElement('button', {onClick: () => setLiked(true)}, 'Like');

Sin embargo, React también ofrece una opción para usar JSX, una sintaxis de JavaScript similar a HTML. Permite escribir:

return <button onClick={() => setLiked(true)}>Like</button>;

Estos dos fragmentos de código son equivalentes. JSX es una sintaxis popular para describir marcado en JavaScript. Muchas personas lo encuentran familiar y útil para escribir código de UI—tanto con React como con otras bibliotecas.

Puedes interactuar con la transformación de marcado HTML en JSX usando este convertir en línea.

Prueba JSX

La forma más rápida de probar JSX en tu proyecto es añadir el compilador de Babel como una etiqueta <script> a la página. Ponla antes de like-button.js, y luego añade el atributo type="text/babel" a la etiqueta <script> para like-button.js:

  <script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script src="like-button.js" type="text/babel"></script>
</body>

Ahora puedes abrir like-button.js y reemplazar

return React.createElement(
  'button',
  {
    onClick: () => setLiked(true),
  },
  'Like'
);

con el código JSX equivalente:

return (
  <button onClick={() => setLiked(true)}>
    Like
  </button>
);

Puede parecer un poco inusual en un inicio mezclar JSX on marcado, ¡pero te llegará a gustar! Consulta Escribir marcado con JSX para una introducción. Aquí hay un archivo HTML de ejemplo con JSX que puedes descargar y jugar con él.

Atención

El compilador de Babel con <script> está bien para aprender y crear demos sencillos. Sin embargo, ralentiza tu sitio web y no es adecuado para producción. Cuando estés listo para avanzar, eliminar la etiqueta <script> y elimina el atributo type="text/babel" que añadiste en este paso. En cambio, en la próxima sección configurarás un preprocesador JSX para convertir todas las etiquetas <script> de JSX a JS.

Añade JSX a un proyecto

Añadir JSX a un proyecto no requiere herramientas complicadas como un bundler (empaquetador) o un servidor de desarrollo. Añadir un preprocesador de JSX es bastante parecido a añadir un preprocesador de CSS.

Ve a la carpeta de tu proyecto en la terminal, y pega estos dos comandos (¡Asegúrate de tener instalado Node.js!):

npm init -y (si falla, aquí hay una solución)
npm install @babel/cli@7 babel-preset-react-app@10

Solo necesitas npm para instalar el preprocesador de JSX. No lo necesitarás para nada más. Tanto React como el código de la aplicación se pueden quedar como etiquetas <script> sin cambios.

¡Felicidades! Acabas de añadir una configuración de JSX lista para producción a tu proyecto.

Corre el preprocesador de JSX

Puedes preprocesar JSX de forma tal que cada vez que guardes un archivo con JSX dentro, la transformación se vuelva a ejecutar y convierta el JSX en un archivo nuevo con JavaScript simple que el navegador puede entender. Aquí puedes ver cómo hacer la configuración:

Crea una carpeta llamada src.
En tu terminal, ejecuta este comando: npx babel --watch src --out-dir . --presets babel-preset-react-app/prod (¡No esperes a que termine! Este comando inicia un watcher (observador) automático para las ediciones de JSX dentro de src).
Mueve tu like-button.js con JSX (¡debería lucir así!) a la nueva carpeta src.

El watcher creará un like-button.js preprocesado con el código JavaScript simple que es adecuado para un navegador.

Atención

Si ves un mensaje de error que dice «You have mistakenly installed the babel package (has instalado erróneamente el paquete babel)», puede que te haya faltado el paso previo. Realízalo en la misma carpeta y luego inténtalo nuevamente.

La herramienta que acabas de usar se llama Babel y puedes aprender más sobre ella en su documentación. Además de JSX, te permite utilizar la sintaxis más moderna de JavaScript sin tener que preocuparte por causar errores en navegadores antiguos.

Si te empiezas a sentir cómodo con las herramientas de construcción y quieres que hagan más por ti, cubrimos algunas de las más populares y accesibles aquí.

Deep Dive

React without JSX

Originalmente JSX se introdujo para que escribir componentes con React se sintiera tan familiar como escribir HTML. Desde entonces, la sintaxis se ha generalizado. Sin embargo, hay momentos en que no quieres o no puedes usar JSX. Tienes dos opciones:

Usar una alternativa a JSX como htm que utiliza plantillas de cadena en lugar de un compilador.
Usar React.createElement() que tiene una estructura especial que se explica debajo.

Con JSX, escribirías un componente de esta forma:

function Hello(props) {
  return <div>Hello {props.toWhat}</div>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Hello toWhat="World" />, );

Con React.createElement(), lo escribirías así:

function Hello(props) {
  return React.createElement('div', null, 'Hello ', props.toWhat);
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  React.createElement(Hello, { toWhat: 'World' }, null)
);

Acepta varios argumentos: React.createElement(component, props, ...children).

Y funcionan así:

Un componente, que puede ser una cadena representando un elemento HTML o un componente de función
Un objeto de todas las props que deseas pasar
El resto son los hijos que el componente puede tener, como cadenas de texto u otros elementos.

Si te cansas de escribir React.createElement(), un patrón común es asignar una forma abreviada:

const e = React.createElement;

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(e('div', null, 'Hello World'));

Si prefieres este estilo, puede ser entonces tan conveniente como JSX.

PreviousIniciar un nuevo proyecto de React NextConfigurar un editor