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:
- NodeJS
- Visual Studio Code, o el editor de tu preferencia :).
- Navegador web, yo te recomiendo brave
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 seguido por el nombre que desees darle.
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.
Si haz borrado los archivos obtendrás la siguiente pantalla con un error.
Paso 3
Antes de depurar mira que contiene index.js.
- React. Este paquete es omnipresente. Y entre tantas cosas te ayuda a trabajar con JSX.
- ReactDOM. Su principal función es mantener actualizado los elementos de React y del DOM.
-
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, ú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
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.
npm start para verlo en acción,si es que ya no lo hiciste en el paso 2.
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.
.
¡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:
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!
Top comments (0)