{"id":9676,"date":"2020-02-04T10:34:49","date_gmt":"2020-02-04T09:34:49","guid":{"rendered":"https:\/\/blog.hostinger.io\/es-tutoriales\/?p=9676"},"modified":"2025-03-18T14:34:06","modified_gmt":"2025-03-18T13:34:06","slug":"que-es-react","status":"publish","type":"post","link":"\/es\/tutoriales\/que-es-react","title":{"rendered":"Qu\u00e9 es React: definici\u00f3n, caracter\u00edsticas y funcionamiento"},"content":{"rendered":"

ReactJS<\/a> es una de las librerías más populares de JavaScript<\/a> para el desarrollo de aplicaciones móviles y web. Creada por Facebook, React contiene una colección de fragmentos de código JavaScript reutilizables utilizados para crear interfaces de usuario (UI) llamadas componentes.<\/p>

Es importante señalar que ReactJS no es un framework de JavaScript. Esto porque sólo es responsable de renderizar los componentes de la capa de vista de una aplicación. React es una alternativa a frameworks como Angular<\/a> y Vue<\/a>, que permiten crear funciones complejas.<\/p>

En este artículo exploraremos las características de React, explicaremos cómo funciona y repasaremos sus beneficios para los desarrolladores de front-end. También cubriremos las diferencias entre ReactJS y React Native con respecto a sus funciones en la industria del desarrollo de aplicaciones web y móviles.<\/p>

Por último, hablaremos de los pasos para desplegar una aplicación React en el hPanel de Hostinger.<\/p>

Descarga Glosario Completo de Desarrollo Web<\/a>
<\/p>

Características de React<\/h2>

React tiene algunas características principales que la hacen destacar de otras librerías de JavaScript. En las siguientes secciones presentaremos estas características y te explicaremos cómo contribuyen al desarrollo de aplicaciones móviles y web.<\/span><\/p>

JSX<\/b><\/h3>

JSX es una extensión de la sintaxis de JavaScript utilizada en la creación de elementos de React. Los desarrolladores la emplean para incrustar código HTML<\/a> en objetos JavaScript. Ya que JSX acepta expresiones válidas de JavaScript e incrustación de funciones, puede simplificar las estructuras de código complejas.<\/span><\/p>

Veamos un bloque de código que muestra cómo incrustar una expresión en JSX:<\/span><\/p>

const name = 'John Smith;\nconst element = h1>Hola, {nombre}\/h1>;\nReactDOM.render(\n element,\n document.getElementById('root')\n);<\/pre>
En la segunda línea, llamamos a la variable <\/span>nombre <\/b>dentro de un elemento React poniéndola dentro de las llaves. <\/span><\/p>
Mientras tanto, la función <\/span>ReactDOM.render() <\/b>renderiza el elemento React en el árbol del Modelo de Objetos del Documento (DOM), describiendo la UI.<\/span><\/p>
JSX también ayuda a combatir los ataques <\/span>Cross-Site Scripting<\/b> (XSS). Por defecto, React DOM convierte los valores incrustados en JSX en cadenas antes de renderizarlos. Por consiguiente, terceros no pueden <\/span>inyectar código extra<\/b><\/a> a través de la entrada del usuario a menos que esté explícitamente escrito en la aplicación.<\/span><\/p>
Más adelante en el artículo, discutiremos detalladamente el papel de JSX en la creación de componentes React. <\/span><\/p>
Virtual DOM<\/h3>
El Modelo de Objetos del Documento (DOM) presenta una página web en una estructura de árbol de datos. ReactJS almacena árboles DOM virtuales en la memoria. Al hacerlo, React puede aplicar actualizaciones a partes específicas del árbol de datos, lo que es más rápido que volver a renderizar la totalidad del árbol DOM.<\/span><\/p>
Cada vez que haya un cambio en los datos, ReactJS generará un nuevo árbol de DOM virtual y lo comparará con el anterior para encontrar la forma más rápida de implementar los cambios en el DOM real. Este proceso se conoce como <\/span>diffing<\/b>.<\/span><\/p>
Al asegurarse de que la manipulación de la interfaz de usuario sólo afecta a secciones específicas del árbol real del DOM, renderizar la versión actualizada tarda menos tiempo y utiliza menos recursos. Esta práctica beneficia enormemente a los proyectos grandes con una interacción intensa con el usuario.<\/span><\/p>
Componentes y Props<\/b><\/h3>
ReactJS divide la interfaz de usuario en piezas aisladas y reutilizables de código conocidas como componentes. Los componentes de React funcionan de forma similar a las funciones de JavaScript, ya que aceptan entradas arbitrarias denominadas propiedades o props.<\/span><\/p>
Los elementos React devueltos determinan el aspecto de la interfaz de usuario en el lado del cliente. Este es un ejemplo de un componente de función que devuelve un elemento React:<\/span><\/p>
function Welcome(props) {\n return h1> Hola, {props.name}\/h1>;\n}\n<\/pre>
Es posible tener tantos componentes como sea necesario, sin saturar tu código. <\/span><\/p>
Gestión de Estado<\/b><\/h3>
Un estado es un objeto JavaScript que representa una parte de un componente. Cambia cada vez que un usuario interactúa con la aplicación, renderizando una nueva interfaz de cliente para reflejar las modificaciones.<\/span><\/p>
La gestión de estados se refiere a la práctica de gestionar los estados de la aplicación React. Incluye el almacenamiento de datos en librerías de gestión de estados de terceros y la activación del proceso de re-renderización cada vez que los datos cambian.<\/span><\/p>
Una librería de gestión de estados facilita la comunicación y el intercambio de datos entre los componentes. Actualmente existen varias librerías de gestión de estados de terceros, siendo <\/span>Redux <\/b>y <\/span>Recoil <\/b>las dos más populares.<\/span><\/p>
Redux<\/b><\/h4>
La librería de gestión de estado <\/span>Redux<\/b><\/a> tiene un <\/span>almacén<\/b><\/a> centralizado que mantiene el árbol de estado de una aplicación predecible. La librería también reduce la inconsistencia de los datos al evitar que dos componentes actualicen el estado de la aplicación simultáneamente.<\/span><\/p>
La arquitectura de Redux admite el registro de errores para facilitar la depuración y tiene un método de organización de código estricto, lo que simplifica el mantenimiento. Además, cuenta con un gran número de complementos y es compatible con todas las capas <\/span>de las interfaces de usuario. <\/p>
Dicho esto, Redux es bastante complejo y, por lo tanto, no es óptimo para aplicaciones pequeñas con una sola fuente de datos.<\/span><\/p>
Recoil<\/b><\/h4>
Recoil<\/b><\/a> es una biblioteca de gestión de estados de JavaScript lanzada por Facebook. Emplea funciones puras llamadas selectores para calcular los datos de las unidades actualizables del estado conocidas como <\/span>átomos<\/b><\/a>. Múltiples componentes pueden suscribirse al mismo átomo y así compartir un estado.<\/span><\/p>
El uso de átomos y selectores evita los estados redundantes, simplifica el código y elimina las repeticiones excesivas de React y de cualquier componente hijo. Recoil es más recomendable que Redux para principiantes, ya que sus conceptos básicos son considerablemente más fáciles de entender.<\/span><\/p>
Navegación programática<\/b><\/h3>
La navegación programática se refiere a los casos en que las líneas de código crean una acción que redirige a un usuario. Por ejemplo, las acciones de inicio de sesión y de registro navegan programáticamente a los usuarios a una nueva página web.<\/span><\/p>
React Router<\/b><\/a>, la librería estándar de React para el enrutamiento, proporciona múltiples formas de navegación programática segura entre componentes, sin necesidad de que el usuario haga clic en un enlace.<\/span><\/p>
El uso de un componente <\/span>Redirect <\/b>es el principal método de navegación programática, siendo <\/span>history.push() <\/b>otro enfoque.<\/span><\/p>
Para resumir, el paquete React Router sincroniza la UI con la URL, lo que permite controlar el aspecto de las aplicaciones React sin depender de los enlaces.<\/span><\/p>
¿Por qué utilizar React?<\/b><\/h2>
\n
\"Interfaz<\/figure><\/div>
Cientos de grandes empresas de todo el mundo, como <\/span>Netflix<\/b><\/a>, <\/span>Airbnb<\/b><\/a> y <\/span>American Express<\/b><\/a>, utilizan React para crear sus aplicaciones web. En las siguientes secciones, analizaremos las razones por las que tantos desarrolladores eligen ReactJS sobre sus competidores.<\/span><\/p>
1. Fácil de usar<\/b><\/h3>
Los desarrolladores con conocimientos de JavaScript pueden aprender a utilizar React en muy poco tiempo, ya que se basa en JavaScript plano y en un enfoque basado en componentes. Es posible empezar a desarrollar aplicaciones basadas en la web con React tras solo un par de días de estudio.<\/span><\/p>
Incluso si no estás familiarizado con JavaScript, muchos sitios web ofrecen <\/span>lecciones de programación<\/b><\/a> gratuitas. Una vez que conozcas los fundamentos de JavaScript, lee sobre ReactJS para agilizar el proceso de desarrollo de front-end.<\/span><\/p>
2. Admite componentes Java reutilizables<\/b><\/h3>
React te permite reutilizar componentes que han sido desarrollados en otras aplicaciones. Como React JS es de código abierto, es posible pre-construir componentes, lo que reduce el tiempo de desarrollo de aplicaciones web complejas.<\/span><\/p>
Además, React permite anidar componentes entre otros para crear funciones complejas sin inflar el código. Como cada componente tiene sus propios controles, es fácil mantenerlos.<\/span><\/p>
3. Facilita la redacción de los componentes<\/b><\/h3>
Gracias a la integración de JSX, es más fácil escribir componentes de React: los usuarios pueden crear objetos de JavaScript combinados con tipografía y etiquetas HTML. JSX también simplifica la renderización de múltiples funciones, lo que mantiene el código sencillo sin reducir las capacidades de la aplicación.<\/span><\/p>
Aunque JSX no es la extensión sintáctica más popular, ha demostrado su eficacia en el desarrollo de componentes especiales y aplicaciones dinámicas.<\/span><\/p>
\n
\"Interfaz<\/figure><\/div>
La herramienta oficial de interfaz de línea de comandos (CLI) de React, llamada <\/span>Create React App<\/b><\/a>, agiliza aún más el desarrollo de aplicaciones de una sola página. Cuenta con un proceso moderno de configuración de construcción con herramientas preconfiguradas y es excelente para aprender React JS.<\/span><\/p>
4. Alto rendimiento<\/b><\/h3>
Como comentamos anteriormente, el virtual DOM permite a ReactJS actualizar el árbol del DOM de la forma más eficiente posible. Al almacenar el virtual DOM en la memoria, React elimina el exceso de re-renderización que puede perjudicar el rendimiento.<\/span><\/p>
Igualmente, el enlace de datos unidireccional de React entre elementos agiliza el proceso de depuración. Cualquier modificación realizada en los componentes hijos no afectará a la estructura padre, lo que reduce el riesgo de errores.<\/span><\/p>
5. Compatible con SEO <\/b><\/h3>
React JS puede mejorar la <\/span>optimización en los motores de búsqueda<\/b><\/a> (SEO) de las aplicaciones web al aumentar su rendimiento. La implementación del DOM virtual es uno de los factores que influyen en una mayor velocidad de las páginas.<\/span><\/p>
Asimismo, React ayuda a los motores de búsqueda a navegar por las aplicaciones web mediante el renderizado del lado del servidor. Esto aborda uno de los problemas más importantes que tienen las páginas web con mucho JavaScript, ya que los motores de búsqueda suelen encontrarlas difíciles y lentas de rastrear.<\/span><\/p>
¿Cómo funciona React?<\/b><\/h2>
Una de las mayores ventajas de usar React es que puedes <\/span>infundir código HTML con JavaScript<\/b><\/a>.<\/span><\/p>
Los usuarios pueden crear una representación de un nodo DOM declarando la función <\/span>Element <\/b>en React. El siguiente código contiene una combinación de HTML y JavaScript:<\/span><\/p>
React. createElement(\"div\", { className: \"rojo\" }, \"Texto Hijo\");\nReact. createElement(MyCounter, { count: 3 + 5 });<\/pre>
Habrás notado que la sintaxis del código HTML anterior es similar a la de XML. Dicho esto, en lugar de utilizar la clase DOM tradicional, React utiliza <\/span>className<\/b>.<\/span><\/p>
Las etiquetas JSX tienen un nombre, hijos y atributos. Los valores numéricos y las expresiones deben escribirse entre llaves. Las comillas en los atributos JSX representan cadenas, de forma similar a JavaScript.<\/span><\/p>
En la mayoría de los casos, React se escribe utilizando JSX en lugar de JavaScript estándar para simplificar los componentes y mantener el código limpio.<\/span><\/p>
Aquí hay un ejemplo de código React escrito usando JSX:<\/span><\/p>
MyCounter count={3 + 5} \/>;\nvar GameScores = {jugador1: 2,jugador2: 5};\nDashboardUnit data-index=\"2\">\nh1> Scores\/h1> Scoreboard className=\"results\" scores={GameScores} \/>\n\/DashboardUnit>;\n<\/pre>
A continuación, se desglosan las etiquetas HTML anteriores:<\/span><\/p>