---
title: React
localeTitle: React
---
# React
React es una biblioteca de JavaScript para construir interfaces de usuario. Fue votado como el más querido en la categoría "Marcos, bibliotecas y otras tecnologías" de la Encuesta de desarrolladores 2017 de Stack Overflow. 1
React es una biblioteca de JavaScript y las aplicaciones React creadas en ella se ejecutan en el navegador, NO en el servidor. Las aplicaciones de este tipo solo se comunican con el servidor cuando es necesario, lo que las hace muy rápidas en comparación con los sitios web tradicionales que obligan al usuario a esperar a que el servidor vuelva a renderizar páginas completas y las envíe al navegador.
React se utiliza para crear interfaces de usuario, lo que el usuario ve en su pantalla e interactúa para usar su aplicación web. Esta interfaz se divide en componentes, en lugar de tener una página enorme, se divide en partes más pequeñas conocidas como componentes. En términos más generales, este enfoque se llama modularidad.
* Es declarativo: React usa un paradigma declarativo que hace que sea más fácil razonar acerca de su aplicación.
* Es eficiente: React calcula el conjunto mínimo de cambios necesarios para mantener actualizado su DOM.
* Y es flexible: React trabaja con las bibliotecas y los marcos que ya conoce.
## ¿Por qué aprender React?
1. React implica una composición que es un montón de componentes que envuelven las funcionalidades en un contenedor encapsulado. Muchos sitios web populares utilizan React implementando el patrón arquitectónico MVC. Facebook (Parcialmente), Instagram (Completamente), Khan Academy (Parcialmente), Codecademy (Parcialmente), New York Times (Parcialmente), Yahoo Mail (Completamente), la nueva aplicación de galería de fotos y videos de Dropbox (completamente) son los sitios web populares más conocidos que utilizan React. ¿Cómo se construyen estas grandes aplicaciones utilizando React? La respuesta simple es construir pequeñas aplicaciones o componentes. Ejemplo:
```jsx
const Component2 = () => {
return (
);
};
const Component3 = () => {
return (
);
};
const Component1 = () => {
return (
);
};
ReactDOM.render(
,
document.getElementById("app")
);
```
2. React es declarativo en su mayor parte en lo que nos interesa más qué hacer que cómo realizar una tarea específica. La programación declarativa es un paradigma de programación que expresa la lógica de una computación sin describir su flujo de control. La programación declarativa viene con ciertas ventajas, como la reducción de los efectos secundarios (se produce cuando modificamos cualquier estado o mutamos algo o hacemos una solicitud de API), minimizamos la mutabilidad (ya que se abstraen muchos), mejor legibilidad, menos errores.
3. Flujo de datos unidireccional. La interfaz de usuario en React es en realidad la función del estado que significa que a medida que el estado se actualiza, también actualiza la interfaz de usuario. Así que nuestra interfaz de usuario avanza a medida que cambia el estado.
## Ventajas de React
Algunas razones para usar React son:
1. Rápido. Las aplicaciones creadas en React pueden manejar actualizaciones complejas y sentirse rápidas y receptivas.
2. Modular. En lugar de escribir archivos de código grandes y densos, puede escribir muchos archivos más pequeños y reutilizables. La modularidad de React puede ser una solución hermosa para los [problemas de mantenimiento](https://en.wikipedia.org/wiki/Spaghetti_code) de JavaScript.
3. Escalable Los programas grandes que muestran una gran cantidad de datos cambiantes es donde React se desempeña mejor.
4. Flexible. Puede usar React para proyectos interesantes que no tienen nada que ver con hacer una aplicación web. La gente todavía está descubriendo el potencial de React. [Hay espacio para explorar](https://medium.mybridge.co/22-amazing-open-source-react-projects-cb8230ec719f) .
### DOM virtual
La magia de React proviene de su interpretación del DOM y su estrategia para crear interfaces de usuario.
React usa el DOM virtual para representar virtualmente un árbol HTML, y luego, cada vez que cambia un estado y obtenemos un nuevo árbol HTML que debe llevarse al DOM del navegador, en lugar de escribir todo el árbol nuevo, React solo escribirá diferencia entre el nuevo árbol y el árbol anterior (ya que React tiene ambos árboles en la memoria). Este proceso se conoce como reconciliación de árboles.
### Reconciliación
React tiene un algoritmo de diferencia inteligente que utiliza para regenerar solo en su nodo DOM lo que realmente necesita regenerarse mientras mantiene todo lo demás tal como está. Este proceso de diferenciación es posible debido al DOM virtual de React.
Al usar el DOM virtual, React mantiene la última versión de DOM en la memoria y cuando tiene una nueva versión de DOM para llevar al navegador, esa nueva versión de DOM también estará en la memoria, por lo que React puede calcular la diferencia entre la versión nueva y la antigua. .
React le indicará al navegador que actualice solo la diferencia computada y no todo el nodo DOM. No importa cuántas veces regeneremos nuestra interfaz, React llevará al navegador solo las nuevas actualizaciones "parciales".
## React desde cero
¿Le gustaría comenzar a aprender lo básico de reaccionar sin atascarse creando un entorno de desarrollo? Lo más probable es que si eres nuevo en el desarrollo web, configurar un entorno de desarrollo puede hacer que te sientas un poco intimidado cuando solo estás tratando de aprender React o simplemente aprender sobre Reaccionar por primera vez.
En este artículo vamos a ver cómo podemos empezar a utilizar React utilizando solo un editor de texto y un navegador, y nada más.
[!["Ver](http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg)](http://www.youtube.com/watch?feature=player_embedded&v=100pKUE3OPI)
[### 1 - Configurar el código de la placa de la caldera con Emmet
Comencemos con el paso 1. Comenzaremos con un archivo en nuestro navegador llamado "index.html". Comenzaremos con el código HTML de la placa de la caldera. Para un inicio rápido, recomiendo usar Emmet con cualquier editor de texto que tenga y en la primera línea escribiendo en `html:5` luego presione la tecla Mayús para obtener el código a continuación. O puede seguir adelante y copiar y pegar el código de abajo.
```javascript
html:5
```
Esto resultará en el siguiente código:
```javascript
Document
```
Podemos rellenar el título de "¡Hora de React!".
Este contenido no aparecerá en su página web. Cualquier cosa en la sección principal del archivo HTML serán metadatos que nuestro navegador usará para interpretar nuestro código en la sección del cuerpo. Este título será lo que aparece en la pestaña de nuestra página, no en realidad en la página.
### 2 - Obtenga etiquetas de script para aprovechar el poder de React y las bibliotecas de Babel
Ok, el punto uno está marcado en nuestra lista. Veamos el artículo dos. Vamos a configurar nuestro entorno de desarrollador utilizando etiquetas de script para traer a React y Babel. Este no es un entorno de desarrollador de la vida real. Eso sería una configuración bastante elaborada. También nos dejaría con una gran cantidad de códigos de calderas y bibliotecas que nos sacarían del tema de aprender lo básico de React. El objetivo de esta serie es repasar la sintaxis básica de React y comenzar a codificar. Vamos a utilizar etiquetas `
...
Time to React!
```
Usted es libre de usar versiones más actualizadas de estas bibliotecas a medida que salen. No deben crear ningún cambio importante en el contenido que cubrimos.
¿Qué estamos haciendo aquí? El elemento: HTML `
React has not rendered yet
React has not rendered yet
React has not rendered yet