Scribd
Cargar
26 vistas

Qué Es React Js

React JS es una biblioteca desarrollada por Facebook para construir interfaces de usuario de manera declarativa usando componentes. Los componentes son piezas independientes y reutilizables que definen la estructura, estilo y comportamiento. JSX es una sintaxis que extiende JavaScript para facilitar la escritura de componentes de React de forma más declarativa.

Cargado por

drawil1355
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
26 vistas

Qué Es React Js

React JS es una biblioteca desarrollada por Facebook para construir interfaces de usuario de manera declarativa usando componentes. Los componentes son piezas independientes y reutilizables que definen la estructura, estilo y comportamiento. JSX es una sintaxis que extiende JavaScript para facilitar la escritura de componentes de React de forma más declarativa.

Cargado por

drawil1355
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 9

¿Qué es react js?

React js es una biblioteca desarrollada por facebook y sirve para hacer interfaces de usuario
de una manera sencilla, declarativa y basada en componentes.
Lo puedes comenzar a usar tanto en un proyecto ya iniciado como en uno nuevo desde
cero, sea desde agregar elementos simples (como un botón) hasta una app robusta y
compleja con mucha interacción y dinamismo.

React y jsx
Jsx es una sintaxis que nos permite escribir componentes de react de una manera más
declarativa.
Todos los ejemplos que veremos en este apartado son definiciones de componentes en
React. Profundizaremos más sobre los componentes en los siguientes apartados.

Parece HTML, pero en realidad es Javascript. Lo que estamos indicando aquí es: Crea en la
interfaz de usuario un elemento h1 cuyo contenido sea “Componente declarado con JSX”.
Pero el navegador no sabe cómo interpretar la sintaxis de JSX. Por lo tanto, recurrimos a
herramientas como webpack y babel para que nos transforme nuestro código en JSX en una sintaxis
que el navegador si pueda reconocer.

Como ejemplo, este es el equivalente transpilado del código mostrado anteriormente.

No es obligatorio usar React con JSX pero es lo recomendado debido a que nos simplifica
bastante el código que tenemos que escribir para declarar nuestros componentes.
Jsx y expresiones de javascript
Ya que Jsx es javascript puro, es posible ejecutar expresiones de javascript dentro del
mismo.
Una expresión de javascript es una sentencia del tipo:
1+1
‘hello’
5>4
Considera este ejemplo.

En este ejemplo, estamos pasando por parámetro la variable name y en la condición


mostramos un mensaje u otro según si name tiene valor o no.
Más adelante vamos a ver diferentes maneras de renderizado condicional.

Jsx y atributos
Ya que usamos Jsx para declarar elementos a mostrar en el navegador, también podemos
especificar los atributos de dichos elementos.

const myElement = <div id="element">Mi elemento</div>

// equivalente transpilado
const myElement = React.createElement(
'div',
{
id: 'element',
},
'Mi elemento'
)
Como puedes ver, nos resulta muy familiar la sintaxis de Jsx pero recuerda que Jsx es
javascript puro, no html, es por ello que he colocado el equivalente transpilado.

Otros ejemplos.
const Avatar = (user) => <img src={user.photo} />
const getSum = (n1, n2) => n1 + n2
const Result = () => <h1>{getSum(1, 2)}</h1

React components
Un componente es una pieza independiente de nuestra UI y tiene las siguientes
características:

 Es aislado.
 Reusable.
 Define la estructura (html), el estilo (css) y el comportamiento (js).
Una analogía de los componentes son las piezas de lego. Una pieza de lego es
independiente, reusable y tiene su propia estructura (forma y color).
Un componente puede estar constituido por una o más unidades llamadas elementos. Por
ejemplo, el div, img, span, p, h1, todos estos son elementos.
Y con jsx, podemos usar tanto elementos como componentes definidos por nosotros.
Tips:
Define tus componentes siempre con letra mayúscula, esto le indica a React que es un
componente y no un elemento html como un div, img, etc. Ejemplo: React va a tratar a div
como un elemento html mientras que Title como un componente.
Por último, los dos tipos irreductibles de componentes básicos de React son:

 Componentes funcionales. Definidos por medio de una función de javascript.


 Componentes clase. Definidos por medio de clases de ES6.
A partir de estos dos tipos de componentes, existen más categorías que veremos en la parte
de Tipos de componentes.

Ambos ejemplos anteriores son equivalentes a la hora de definir un componente. Vamos a


profundizar más en el componente de tipo clase en la parte de estado y ciclos de vida.

Renderizar componentes
La manera de renderizar un componente en una aplicación es por medio de una utilidad
llamada ReactDOM.

