React, ¿Cómo aprender a programar con el framework Javascript de React?

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 :

¿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:

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

Cursos de React

Los Mejores Tutoriales de React

Videotutoriales de React

Recursos de React Native

Recursos de Flux

Recursos de Redux

Relacionados

Aprender React NativeRecursos de React NativeComparación entre React Native, Flutter y XamarinRevery: Aplicaciones Nativas

Relacionados