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.jsde la capetasrc(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
ReactDOM se encarga de renderizar en pantalla el componente creado.
En public/idex.html se encuentra el siguiente código:
<div id="root">
</div>
Es en este div donde se renderizará el componente.
Finalmente ejecutamos npm start para ver por pantalla el texto: "Hola Mundo".
Top comments (2)
Para mi es mas fácil ir directamente al app y ponerle el "hola mundo" al elemento p, que es realmente donde se trabaja.
Hay muchos caminos para llagar a Roma estimado.