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

Hola mundo con React.js (para dummies)

crisfer4217 profile image dux ・2 min read

React.js básico (2 Part Series)

1) Como crear un proyecto de React.js desde 0 | create-react-app 2) Hola mundo con React.js (para dummies)

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

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".


Referencias

React.js básico (2 Part Series)

1) Como crear un proyecto de React.js desde 0 | create-react-app 2) Hola mundo con React.js (para dummies)

Posted on by:

crisfer4217 profile

dux

@crisfer4217

Literatura, tecnología y café (mucho café ☕) es todo lo que necesito.

Discussion

markdown guide