Tribalyte Technologies Tribalyte Technologies
  • Inicio
  • Misión y visión
  • Nuestros expertos
  • Nuestras soluciones
  • Casos de éxito
  • Blog
  • Contáctanos
  • Únete al equipo
Tribalyte Technologies Tribalyte Technologies
  • Inicio
  • Misión y visión
  • Nuestros expertos
  • Nuestras soluciones
  • Casos de éxito
  • Blog
  • Contáctanos
  • Únete al equipo
Jun 23
React | Qué es, para qué sirve y cómo funciona | Tribalyte Technologies Blockchain y vacunas COVID-19 | Tribalyte Technologies | Alessandro Barbera Formica

React | Qué es, para qué sirve y cómo funciona | Descúbrelo todo

  • junio 23, 2021
  • José Luis Coalla
  • 1 Comment
  • Consejos tecnológicos, Desarrollo de aplicaciones, Desarrollo de software, Tecnologías

En la actualidad, existen varias tecnologías para desarrollar diferentes aplicaciones web. Frameworks de JavaScript como Angular o librerías como React y Vue son las más conocidas; y en este post hablaremos y conoceremos más sobre React.

Index

  • 1 ¿Qué es React?
    • 1.1 ¿Qué es React? | Más info técnica
    • 1.2 React y su Arquitectura 
    • 1.3 Virtual DOM
    • 1.4 Conclusión
    • 1.5 Crear app con React

¿Qué es React?

Es una librería open source de JavaScript para desarrollar interfaces de usuario. Fue lanzada en el año 2013 y desarrollada por Facebook, quienes también la mantienen actualmente junto a una comunidad de desarrolladores independientes y compañías.

Hoy en día muchas empresas de primer nivel utilizan React para el desarrollo de sus aplicaciones, y es que entre ellas podemos encontrar Facebook, Instagram y el cliente web de WhastApp (todas propiedad de Facebook), y otras como AirBnb, Uber, Netflix, Twitter, Reddit o Paypal.

Desde su lanzamiento, su uso ha ido incrementando notablemente, convirtiéndose, a día de hoy, en una de las tecnologías front-end más utilizadas.

React vs Angular - Tribalyte Technologies

¿Qué es React? | Más info técnica

Como hemos comentado más arriba, es una librería de JavaScript para desarrollar interfaces de usuario. Según a quién le preguntes, puede que te digan que es la “V” de un framework MCV (Modelo-Vista-Controlador), y es que, al tratarse de una librería, React necesita ser acompañado de otras librerías para completar las necesidades de desarrollo de nuestra aplicación web.

Esto puede ser una ventaja o un desventaja dependiendo de la persona que lo utilice. Angular, por ejemplo, es un framework que nos proporciona unas herramientas completas para desarrollar una aplicación web al 100%, aunque, no obstante, no ofrece tanta libertad como React a la hora de elegir con qué tecnologías queremos trabajar. Esto es, Angular es un framework “opinionado” mientras que React es una librería que cubre una necesidad.

React y su Arquitectura 

El elemento más importante de React es el componente, que es, en esencia, una pieza de la interfaz de usuario. Como norma general, al diseñar una aplicación con React, lo que estamos haciendo es crear componentes independientes y reusables para, poco a poco, crear interfaces de usuario más complejas.

En ese sentido, React es similar a Angular, ya que toda aplicación en React tiene al menos un componente; al que normalmente nos referimos como componente «raíz», que contiene otros componentes “hijos”, y estos a su vez otros, etc. De esta manera, se puede afirmar que la vista es un árbol de componentes, como se muestra en el siguiente diagrama de ejemplo:

react y su arquitectura - Tribalyte Technologies

Un componente básico se implementa como una clase de JavaScript (ES6) que tiene un estado y un método “render”:


import React from "react";

class ComponentExample extends React.Component {
  state = {
    data = ""
  }

  render () {
    return (

      <h1>Hello World!</h1>

    )
  }
}

export default ComponentExample;

El estado (state) son los datos con los que queremos trabajar e incluso mostrar cuando el componente se renderiza. El método “render”, por otro lado, es responsable de describir cómo se tiene que ver dicho componente.

Como se puede apreciar, React rompe las buenas prácticas que se han utilizado a lo largo de los últimos años al juntar la vista con la lógica, no obstante, al tratarse de pequeños componentes, el hecho de tener todo a disposición en un mismo lugar empieza a ser más un beneficio que una desventaja. 

Virtual DOM

Es curioso no sólo el hecho de escribir la vista del componente junto a la lógica, sino escribir código HTML directamente en el archivo .js en el que se incluye el componente.

