REACT JS
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”.
NOMBRES: Marcos Guzmán
CURSO: Nuevas Técnicas de Programación
CARRERA: Análisis en Sistemas
PROFESOR: Freddy Catucuamba
TEMA: React
REACT
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.
¿QUÉ ES REACT?
Es una librería JavaScript para crear interfaces de usuario o para la vista Front de tu
aplicación o página web, cuando integras React JS con HTML y CSS, la carga de las
páginas es más rápidas porque React JS usa componentes que los puedes escribir una
sola vez y luego reutilizarlos cuando sea necesario mostrar un elemento en el DOM
como un botón, una imagen, video, textos, encabezados, etc.
React JS al ser utilizado pues para la vista Front-end, se puede integrar con cualquier
entorno de lado del servidor Back-End como Node JS o Framework como Django,
Ruby on Rails, Spring, etc.
VENTAJAS
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
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 React JS. 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.
COMPONENTES
Los componentes son como las funciones de JavaScript. Aceptan entradas arbitrarias
(llamadas “props”) y retornan elementos de React que describen lo que debe aparecer en
la pantalla.
Componentes funcionales y de clase
La forma más sencilla de definir un componente es escribir una función de
JavaScript:
Esta función es un componente de React válido porque acepta un solo argumento de
objeto “props” (que proviene de propiedades) con datos y devuelve un elemento de
React. Llamamos a dichos componentes “funcionales” porque literalmente son
funciones JavaScript.
También puedes utilizar una clase de ES6 para definir un componente:
Los dos componentes anteriores son equivalentes desde el punto de vista de React.
Renderizando un componente
Anteriormente, sólo encontramos elementos de React que representan las etiquetas
del DOM:
Sin embargo, los elementos también pueden representar componentes definidos por
el usuario:
Cuando React ve un elemento representando un componente definido por el usuario,
pasa atributos JSX e hijos a este componente como un solo objeto. Llamamos a este
objeto “props”.
Por ejemplo, este código muestra “Hello, Sara” en la página:
Cuando React ve un elemento representando un componente definido por el usuario,
pasa atributos JSX e hijos a este componente como un solo objeto. Llamamos a este
objeto “props”.
Por ejemplo, este código muestra “Hello, Sara” en la página:
Composición de componentes
Los componentes pueden referirse a otros componentes en su salida. Esto nos
permite utilizar la misma abstracción de componente para cualquier nivel de detalle. Un
botón, un cuadro de diálogo, un formulario, una pantalla: en aplicaciones de React,
todos son expresados comúnmente como componentes.
Por ejemplo, podemos crear un componente App que renderiza Welcome muchas
veces:
Los componentes pueden referirse a otros componentes en su salida. Esto nos
permite utilizar la misma abstracción de componente para cualquier nivel de detalle. Un
botón, un cuadro de diálogo, un formulario, una pantalla: en aplicaciones de React,
todos son expresados comúnmente como componentes.
Por ejemplo, podemos crear un componente App que renderiza Welcome muchas
veces:
Extracción de componentes
No tengas miedo de dividir los componentes en otros más pequeños.
Por ejemplo, considera este componente Comment:
PROPIEDADES
Ya sea que declares un componente como una función o como una clase, este nunca
debe modificar sus props. Considera esta función sum :
Tales funciones son llamadas “puras” porque no tratan de cambiar sus entradas, y
siempre devuelven el mismo resultado para las mismas entradas.
En contraste, esta función es impura porque cambia su propia entrada:
React es bastante flexible, pero tiene una sola regla estricta:
Todos los componentes de React deben actuar como funciones puras con
respecto a sus props.
Por supuesto, las interfaces de usuario de las aplicaciones son dinámicas y cambian
con el tiempo. En la siguiente sección, introduciremos un nuevo concepto de “estado”.
El estado les permite a los componentes de React cambiar su salida a lo largo del tiempo
en respuesta a acciones del usuario, respuestas de red y cualquier otra cosa, sin violar
esta regla.
SITIOS CONSULTADOS
https://es.reactjs.org/docs/components-and-props.html
https://ciberninjas.com/react/#:~:text=La%20Historia%20de%20React,luego%20en
%20Instagram%20en%202012.
https://blog.nubecolectiva.com/que-es-react-js-historia-y-tu-primer-hola-mundo/
http://developinginspanish.com/2019/03/08/reactjs-vs-angular5-vs-vue-js-cual-elegir/
