Hello, world!

  • 5 minutos

La manera más común de iniciar cualquier curso de programación es mostrar el texto "Hello, world!". Siguiendo con esta tradición, usaremos React para mostrar el famoso texto.

Crearemos dos elementos para la base de nuestro proyecto:

  • El archivo index.html hospeda nuestra aplicación React.
  • El archivo index.jsx monta nuestra aplicación.

Creación del host de la aplicación

  1. En Visual Studio Code, cree un nuevo archivo en la carpeta public. Asígnele el nombre index.html.

  2. Agregue el siguiente código HTML:

    <!DOCTYPE html>
<html lang="en">
<head>
    <title>Recipes</title>
</head>
<body>
    <div id="app"></div>
    <script type="module" src="/dist/index.js"></script>
</body>
</html>

Exploración del código

Observe dos líneas importantes en nuestro código HTML:

  • <div id="app"></div>
    • Esta línea crea el elemento HTML que hospeda la aplicación React.
    • Llamamos a este elemento por su identificador para representar la aplicación.
  • <script type="module" src="/dist/index.js"></script>
    • Esta línea carga el código JavaScript.

Nota:

El nombre del archivo que se va a importar es index.js. No usamos index.jsx, ya que los exploradores no pueden representar archivos JSX. Siempre necesitamos un paquete de instalación (como Snowpack) para generar JavaScript. Hacemos referencia a JavaScript en lugar de a JSX.

El atributo type="module" nos permite usar instrucciones import en nuestros archivos JavaScript (o JSX). Esta funcionalidad es relativamente nueva en los exploradores. Nos ayuda a importar los paquetes y componentes necesarios.

Creación del punto de entrada para la aplicación React

Necesitamos código para representar la aplicación React dentro del código HTML. Tradicionalmente, el archivo index.jsx se usa para representar la aplicación.

  1. Cree un nuevo archivo dentro de la carpeta src. Asígnele el nombre index.jsx.

  2. Agregue el siguiente código:

    import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('app')
);

Exploración del código

El archivo index.jsx se inicia importando dos bibliotecas importantes. La primera biblioteca, React, nos permite usar JSX. Se importará en todos los componentes o archivos JSX que se creen. La segunda biblioteca, ReactDOM, representa nuestra aplicación dentro del código HTML.

render requiere dos parámetros:

  • El código HTML que se desea mostrar. En este caso, el código HTML es un encabezado h1.
  • El elemento HTML que se desea usar para mostrar el código HTML. Usaremos el elemento que tiene un identificador app. Hemos creado este elemento anteriormente.

La capacidad de usar HTML dentro de nuestra codificación de JavaScript es parte de la eficacia de JSX.

Comprobación de la página

Ahora que hemos creado nuestro código, veamos nuestro sitio en acción.

  1. Abra el terminal integrado en Visual Studio Code; para ello, seleccione Ver>Terminal o seleccione Ctrl+`. En un equipo Mac, seleccione Cmd+` en su lugar.

  2. Use el siguiente comando para iniciar el servidor de desarrollo de Snowpack:

    npm start

El explorador predeterminado debe abrirse de forma automática y mostrar la página. Si la página no aparece automáticamente, abra el explorador y vaya a http://localhost:8080.. Ahora debería ver la página.

Screenshot showing a

Exploración del código generado

Nuestro código de JSX se convierte en el código HTML y JavaScript adecuados para su presentación en el explorador. Abra el archivo JavaScript generado por Snowpack: http://localhost:8080/dist/index.js.. Verá el siguiente código:

import React from "../web_modules/react.js";
import ReactDOM from "../web_modules/react-dom.js";
ReactDOM.render(/* @__PURE__ */ React.createElement("h1", null, "Hello, world!"), document.getElementById("app"));

Céntrese en la línea de código que genera el elemento h1 y coloca el texto dentro de él:

React.createElement("h1", null, "Hello, world!")

El uso de este código es similar al uso de document.createElement con JavaScript de vainilla. Las herramientas proporcionadas por Snowpack y otros paquetes de instalación nos permiten usar JSX para generar automáticamente el código adecuado para el explorador.