¿Quieres aprender a desarrollar con React? Cuando estamos empezando con una nueva herramienta de programación, es bueno entender cómo se ejecutan las acciones más básicas para luego construir situaciones más complejas. En este post, te enseñaremos cómo crear un hello world con React para así introducirte al lenguaje y la lógica de esta librería.
¿Cómo crear un hello world con React?
Un hello world es una de las aplicaciones más básicas que podemos ejecutar en un lenguaje de programación. Esta aplicación se basa en pintar en pantalla un mensaje similar a ‘Hello, World!’, sea cual sea el dispositivo en el que se muestra. Una de las formas más rápidas de comprobar si nuestro código está dando este resultado es utilizando Browser Sync. Si quieres saber más sobre esta herramienta, te sugerimos leer nuestro post sobre qué es BrowserSync.
En este post, vamos a crear un hello world con React usando el conocimiento que tenemos del DOM. Además, utilizaremos Visual Studio Code para escribir nuestro código. Entonces, el primer paso para crear un hello world con React es crear una nueva página HTML. Allí, crearemos un HTML que contendrá un elemento body. Este, a su vez, contendrá un elemento div con el ID ‘root’.
Es en el ID ‘root’ donde insertamos todo el contenido que crearemos con JavaScript. Para introducir este contenido, podemos crear un elemento script del tipo text/javascript. Ahora, lo que haremos dentro del script será crear nuestro primer elemento y agregarlo al div que contiene ID ‘root’. Para acceder a este div, creamos la constante rootElement.
A continuación, puedes ver las líneas de código que hemos escrito hasta ahora:
<html>
<body>
<div id= “root”></div>
</body>
<script type = “text/javascript”>
const rootElement = document.getElementById (‘root’);
</script>
</html>
Una vez que tenemos nuestra constante rootElement, crearemos un elemento con el DOM. Para crear un elemento con el DOM, utilizamos la función createElement. Podemos asignar esta función a una variable de nuestro documento, que llamaremos como queramos. En nuestro caso, la llamaremos element. Con la función createElement, podemos definir el tipo de elemento que queremos crear entre paréntesis. A continuación, la línea de código que nos permite hacer esto:
const element = document.createElement (‘div’)
Una vez que tenemos nuestro elemento, podemos añadirle todo tipo de atributos. Entonces, para crear un hello world con React, deberemos darle un texto a nuestro elemento con el atributo text.content. A continuación, puedes ver la línea de código que nos permite escribir el mensaje que queremos:
element.textContent = ‘Hello World’
A este elemento también le podemos dar una clase utilizando la propiedad className. Una vez tengas tu elemento con todos los atributos que quieres darle, puedes añadirlo al rootElement usando el comando .appenChild. Esto hace que insertes el elemento creado al div de ID ‘root’. De este modo, creamos una pequeña aplicación hello world.
A continuación, puedes ver las líneas de código finales que nos permiten crear un hello world con React:
<html>
<body>
<div id= “root”></div>
</body>
<script type = “text/javascript”>
const rootElement = document.getElementById (‘root’);
const element = document.createElement (‘div’);
element.textContent = ‘Hello World’;
element.className = ‘container’;
rootElement.appenChilde (element);
</script>
</html>
Ahora que tienes estas líneas, lo único que queda es ejecutar tu código con BrowerSync para ver tu mensaje de tipo hello world en pantalla.
Ahora que sabes cómo crear un hello world con React, podemos decir que has empezado oficialmente a aprender a desarrollar con esta poderosa librería. Para seguir conociendo cómo dominar esta y muchas otras herramientas del desarrollo web, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, una formación intensiva de alta calidad donde, en tan solo unos pocos meses, te convertirás en un experto del desarrollo web y sus herramientas. ¿A qué esperas para inscribirte? ¡Anímate a hacerlo ya!