render acepta dos parámetros: un componente y el lugar del DOM donde queremos que se
monte.
React Props
También podemos hacer una analogía de los componentes como una función.
Una función puede recibir parámetros y ejecutar operaciones o procesos.
Podemos dividir a las funciones como puras y dinámicas.
Las funciones puras son aquellas que dados los mismos parámetros, obtendremos siempre
el mismo output o resultado. Ejemplo: F (x) = x + 1, significa que si x es igual a 10, entonces
siempre obtendremos 11 de resultado (se le suma más uno a x).
Las funciones dinámicas son aquellas que dados los mismos parámetros, no siempre
obtendremos el mismo resultado. Ejemplo: una función que ejecute Date, Math.rand (para
obtener números random), llamadas a una api externa (puede retornar errores de servidor),
etc.
¿Y esto qué tiene que ver con los componentes?
Si vemos a los componentes como funciones puras, podemos crear piezas más reutilizables
en nuestra UI.
El ejemplo más claro es un componente que tenga un mensaje de bienvenida a un usuario.

Si queremos saludar a un usuario con otro nombre, no vamos a crear otro componente.
Imagina tener 1000 usuarios con diferentes nombres, crear 1000 componentes solo para
eso no es para nada óptimo.
Lo que hacemos es crear un solo componente que nos permita pasar por parámetro el valor
que deseemos.

Este ejemplo de componente es como una función pura debido a que dado el mismo
parámetro, siempre obtendremos el mismo resultado.
Pues bien, los props es un objeto de javascript que es pasado como un parámetro a un
componente tal y como lo hicimos en el ejemplo anterior. Props viene de properties o
propiedades.

State y ciclo de vida de un componente


El estado de un componente es la manera en que un componente puede controlar valores
privados o internos.
A diferencia de los props que son solo de lectura y no pueden ser modificados por el
componente directamente, el estado es un valor que si es controlado por el componente y
es modificado por el mismo.
Actualmente existen dos maneras de definir el estado: Por medio del hook useState (lo
verás en la parte de react hooks, useState) Por medio de componentes definidos con clases
de ES6 (lo verás más a detalle en la parte de tipos de componentes).
Vamos a ver un ejemplo de un componente que actualizará estado cada segundo solo como
ejemplo.
¡Corriendo el ejemplo anterior, vamos a notar que el componente actualiza el contador de
manera correcta!

Ciclo de vida de un componente


Una gran diferencia entre un componente de tipo clase y uno de tipo function es que en el
de tipo clase nos da acceso a unos métodos reservados que nos permiten acceder al ciclo
de vida del componente.
El ciclo de vida más común de un componente consiste en:

 Antes de montarse en el DOM.


 Cuando ya se montó en el DOM.
 Cuando se ha actualizado el componente (la actualización de un prop o del state).
 Cuando se va a desmontar del DOM.
Veamos un ejemplo en código.
Este es el orden en que se ejecuta este componente:

 El constructor es llamado antes de que el componente sea montado.


 Se ejecuta el método render.
 componentDidMount se ejecuta inmediatamente después de que se ha montado el
componente.
 Ya que en componentDidMount estamos actualizando el estado, hace que ahora se
ejecute el método componentDidUpdate.
 Se vuelve a ejecutar el método render.
 Ya que no estamos removiendo el componente del DOM, componentWillUnmount
no se ejecutará hasta que explícitamente lo hagamos.
Tips en el constructor:
-Si no inicializas estado y no haces bind de métodos, no necesitas implementar el
constructor. Siempre debes ejecutar super(props) en el constructor para que this.props
exista en el componente. -No debes llamar setState en el constructor, llama this.state para
asignar valores al estado directamente. -No implementes lógica que haga efectos
secundarios como una llamada a un api en el constructor. -No copies los valores de los props
en el estado. this.state = { name: props.name } es una mala práctica. Cuando se actualice el
prop, no se verá reflejado en el state. Mejor usa los props directamente.
Sin embargo, es válido asignar al state el valor de un prop si tu intención es asignar un valor
inicial o default. this.state = { name: props.initialName } tiene más sentido.
Tips en componentDidMount:

 Es el lugar adecuado para llamadas a apis. Ejemplo: cuando consumes un api para
cargar y mostrar los datos en tu componente.
 Es buen lugar para crear suscripciones.
Tips en componentDidUpdate:

 Toma en cuenta que no se ejecuta la primera vez que se monta el componente.


 Buen lugar para optimizar las llamadas a apis solo si es realmente necesario.
 Incluso si aqui actualizas el estado, este método se volverá a ejecutar. Para evitar
loops infinitos de actualizaciones, coloca una condición antes de actualizar el estado.
Tips en componentWillUnmount:

 Buen lugar para limpiar las suscripciones que hayas hecho en componentDidMount.
 No llames setState aquí debido a que el componente será desmontado y no seguirá
existiendo.

También podría gustarte