Hola!
El día de hoy les traigo algunos conceptos básicos de React que siempre es bueno tener en cuenta en especial a quienes recién empiezan a interesarse y entender las capacidades de esta librería.
¿Qué es React?
React es una librería JavaScript de front end desarrollada por Facebook en 2011. Sigue el enfoque basado en componentes que ayuda a construir componentes de interfaz de usuario reutilizables. Se utiliza para el desarrollo de interfaces web complejas e interactivas y móviles. A pesar de que no fue abierto hasta el 2015, tiene una de las comunidades más grandes que lo apoyan y ayudan a su continua mejora. A día de hoy su última versión estable es la 16.2.
¿Cuáles son las características de React?
- Utiliza el DOM virtual en lugar del DOM real.
- Utiliza el renderizado del lado del servidor.
- Sigue un flujo de datos unidireccional.
Principales ventajas de React.
- Aumenta el rendimiento de la aplicación
- Se puede utilizar cómodamente tanto en el lado del cliente como del servidor.
- Debido a JSX, la legibilidad del código aumenta
- React es fácil de integrar con frameworks como Meteor, Angular, etc.
- Usando React, escribir casos de prueba de UI se vuelve extremadamente fácil.
¿Cuáles son las limitaciones de React?
- React es sólo una biblioteca, no un framework completo.
- Su biblioteca es muy grande y lleva tiempo comprenderla.
- Puede ser poco difícil para los programadores novatos entender
- La codificación se vuelve compleja a medida que usa plantillas en línea y JSX
¿Qué es JSX?
JSX es una abreviatura de JavaScript XML. Este es un tipo de archivo usado por React que utiliza la sintaxis de JavaScript junto con la sintaxis HTML como plantilla. Esto hace que el archivo HTML sea realmente fácil de entender. Este archivo hace que las aplicaciones sean robustas y aumenta su rendimiento.
render(){
return(
¿Qué es el Virtual DOM?
Un DOM virtual es un objeto JavaScript ligero que originalmente es sólo la copia del DOM real. Es un árbol de nodos que enumera los elementos, sus atributos y contenido como Objetos y sus propiedades. La función render de React crea un árbol de nodos a partir de los componentes de React. Luego actualiza este árbol en respuesta a las mutaciones en el modelo de datos causadas por varias acciones realizadas por el usuario o por el sistema.
¿Por qué los navegadores no pueden leer JSX?
Los navegadores sólo pueden entender la sintaxis JavaScript pero JSX no en una sintaxis JavaScript normal. Por lo tanto, para permitir que un navegador lea JSX, primero necesitamos transformar el archivo JSX en un objeto JavaScript usando transpiladores JSX como Babel y luego pasarlo al navegador.
En React, todo es un componente.
Los componentes son los componentes básicos de la interfaz de usuario de una aplicación React. Estos componentes dividen la interfaz de usuario completa en pequeñas piezas independientes y reutilizables. A continuación, hace que cada uno de estos componentes sea independiente entre sí sin afectar al resto de la interfaz de usuario.
El propósito de render () en React.
Cada componente React debe tener un render () de forma obligatoria. Devuelve un solo elemento React que es la representación del componente DOM nativo. Si más de un elemento HTML necesita ser renderizado, entonces deben ser agrupados dentro de una etiqueta padre como
<form>, <group>,
<div>, etc. Esta función debe mantenerse pura, es decir, debe devolver el mismo resultado cada vez que se invoca.
¿Qué son las props?
Las props son la abreviatura para Propiedades en React. Son componentes de sólo lectura que deben mantenerse puros, es decir, inmutables. Siempre se transmiten de los componentes padre a hijo a través de la aplicación. Un componente secundario no puede enviar nunca una prop al componente padre. Esto ayuda a mantener el flujo de datos unidireccional y se utilizan generalmente para renderizar los datos generados dinámicamente.
¿Qué es el estado en React y cómo se usa?
Los estados son el corazón de los componentes de React. Los Estados son la fuente de los datos y deben ser lo más simples posible. Básicamente, los estados son los objetos que determinan la representación y el comportamiento de los componentes. Son mutables a diferencia de las props y crean componentes dinámicos e interactivos. Se accede a ellos a través de this.state().
¿Qué son componentes funcionales?
La forma más sencilla de definir un componente es escribir una función JavaScript:
functionWelcome(props) {
return
Esta función es un componente React válido porque acepta un solo argumento de objeto “props” con datos y devuelve un elemento React. Llamamos a estos componentes “funcionales” porque literalmente son funciones JavaScript.
¿Qué son componentes de clase?
Un componente de clase es una forma más detallada de definir un componente en React. También actúa como una función que recibe props, pero esa función también considera un estado interno como entrada adicional que controla el JSX devuelto.
classWelcomeextendsReact.Component{
render() {
return Hello, {this.props.name};
}
}
Eso es todo, manito arriba por la segunda parte 😃
Curso de React.js 2017
