Hola mundo con React.js (para dummies)

#react #javascript #webdev #spanish

En el post Como crear un proyecto desde cero con React.js comentamos el proceso a seguir para poder empezar a trabajar con esta tecnología.

En el presente artículo aprenderemos a eleborar un Hola Mundo para ello seguiremos los siguientes pasos:

Creamos un nuevo proyecto de React.js usando create-react-app.
Usando el editor de código o IDE de su preferencia (en mi caso VScode) abrimos el proyecto y tendriamos un sistema de carpetas como el siguiente:

Para realizar este ejemplo trabajaremos con el archivo index.js de la capeta src (src/index.js). Al abrirlo podremos observar las siguientes lineas de código:

Procedemos a borrar todo el contenido de ese archivo.

Copiamos el siguiente código:

import React from 'react'; // importamos react
import ReactDOM from 'react-dom'; // nos permite renderizar en el DOM
const HolaMundo = <h1>Hola Mundo</h1>
//selecionamos el id donde se renderizara el componente
const root =  document.getElementById('root'); // hay un div con id root en index.html
ReactDOM.render(HolaMundo, root); // pinta en la pantalla la constante HolaMundo en el div con id root