Entender qué son componentes es lo que nos va permitir iniciar con React.js
React.js es una librería para el desarrollo del frontend creado por facebook,
es una herramienta muy demandada a nivel laboral y nos sirve para desarrollar websites estáticos,
aplicaciones web y aplicaciones móviles.
Para comenzar con React.js debemos tener nociones básicas de javascript, si no conoces el lenguaje te
recomiendo estudiarlo para luego seguir con librerías o frameworks que usan dicha tecnología.
En este caso particular vamos hacer un ejemplo muy sencillo pero que explica qué son los componentes a nivel analítico.
Creamos un archivo index.html:
Creamos la estructura básica de un archivo html, agregamos un div con id componentreact y llamamos también
algunas herramientas mediante CDNs. Los CDNs son archivos en la nube que permiten usar tecnologías sin tener que
instalarlas en nuestras máquinas.
Usaremos React, ReactDom y Babel. Babel es una librería que permite transformar javascript de última generación
a javascript que cualquier navegador pueda entender y mostrar.
Creamos nuestro componente:
Escribimos nuestro componente dentro de la etiqueta para que
el navegador lo interprete correctamente, creamos una variable javascript llamada "component" que va contener
los elementos que pertenecen a dicho componente. Dentro de nuestras variables podemos colocar cualquier estructura html
Al final solo creamos una configuración que enlaza nuestro componente react con el DOM del navegador, en este caso con
el div que contiene id componentreact en la linea 11
Por terminar podemos visualizar el resultado de lo que hemos escrito:
De esto se trata escribir en React.js e incluso, en otras tecnologías que se basan en componentes
como Vue.js o Angular, programar pequeños fragmentos de código que puedo reusar y mostrar donde necesite
es mas accesible, mantenible y fácil de entender para los developers.
Puedes descargar el código AQUÍ
Espero que te haya gustado y recuerda que cualquier duda sobre el tema me puedes preguntar.
Saludos!
#Desarrollo UI
#React.js
#Javascript
#Components
"Una forma de apoyar la creación de contenido técnico y de calidad es donando la cantidad que
creas conveniente, si quieres que haga un post sobre un tema en específico no dudes en avisarme"
