Hola Mundo con ReactJS

En el artículo de hoy vamos a ver cómo crear nuestra primera aplicación Hola Mundo con ReactJS paso a paso para poder crear nuestras aplicaciones visuales mediante este framework de desarrollo.

Qué es ReactJS

ReactJS es una librería de desarrollo Javascript que nos permite el fácil desarrollo de interfaces de usuario basado en componentes y optimizada para el trabajo sobre el DOM Virtual.

Las principales características de ReactJS son:

Interfaces Declarativos, podemos crear vistas de forma declarativa definiendo un estado. La modificación del estado será la que haga que cambie el componente.
Basado en Componentes, ReactJS permite crear componentes visuales, desde cero o a partir de componentes ya existentes, para crear nuestros interfaces de usuario.
Extensión JSX, nos permite crear objetos Javascript mediante el uso de elementos HTML y así generar el DOM Virtual.
Renderizable en servidor, ReactJS se puede renderizar tanto en un navegador web como en el servidor mediante el uso de NodeJS.

Crear el primer componente Hola Mundo

Para poder crear nuestro Hola Mundo con ReactJS lo que vamos a hacer es crear un primer componente que nos muestre la cadena Hola Mundo en la pantalla.

Lo primero será instanciar la librería ReactJS. Para ello cargaremos las librerías react.development.js, react-dom.development.js y babel.min.js. Lógicamente estas librerías nos servirán para poder trabajar en entornos de desarrollo:

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

Renderizando el componente

Lo siguiente que haremos será renderizar nuestro código con ReactJS. Para ello utilizamos el método ReactDOM.render() el cual recibe el componente o código HTML que queremos renderizar y el elemento del DOM sobre el cual queremos realizar el renderizado.

ReactDOM.render(
  <h1>Hola Mundo!</h1>,
  document.getElementById('root')
);

Para poder acceder al elemento DOM sobre el que realizar el renderizado vamos a utilizar el método document.getElementById(). Es por ello que nuestra página debe de contener dicho elemento.

<body>
  <div id="root"></div>
  <script type="text/babel">

    ReactDOM.render(
      <h1>Hola Mundo!</h1>,
      document.getElementById('root')
    );
  </script>
</body>

Así ya habremos creado nuestra primera aplicación Hola Mundo con ReactJS. En siguientes artículos iremos ampliando el conocimiento y explicando todas las funcionalidades sobre ReactJS.

Víctor Cuervo

Programador, Arquitecto IT, álter ego de Línea de Código, amante de las tecnologías, generador de conocimiento y facilitador del aprendizaje.

Descarga el código de Hola Mundo con ReactJS

Aprende a crear tu primera aplicación con ReactJS. Descubre cómo usar componentes, JSX y ReactDOM.render() para mostrar Hola Mundo en pantalla.

Descargar código