React JS. ¡Mucho gusto!
Tags: beginners, react, javascript, frontend
Published: 2020-09-13 01:33:06

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/f49dg0jkmrnd4u8324kg.png)

**Introducción**

Quiero debutar en Dev.to con un artículo sobre una librería que ha sido la culpable de que poco a poco me vaya gustando ese famoso lenguaje de la web, ¡sí! la verdad es que siempre trabajé a regañadientes con JavaScript.

Para resumir que es React, señalemos que es una librería que ayuda a crear interfaces de usuario encapsulando funcionalidad y apariencia en fragmentos de código llamado **componentes**

Hagamos un pequeño ejercicio para conocerlo.

**Requisitos:**
1. [NodeJS](https://nodejs.org/es/)
2. [Visual Studio Code](https://code.visualstudio.com/), o el  editor de tu preferencia :).
3. Navegador web, yo te recomiendo [brave] (https://brave.com/?ref=isa648/)

**Objetivo**
La funcionalidad del componente es sencilla. Tiene que presentar  "Hola React, soy .... ¡Mucho Gusto! ". 

Manos a la obra de arte. :)


**Paso 1**
Crea una carpeta para contener el proyecto, abre una consola y haz  uso de [**create-react-app**](https://es.reactjs.org/docs/create-a-new-react-app.html#create-react-app) seguido por el nombre que desees darle. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/n0rs4tlplc76np7wt9je.JPG)

Esto tomará un par de minutos, aquí debes aprovechar para ir por una cerveza, buscar una buena playlist o solo ir al baño. :)


**Paso 2**

Elimina los archivos de la carpeta **src** exceptuando al mimado **index.js** y **App.js**, en el menú terminal seleccionemos **nuevo terminal** para usar **npm start**. Con esto estarías poniendo en ejecución el proyecto.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/g7s75slb2ymcmp60zvca.JPG)

Si haz borrado los archivos obtendrás la siguiente pantalla con un error.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/u85c4mklnx78rwkr1k34.JPG)

**Paso 3**
Antes de depurar mira que contiene index.js.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9owh1yq6aynxigxql087.JPG)

- *React.* Este paquete es omnipresente. Y entre tantas cosas te ayuda a trabajar con [JSX](https://en.wikipedia.org/wiki/React_(web_framework)#JSX).
- *ReactDOM.* Su principal función es mantener actualizado los elementos de React y del [DOM](https://es.wikipedia.org/wiki/Document_Object_Model).
- *App.* Es el componente que vas convertir en `MyComponent`, el cual implementa la funcionalidad.

**Paso 4**

Renombra el archivo *App.js* a *HelloWorld.js*. Crea un componente mediante una función, esta tendrá el nombre de *MyComponent* y recibirá un objeto como parámetro llamado [**props**](https://www.w3schools.com/REACT/react_props.asp), útil para pasar *datos* como por ejemplo nombre, edad, sexo, etc.

A esta función le acompañaran un import React para poder hacer uso de JSX y un export poder referenciarla en el archivo *index.js*

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/roraa4npup42nzrlvb5i.JPG)

`props.**name**` es una expresion javascript y como todas debe estar dentro de llaves *{}*

**Paso 5**
Modifica index.js, aquí harás uso de **.render** de ReactDOM para poder dibujar el componente en el navegador, el segundo parámetro que recibe *render* es un elemento html que sirve de contenedor al componente que haz creado, échale un vistazo a **index.html** dentro de la carpeta *public*.

*MyComponent* tiene la capacidad de recibir un dato en una prop llamada *name*, así que es conveniente que la uses. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6l0onu76ei0g2g4na7tc.JPG)

**npm start** para verlo en acción,si es que ya no lo hiciste en el paso 2.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2g46rfanw04vxavqxcys.JPG)

**Paso 6**
Por último dale color al componente, para ello crea un objeto con todos los estilos que desees aplicar, luego úsalo en la prop [**style**](https://www.w3schools.com/react/react_css.asp).

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/n7crfylfm0wl9ce7rrnx.JPG).

¡Si! le he agregado un elemento html `<div>` para contener al `<p>`, es importante tener en cuenta que una función que crea componentes siempre debe devolver un elemento.

Resultado:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/e4bp5tdi67grdavm9p2f.JPG)

**Fín**

Así que ahí lo tienes, espero que este pequeño post te sirva para darle una oportunidad a React y disimuladamente a JavaScript.  :)


¡Gracias por leer!