Guía para principiantes: ¿Cómo funciona React?

Redacción Henry -

Aprende los fundamentos de React con esta guía y prepárate para iniciarte en la creación de aplicaciones web interactivas.


Como ya vimos, React es uno de los frameworks de JavaScript más populares y utilizados en la actualidad. Fue creado por Facebook en 2011 y desde entonces ha ganado una gran cantidad de seguidores en la industria de la programación. Hoy vamos a contarte por qué React es tan importante.

¿Qué dice la estadística?

Según una encuesta realizada por Stack Overflow en 2021, React es el framework de JavaScript más utilizado por los desarrolladores. De hecho, el 68,9% de los encuestados afirmaron que lo habían utilizado en el último año. Como vimos en artículos anteriores, esta popularidad se debe en gran parte a la facilidad de uso y al rendimiento que ofrece React.

En términos de preguntas y respuestas relacionadas con React, Stack Overflow cuenta con una gran cantidad de contenido. En 2021, se publicaron más de 200,000 preguntas relacionadas con React en Stack Overflow. Esto muestra el gran interés de la comunidad de desarrolladores por esta tecnología.

En resumen, los datos de Stack Overflow muestran que React es una de las tecnologías más populares y utilizadas por los desarrolladores en la actualidad, con una gran cantidad de contenido y recursos disponibles para quienes buscan aprender y mejorar en su uso.


Empresas y aplicaciones famosas que utilizan React

Muchas empresas líderes en el mundo de la tecnología han adoptado React para desarrollar sus aplicaciones. Algunas de ellas incluyen Facebook, Instagram, Netflix, Airbnb, Uber y muchas otras. Esto demuestra la confianza que las empresas tienen en React para construir aplicaciones escalables y de alto rendimiento.

Uno de los casos más destacados es el de Facebook, la empresa que creó React. Según un informe publicado por Facebook en 2019, React se utiliza en más de 10.000 componentes en la plataforma de la empresa. Además, React Native, la versión de React para el desarrollo de aplicaciones móviles, también es ampliamente utilizada en la industria.

Demanda de programadores con conocimientos en React

Debido a la popularidad y la demanda de React en la industria, hay una gran cantidad de oportunidades laborales para los programadores que conocen este framework. Según el sitio web de búsqueda de empleo Indeed, el salario promedio para un desarrollador de React en los Estados Unidos es de alrededor de USD 120.000 al año.

¿Cómo funciona React?

React es una biblioteca de JavaScript que se utiliza para construir interfaces de usuario. Fue creado por Facebook en 2011 y se ha vuelto muy popular entre los desarrolladores debido a su capacidad para crear aplicaciones web interactivas y dinámicas. Si eres nuevo en la programación, puede parecer abrumador entender cómo funciona React, pero en realidad es bastante simple.

En esencia, este framework nos permite de manera simple y sin necesidad de configuraciones extensas, escribir código para mostrarlo en nuestra pantalla.

¿Cómo funciona el virtual DOM en React?

Un plus de React es que ofrece un DOM virtual. Una de las ventajas de React es que cuenta con un DOM virtual. Este es una representación del DOM (Document Object Model) en la memoria, que permite que React trabaje con una copia del mismo y compare el DOM virtual con el real, lo que se traduce en un ahorro de costos en términos de recursos, como procesador y memoria RAM.

Gracias al DOM virtual, no es necesario renderizar toda la página cada vez que se produzcan cambios. En su lugar, se aplica el cambio únicamente al componente que ha sido actualizado. Esto no solo mejora la experiencia de desarrollo, sino que también ofrece una mayor rapidez y rendimiento.

¿Qué es JSX?

JSX es una extensión de sintaxis que se utiliza en React para escribir código que combina HTML y JavaScript. Básicamente, JSX permite escribir código que se asemeja al HTML dentro de los archivos JavaScript, lo que facilita la creación de componentes de la interfaz de usuario.

En lugar de tener que escribir código JavaScript que manipule el DOM, JSX permite crear elementos de la interfaz de usuario mediante la combinación de HTML y JavaScript en un solo archivo. De esta manera, la creación de componentes en React se vuelve más intuitiva y fácil de entender para los desarrolladores.

JSX no es un requisito obligatorio para utilizar React, pero se ha convertido en una práctica común debido a la simplicidad y claridad que ofrece en la escritura de código.

¿Qué son los componentes en React?

Dentro de React existe un concepto básico y fundamental llamado componente. Básicamente, un componente es cualquier elemento que podamos ver en nuestra pantalla. Por lo general, los elementos se repiten todo el tiempo, lo único que cambian son sus propiedades. Por ejemplo, en WhatsApp, todos los chats son idénticos. Lo único que cambia son los mensajes y las imágenes. Todos los chats son un mismo componente reutilizado:


Un componente en React es una pieza de la interfaz de usuario (UI), es decir, lo que el usuario ve en la pantalla y con lo que interactúa. Cada bloque, cada elemento, es un componente que se parece a una jerarquía de nodos HTML, pero se crea con una función de JavaScript que devuelve HTML en el momento del renderizado.

Los componentes son bloques de código independientes que se pueden reutilizar y combinar para crear componentes más grandes, que a su vez se combinan para formar un sistema completo, como por ejemplo una página web, como ocurre en el sitio de Henry. De esta manera, React permite tener HTML con funcionalidad de JavaScript y estilos de CSS.

React está basado en el paradigma de programación orientada a componentes, donde cada componente es una pieza con la que el usuario puede interactuar. Estos bloques de código se crean mediante una sintaxis llamada JSX, que permite escribir HTML (y opcionalmente CSS) dentro de objetos JavaScript.

Estados y Ciclos de Vida

Los componentes de React utilizan información. (Texto, números, imágenes, e incluso música). Para poder manejar la información de los componentes, decidir qué/cuándo mostrar y qué/cuándo no mostrar, utilizamos una funcionalidad llamada Estado. Todos los componentes de React pueden tener un “estado local” el cuál podrá almacenar toda la información de este componente. De la misma manera, a veces queremos decidir cuándo mostrar las cosas y cuándo no! Para esto utilizamos el ciclo de vida del componente. Esto nos permite gestionar mucho mejor lo que mostramos en pantalla y su funcionamiento.

¡Construyamos nuestro perfil!

Ingresá al siguiente LINK y completá los siguientes pasos:

  1. Te vas a encontrar con la siguiente vista:

Eliminar lo marcado en color verde.

Copiar y pegar el siguiente código:

<img style={{width: "50vh"}} src="https://res.cloudinary.com/yachtimeapp/image/upload/v1663186115/api-img/cec5bc7e-16dc-43ed-a931-5cc826675378_rwc_0x0x1916x1080x1916_iy8gqw.png" alt="" />

<h1>Tu nombre</h1>

<h2>¡Quiero ser Full-Stack Developer!</h2>

¡Nos vemos en el próximo artículo! ??? ? Aprendemos sobre React Native y creamos un reloj desde cero

Ya sabes, React es una herramienta imprescindible para quienes quieren convertirse en Front End Developers. Si estás pensando en iniciar una carrera completa de Desarrollo Web Full Stack y aprender los lenguajes y tecnologías que las compañías demandan, ingresa a Henry hoy?