React es una biblioteca de JavaScript que nació de una colaboración entre Facebook e Instagram y su objetivo es permitir a los desarrolladores crear interfaces de usuario fácil y rápidamente.
React no hace uso, ni suprime al resto de las tecnologías utilizadas dentro de un proyecto, por lo que es fácil probarlo sobre casi cualquier proyecto existente.
¿Qué es React?
React es una biblioteca de JavaScript. React es una biblioteca JavaScript declarativa, eficiente y flexible para construir interfaces de usuario, que te permite componer interfaces de usuario complejas a partir de fragmentos de código pequeños y aislados llamados “componentes”.
La Historia de React
React fue creado por Jordan Walke, un ingeniero de software en Facebook, que lanzó un primer prototipo de React llamado “FaxJS”. Fue influenciado por XHP , una biblioteca de componentes HTML para PHP. Se implementó por primera vez en las Noticias de Facebook en 2011 y luego en Instagram en 2012. Fue de código abierto en JSConf US en mayo de 2013.
React Native, que permite el desarrollo nativo de Android, iOS y UWP con React, se anunció en React Conf de Facebook en febrero de 2015 y de código abierto en marzo de 2015.
El 18 de abril de 2017, Facebook anunció React Fiber , un nuevo algoritmo central de la biblioteca React para construir interfaces de usuario. React Fiber se convertiría en la base de cualquier mejora futura y desarrollo de características de la biblioteca React.
El 26 de septiembre de 2017, React 16.0 fue lanzado al público. El 16 de febrero de 2019, React 16.8 fue lanzado al público. El lanzamiento introdujo React Hooks.
¿Principales características de React?
Declarativo
: React hace que sea sencillo crear interfaces de usuario interactivas. Diseña vistas simples para cada estado de tu aplicación, y React actualizará y renderizará eficientemente los componentes correctos cuando cambien los datos. Las vistas declarativas hacen que el código sea más predecible, más sencillo de entender y más fácil de depurar.
Basado en componentes: Crea componentes encapsulados que administran su propio estado y luego organizalos para crear interfaces de usuario complejas. Dado que la lógica de componentes está escrita en JavaScript y no sobre plantillas, puedes manejar fácilmente datos enriquecidos a través de la aplicación y mantener el estado fuera del DOM.
Aprende solamente una vez, escribe código desde cualquier lugar: Puedes desarrollar nuevas funciones en React sin reescribir el código existente. React también puede renderizarse sobre el servidor a través de Node JS y permite potenciar tus aplicaciones móviles usando React Native.
¿Qué es el DOM virtual de React?
El DOM virtual de React, es una característica que se basa en el uso de un Modelo de Objeto de Documento virtual, o DOM virtual. React crea una memoria caché de la estructura de datos sobre una memoria, que se encarga de calcular las diferencias resultantes y luego actualiza el DOM visualizado por el navegador de forma eficiente. Este proceso se llama reconciliación.
Esto permite al programador escribir código como si la página completa se procesara en cada cambio, mientras que las bibliotecas React solo representan subcomponentes que se van actualizando. Esta representación selectiva proporciona un gran aumento de rendimiento. Ahorra el esfuerzo de volver a calcular el estilo CSS por completo una y otra vez, así como todo el diseño de la página y su procesamiento posterior.
¿Qué es la arquitectura Flux de React?
Para respaldar el concepto de React de flujo de datos unidireccional (que podría contrastarse con el flujo bidireccional de AngularJS ), la arquitectura Flux representa una alternativa a la arquitectura popular modelo-vista-controlador.
Flux presenta acciones que se envían a través de un despachador central a una tienda , y los cambios en la tienda se propagan de nuevo a la vista. Cuando se usa con React, esta propagación se logra a través de las propiedades del componente.
El flujo puede considerarse una variante del patrón de observación.
Un componente React bajo la arquitectura Flux no debe modificar directamente ningún accesorio que se le pase, sino que debe pasar funciones de devolución de llamada que crean acciones que el despachador envía para modificar.
La acción es un objeto cuya responsabilidad es describir lo que ha sucedido: por ejemplo, una acción que describe a un usuario “siguiendo” a otro podría contener una identificación de usuario, una identificación de usuario objetivo y el tipo USER_FOLLOWED_ANOTHER_USER.
Este patrón a veces se expresa como “las propiedades fluyen hacia abajo, las acciones fluyen hacia arriba”. Se han creado muchas implementaciones de Flux desde su inicio, quizás el más conocido es Redux , que cuenta con una sola tienda, a menudo llamada una sola fuente de verdad.
¿Qué son los React Hooks o ganchos de React?
Los ganchos son funciones que permiten a los desarrolladores “engancharse” a las características de estado de reacción y ciclo de vida de los componentes de la función. Hacen que los códigos sean legibles y fácilmente comprensibles. Los ganchos no funcionan dentro de las clases: te permiten usar React sin clases.
React proporciona algunos ganchos incorporados como useState
, useContext
, useReducer
y useEffect
por nombrar algunos de ellos; todos ellos están establecidos en la Referencia de la API de Hooks. useState
y useEffect
, son los más utilizados, y sirven para controlar los estados y los efectos secundarios respectivamente sobre los componentes de React.
Primera implementación de React
React ha sido diseñado para una adopción gradual desde el principio, y puede usar la menor cantidad de React que necesite :
- Puedes probar y usar React a través de los sitios web de pruebas online para probar React.
- Puedes probar a agregar React a tu sitio web a través de un
<script>
en menos de un minuto. - Puedes crear una nueva aplicación React si estás buscando una poderosa cadena de herramientas JavaScript.
- Puede usar React con una etiqueta
<script>
de un CDN o como un paquete dereact
a través de npm.
¿Dónde puedo encontrar la documentación oficial de React?
Puede encontrar la documentación de React en el sitio web.
Consulte la página de Inicio para obtener una descripción general rápida.
La documentación oficial de React se divide en varias secciones:
- Tutorial
- Conceptos principales
- Guías avanzadas
- Referencia de API
- Dónde obtener soporte
- Guía contribuyente
Ventajas de usar React ⏫
- El proceso de actualizaciones está optimizado y acelerado.
- JSX hace que el código de componentes / bloques sea legible. Muestra cómo se conectan o combinan los componentes.
- El enlace de datos de React establece las condiciones para la creación de aplicaciones dinámicas.
- Rápido renderizado: El uso comprende métodos para minimizar el número de operaciones DOM que ayuda a optimizar el proceso de actualización y acelerarlo.
- La gran posibilidad de realizar pruebas: Las herramientas nativas de React se ofrecen para probar, depurar código.
- SEO-friendly. React presenta la experiencia de primera carga mediante la representación del lado del servidor y la conexión de controladores de eventos del lado del usuario:
- El equipo de Facebook apoya la biblioteca. La comunidad de Facebook puede dar consejos o ejemplos de código.
- Usando la última versión de React, la aplicación obtiene alta tecnología y es adecuada para sistemas de alta carga.
Desventajas de usar React ⏬
- Curva de aprendizaje. Al no ser un framework completo, se requiere un conocimiento profundo para la integración de la biblioteca gratuita de la interfaz de usuario en el framework MVC.
- La orientación visual es una de las desventajas de ReactJS. Se debe encontrar ‘Modelo’ y ‘Controlador’ para resolver el problema de la ‘Vista’.
- No usar un enfoque isomorfo para explotar aplicaciones conduce a problemas de indexación en los motores de búsqueda.
- A muchos desarrolladores no les gusta la documentación de JSX React, los manuales son difíciles de entender para los recién llegados.
- La biblioteca de React, es bastante grande; por lo que debe ser optimizada e implementada de forma correcta.
Recursos de React
? Agradecimientos a jlobos la gran mayoría de los enlaces aquí publicados son acogidos desde el repositorio de Github.?
Conocer Más Sobre React
- Los Mejores Libros de React
- Qué es y cómo funciona ReactJS
- React, ¿qué es?
- Conceptos básicos de JSX y ReactJS
- ReactJS, lo que trae la corriente
- ¿Cómo funciona React.js?
- Lo nuevo en React v0.14
- ReactJS: un enfoque diferente
- Retrospectiva de un proyecto con ReactJS
- Introducción a React
- ¿Qué es y cómo funciona React.js?
- REACTJS Y ¿SUS VÍCTIMAS?
- Lo que tienes que saber sobre React 15
- Serie de pasos concretos e indicaciones para empezar a usar Reactjs sin fatiga
- react howto
- Introducción a ReactJS
- Comparación React JS vs Angular 2
- ¿AngularJS vs ReactJS? Cómo confundir la velocidad con el tocino
- Introducción a ReactJS
- Interfaces gráficas con ReactJS
- Sobre REACT
Cursos de React
- Los Mejores Cursos de React
- Jesus Conde – React.js
- Platzi – Curso: React.js
- Oscar Uh Pérez – React js
- BrainTec – Desarrollo Ágil con React.js
- @elburabure – NodersCL – Curso de ReactJS Clase1
- @elburabure – NodersCL – Curso de ReactJS Clase2
- @elburabure – NodersCL – Curso de ReactJS Clase3
- Ricardo Borillo – React
- Risky Programmer – React.JS
- Código Facilito – Curso gratis de React
- Iván BTrujillo – React Native
- Uno de piera – Curse de ReactJS
- Curso de React.JS – Softcoders
- Mario Díez – Curso de React Native
- React: fundamentos hasta Full-stack!
- Make it Real: Curso básico de React
- Make it Real: Curso avanzado de React (Redux y Testing)
Los Mejores Tutoriales de React
- React, primera entrega.
- Comenzando con React
- Introducción práctica a ReactJS
- Primer Proyecto de React
- Los 3 mejores starter-kits de ReactJS
- Quiero hacer un proyecto en ReactJS. ¡¿Y ahora qué?!
- Componentes de orden superior en ReactJS
- Componentes reusables con el patrón contenedor-contenido
- React js y el ciclo de vida de los componentes.
- Desarrollando una aplicación básica con vistas en ReactJS
- ReactJS y Firebase, cómo mantener vistas actualizadas en tiempo real
- Cómo filtrar una lista con ReactJS
- Cómo usar Web Components con ReactJS y AngularJS
- Reutiliza tu código en React usando mixins
- Manejo de datos en tiempo real con RethinkDB y ReactJS
- Creando una aplicación con React.js y Sails.js
- Guía paso a paso para crear una Isomorphic app con React, Express y ES6
- Creando una Isomorphic app con React, Express y ES6 – Parte 2
- Creando una Isomorphic app con React, Express y ES6 – Parte 3
- Empezando con ReactJS y ECMAScript 6
- Ejemplo de aplicación con React.js en ECMAScript 6
- Consumiendo un API REST desde React.js con ECMAScript6
- Crear un componente con ReactJS
- Cómo utilizar ReactJS con Browserify
- Reagent, una libería para usar ReactJS desde ClojureScript
- Rutas en ReactJS con React Router
- Especificación de tipos en ReactJS con propTypes
- Un mixin para carga asíncrona de datos en ReactJS
- Carga asíncrona de datos en ReactJS a través de React Router
- ReactJS y el uso de los componentes en la web (Parte 1)
- ReactJS y el uso de los componentes en la web (Parte 2: Hola mundo en ReactJS)
- ReactJS y el uso de los componentes en la web (Parte 3: Un cliente de la pantalla de inicio de Reddit)
- ReactJS y el uso de los componentes en la web (Parte 4: Gráfica de barras con D3 y RectJS)
- ReactJS y el uso de los componentes en la web (Parte 5: Configurando nuestro entorno con webpack y ES6)
- Internacionalización con React.js y FormatJS
- Renderizando React.js en el server con Express.js y react-engine
- Como reconocer un click fuera de un elemento en ReactJS
- Buscar con React JS, PHP, MySQL y Bootstrap
- Administrador de notas con React
- Ejemplo lista de tareas con Backbone y React
- Similitudes entre React y Polymer con Apache Tapestry
- Testing de componentes de React con Jest
- AngularJS vs BackboneJS, Jquery, ReactJS y otros
- ReactJS: El ciclo de vida de un componente (I)
- ReactJS: El ciclo de vida de un componente (II)
- Internacionalización de aplicaciones en ReactJS: Rosetta
- ReactJS: Instalar todo lo necesario para empezar
- React JS en español – Tutorial Básico y Primeros pasos
- Soporte del bot de Google en páginas SPA: un estudio científico
- Propiedades y estado de los componentes React
- Ciclo de vida de los componentes React
- Configurar un entorno de desarrollo para React y ES6 con Webpack
- Tu entorno de desarrollo de ReactJS en 5 minutos con hjs-webpack
- Uso de Angular y React con BPM
- Primera aplicación con React
- Crea tu blog con ReactJS, GitHub y Surge
- Hola mundo en React JS
- Componentes de Alto Orden en React.js
- ¡Hola mundo!, configura un entorno de desarrollo para React.js
- Una radiografía al componente de React en ES6
- part#2 — Meteorjs+Reactjs
- Tipos de componentes en React JS
- ReactJS: creando componentes dinámicos
- Componentes de Orden Superior (Higher Order Components) en ReactJS
- Crea aplicaciones React sin configurar nada
- Usando React.js en el servidor con Django
- Comenzar con React
- Patrones de Reutilizacin de Código entre Componentes de ReactJS
- React y D3, la mezcla perfecta para hacer visualizaciones de datos complejos
- Componentes React con createClass
- Cómo configurar gulp.js para compilar React.js
Videotutoriales de React
- Introducción a ReactJS
- ReactJS en #programadorIO
- Flux, Arquitectura de UI by Facebook #programadorIO
- Noderscast – E07 – NodeJS 4.0, React y el Fin Del Mundo
- Introducción a ReactJs #DevHangout con @carloscuatin
- Chema Balsas – React en la vida real: AlloyEditor
- Chema Balsas (@jbalsas) nos habla sobre React y AllowEditor
- (Bogota) ReactJS y React Native
- STREAM: react + json api + nodejs + es6 ! español
- STREAM: react + webpack + es6 ! español
- STREAM: react + webpack + es6 ! español
- STREAM: react + webpack + es6 ! español
- Introducción a React.js
- Algo más de ReactJs | Scio Talks PV2016
- Consumir un API REST con React y Redux
- React: Rethinking Best Practices (es)
- Scaffolding de aplicaciones complejas con React – JSDayES 2016
- SailsJS + ReactJS como motor de plantilla
- Conociendo React
- ReactJS @ MuleSoft – 29 de junio de 2016
- Aprende a desarrollar aplicaciones en tiempo real con Crystal y React
- El camino para dominar Reactjs
- Aplicaciones Isomorficas con React
- Redux para frontenders y no tan frontenders
- Introducción a React Hooks
Recursos de React Native
- Recursos de React Native ?
- React Native: nativizando el desarrollo híbrido de apps
- Aprende a crear un nuevo proyecto con React Native
- REACTJS + REACT NATIVE = REACT DEVELOPER
Recursos de Flux
- Poor Man’s Flux
- La Arquitectura Flux
- Por qué es importante Flux y por qué (probablemente) no debes usarlo
Recursos de Redux
- Redux tutorial – Parte 1 (Flux library – Introducción)
- Redux tutorial – Parte 2 (Flux library – Conceptos necesarios)
- Redux tutorial – Parte 3 (Flux library – Store)
- Introducción a Redux.js
- Combinando React.js y Redux.js
- Middlewares en Redux.js
- Acciones asíncronas en Redux.js
- Pruebas unitarias en Redux.js
- Ruteo en aplicaciones de Redux y React.js
- Estructura de archivos Ducks para Redux.js
- Glosario de términos de Redux
- Migrando a Redux
- Manejo de errores en Redux.js
- Creando código modular con ducks de Redux
- Usando Redux en el servidor con Socket.io
- Renderizando aplicaciones de Redux en el servidor
- Obteniendo datos en aplicaciones de Redux
- Estado inmutable con Redux e Immutable.js
Relacionados
Aprender React NativeRecursos de React NativeComparación entre React Native, Flutter y XamarinRevery: Aplicaciones Nativas