Fundamentos de React: Introducción a React

Para usar React en tu proyecto recién creado, carga dos scripts de React desde un sitio externo llamado unpkg.com:

react es la biblioteca principal de React.
react-dom proporciona métodos específicos del DOM que te permiten usar React con el DOM.

index.html

<html>
  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script type="text/javascript">
      const app = document.getElementById('app');
      const header = document.createElement('h1');
      const text = 'Develop. Preview. Ship.';
      const headerContent = document.createTextNode(text);
      header.appendChild(headerContent);
      app.appendChild(header);
    </script>
  </body>
</html>

En lugar de manipular directamente el DOM con JavaScript plano, elimina los métodos del DOM que habías agregado previamente y añade el método ReactDOM.createRoot() para apuntar a un elemento específico del DOM y crear una raíz donde mostrar tus Componentes de React. Luego, agrega el método root.render() para renderizar tu código de React en el DOM.

Esto le indicará a React que renderice nuestro título <h1> dentro de nuestro elemento #app.

index.html

<html>
  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script>
      const app = document.getElementById('app');
      const root = ReactDOM.createRoot(app);
      root.render(<h1>Develop. Preview. Ship.</h1>);
    </script>
  </body>
</html>

Si intentas ejecutar este código en el navegador, obtendrás un error de sintaxis:

Terminal

Uncaught SyntaxError: expected expression, got '<'

Esto se debe a que <h1>...</h1> no es JavaScript válido. Este fragmento de código es JSX.

¿Qué es JSX?

JSX es una extensión de sintaxis para JavaScript que te permite describir tu interfaz de usuario con una sintaxis familiar similar a HTML. Lo bueno de JSX es que, aparte de seguir tres reglas de JSX, no necesitas aprender nuevos símbolos o sintaxis fuera de HTML y JavaScript.

Pero los navegadores no entienden JSX por defecto, por lo que necesitarás un compilador de JavaScript, como Babel, para transformar tu código JSX en JavaScript normal.

Añadiendo Babel a tu proyecto

Para añadir Babel a tu proyecto, copia y pega el siguiente script en tu archivo index.html:

index.html

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

Además, deberás indicarle a Babel qué código transformar cambiando el tipo de script a type=text/jsx.

index.html

<html>
  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <!-- Script de Babel -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/jsx">
      const domNode = document.getElementById('app');
      const root = ReactDOM.createRoot(domNode);
      root.render(<h1>Develop. Preview. Ship.</h1>);
    </script>
  </body>
</html>

Para confirmar que funciona correctamente, abre tu archivo HTML en el navegador.

Comparando el código declarativo de React que acabas de escribir:

index.html

<script type="text/jsx">
  const domNode = document.getElementById("app")
  const root = ReactDOM.createRoot(domNode);
  root.render(<h1>Develop. Preview. Ship.</h1>);
</script>

con el código imperativo de JavaScript que escribiste en la sección anterior:

index.html

<script type="text/javascript">
  const app = document.getElementById('app');
  const header = document.createElement('h1');
  const text = 'Develop. Preview. Ship.';
  const headerContent = document.createTextNode(text);
  header.appendChild(headerContent);
  app.appendChild(header);
</script>

Puedes empezar a ver cómo usar React te permite reducir mucho código repetitivo.

Y esto es exactamente lo que hace React, es una biblioteca que contiene fragmentos de código reutilizables que realizan tareas por ti - en este caso, actualizar la interfaz de usuario.

Recursos adicionales:

No necesitas saber exactamente cómo React actualiza la interfaz para empezar a usarlo, pero si deseas aprender más, aquí tienes algunos recursos adicionales:

Árboles de UI

Escribiendo marcado con JSX

Secciones sobre react-dom/server en la Documentación de React.

JavaScript esencial para React

Aunque puedes aprender JavaScript y React al mismo tiempo, estar familiarizado con JavaScript puede facilitar el proceso de aprendizaje de React.

En las siguientes secciones, se te presentarán algunos conceptos clave de React desde una perspectiva de JavaScript. Aquí tienes un resumen de los temas de JavaScript que se mencionarán:

Aunque este curso no profundiza en JavaScript, es buena práctica mantenerse actualizado con las últimas versiones de JavaScript. Pero si aún no te sientes competente en JavaScript, ¡no dejes que esto te impida empezar a construir con React!

Introducción a React

¿Qué es JSX?

Añadiendo Babel a tu proyecto

JavaScript esencial para React

On this page