DEV Community

loading...
Cover image for Hola mundo con React.js (para dummies)

Hola mundo con React.js (para dummies)

dux
Literatura, tecnología y café (mucho café ☕) es todo lo que necesito.
・2 min read

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:

img_1

  • 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:

img_2

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
Enter fullscreen mode Exit fullscreen mode

ReactDOM se encarga de renderizar en pantalla el componente creado.

En public/idex.html se encuentra el siguiente código:

<div id="root">
</div>
Enter fullscreen mode Exit fullscreen mode

Es en este div donde se renderizará el componente.

Finalmente ejecutamos npm start para ver por pantalla el texto: "Hola Mundo".


Referencias

Discussion (2)

Collapse
renzopessoli profile image
RenzoPessoli • Edited

Para mi es mas fácil ir directamente al app y ponerle el "hola mundo" al elemento p, que es realmente donde se trabaja.

Collapse
duxtech profile image
dux Author

Hay muchos caminos para llagar a Roma estimado.