Este “código HTML”, y ahora sí que lo pongo entre comillas, no es código HTML al uso, si no JSX; un lenguaje creado por la propia Facebook que, con sintaxis HTML, compila a un objeto JavaScript que se mapeara a un elemento del DOM.
Lo que hace React es, a través de este código JSX, crear una representación en memoria del DOM; denominada “Virtual DOM”, a partir de la cual luego crea el DOM definitivo en el navegador. Este “Virtual DOM”, a diferencia del DOM común, pesa muy poco y utiliza escasos recursos para ser creado. Así que, en caso de que un componente cambiase su estado, y con ello la información a renderizar, React compararía los cambios realizados en el Virtual DOM, vería qué elemento o elementos han cambiado, y actualizaría solo esas partes en el DOM real. Al tratarse solo y exclusivamente de código JavaScript, el compilado y renderizado de todos estos cambios se realiza rápidamente.

Aun siendo desde su versión 16 una librería de por sí muy rápida y eficaz en cualquier máquina, en caso de que necesitemos realizar una aplicación web para dispositivos con pocos recursos, existe la posibilidad de usar una alternativa, Preact, que sigue la misma API y patrones que React, pero con un tamaño menor.

Conclusión

Posee unas virtudes que gustaran o no dependiendo de la persona o del proyecto en el que se trabajará. Queda bastante claro que ha venido para quedarse, y el incremento gradual de su uso lo avala.

Si tienes experiencia con otros framework, como Angular, a pesar de tener formas diferentes de trabajar, la filosofía de su utilización es similar, así, que sin duda, recomiendo encarecidamente aprender sobre esta librería ya que puede llegar a ser indispensable en el futuro.

Crear app con React

Ahora que sabes un poco más sobre React, ¿sigues teniendo dudas sobre cómo sacarle el máximo partido a tu proyecto de desarrollo de app? 

En Tribalyte Technologies somos expertos desarrolladores de apps a medida. Consulta nuestros casos de éxito y contáctanos ahora mismo sin compromiso para cualquier necesidad. Podemos ayudarte.

CONSULTA NUESTROS CASOS DE ÉXITO

Artículos Relacionados:

  • Introducción a la programación de un Smart ContractIntroducción a la programación de un Smart Contract
  • Crypto tracker React_Initial_0Creando un Crypto Tracker con React: un tutorial paso a paso
  • Blockchain: Tribalyte Technologies socio de AlastriaCómo actualizar Geth en un nodo Blockchain de la Red T de Alastria
  • youmedic videos medicina operaciones cirugíaLanzamiento Youmedic
  • Ejemplo práctico de Blockchain para entender bien cómo funciona | Alessandro Barbera FormicaBlockchain: ejemplo fácil y práctico para entender cómo funciona
  • Facebook
  • Twitter
  • LinkedIn
  • E-Mail

About The Author

José Luis es Ingeniero de Software. Su trabajo en Tribalyte se centra en el desarrollo web, específicamente en el desarrollo de aplicaciones híbridas full stack. Le encantaría dominar la utilización de frameworks como Angular e Ionic. Apasionado de las nuevas tecnologías, de aprender cada día algo nuevo y de aprovechar cada momento al máximo.

Related Posts

1 Comment

  1. Creando nuestro primer proyecto de ReactJS
    febrero 22, 2019 at 12:07 pm · Responder

    […] desde que conocimos React y su creciente fama para la implementación de interfaces gráficas. En la entrada anterior conocimos teóricamente la infraestructura de ReactJS, mientras que en esta entrada nos pondremos […]

Leave a reply Cancelar respuesta

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

ELIGE UNA CATEGORÍA

  • Blockchain
  • Consejos tecnológicos
  • Desarrollo de aplicaciones
  • Desarrollo de software
  • Sistema embebido
  • Tecnologías
  • Uncategorized

Una compañía dedicada al desarrollo de apps, software y soluciones embebidas para empresas.

SOCIOS

Contacto

Glorieta de Quevedo 8 6º2
28015 Madrid (ESPAÑA)
Phone: +34 910 177 514 E-Mail: contact@tribalyte.com Web: www.tribalyte.com
Sello PYME INNOVADORA 21/01/2025
PYME INNOVADORA
Válido hasta el 21 de enero de 2025
escudo de MEIC 21/01/2025

AYUDA

  • Política de privacidad
  • Política de calidad
  • Política de seguridad
  • Términos de uso

CERTIFICACIONES

⠀⠀⠀⠀⠀⠀⠀⠀⠀

SUBVENCIONES

Tribalyte Technologies S.L. ha    conseguido la ayuda C007/20-ED de Red.es para el impulso y la promoción de actividades de I+i y para el fomento de la inversión empresarial para desarrollar el proyecto iPatia. Así mismo, valoramos muy positivamente la contribución del FEDER, principal fondo de la política de cohesión europea, por lo que supone de impulso a nuestro trabajo y en consecuencia al crecimiento económico y la creación de empleo de esta región y de España en su conjunto.
Esta página web utiliza cookies para mejorar su experiencia de usuario y para recabar estadísticas anónimas de uso. Aceptar Más información