# 2 React - Nuevas Pantallas
---
## Componentes de React
- [React](https://reactjs.org/) se basa en [componentes](https://reactjs.org/docs/react-component.html)
- Un componente puede ser una función o una clase (de _ES6_) que extiende de `React.Component`
- A los componentes que son funciones se les denomina **componentes puros** ya que no tienen **estado**
```javascript=
const App = () => (
<div className="App">
<h1>Hola mundo!</h1>
<h2>Esta es una página hecha en React</h2>
</div>
);
```
----
## Componentes puros o _stateless_
- La gestión del **estado** de un componente ha sido y sigue siendo el principal problema al desarrollar para React
- Los componentes con estado propio (clases _ES6_) tienen un **ciclo de vida** y se programa explícitamente cuando deben ser repintados
- Los componentes **puros** o **stateless** (sin estado) no tienen ciclo de vida, simplemente se pintan en función de los datos que reciben
---
## Propiedades del componente
- Las propiedades de un componente puro son sus **argumentos**
- Las propiedades de un componente como clase se reciben por su constructor y se acceden mediante `this.props`
- En ambos casos, las propiedades son **inmutables** en el interior del componente, y es por eso que no son parte del _estado_ del componente
----
## Propiedades del componente
- Los atributos pasados a un elemento JSX se reciben como propiedades del objeto pasado como primer argumento, y habitualmente se acceden por deconstrucción
```javascript=
const App = ({ nombre }) => (
<div className="App">
<h1>Hola {nombre}!</h1>
<h2>Esta es una página hecha en React</h2>
</div>
);
ReactDOM.render(<App nombre={"Pepe"}/>, rootElement);
```
----
<iframe
src="https://codesandbox.io/embed/objective-sun-v9yxq?fontsize=14&hidenavigation=1&theme=dark"
style="width:100%; height:600px; border:0; border-radius: 4px; overflow:hidden;"
title="React-ejemplo-simple"
allow=""
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
></iframe>
---
## JSX
- [_JSX_](https://reactjs.org/docs/introducing-jsx.html) es una sintaxis de React que combina e integra la apariencia y los elementos de HTML con Javascript
- _JSX_ permite usar elementos nativos de HTML de forma directa y también permite usar componentes de React como si fueran elementos HTML
- Se usan las llaves `{}` para inyectar Javascript y extraer el valor
```javascript=
<h1>Hola {nombre}! Esto es JSX</h1>
<h1>Hola Pepe! Esto es HTML</h1>
```
----
- Para pasar propiedades a componentes o elementos HTML, se tratan como atributos
```javascript=
<App nombre={"Pepe"}/>
```
- Un tipo especial de propiedades son los componentes anidados o _subcomponentes_
```javascript=
const Saludo = ({ children, nombre }) => (
<div className="App">
<h1>Hola {nombre}!</h1>
{children}
</div>
);
const App = ({ nombre }) => (
<Saludo nombre={nombre}>
<h2>Esta es una página hecha en React</h2>
</Saludo>
);
```
----
<iframe
src="https://codesandbox.io/embed/zen-saha-hodmw?fontsize=14&hidenavigation=1&theme=dark"
style="width:100%; height:600px; border:0; border-radius: 4px; overflow:hidden;"
title="zen-saha-hodmw"
allow=""
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
></iframe>
---
## Importando componentes
- Mediante `import` se traen componentes de otras librerías
<iframe
src="https://codesandbox.io/embed/optimistic-bas-r0m10?fontsize=14&hidenavigation=1&theme=dark"
style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
title="PrimeReact-HolaMundo"
allow=""
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
></iframe>
----
## Estilos
- Se pueden importar archivos `*.css` y `*.scss` mediante `import` y asignar estilos mediante `className` a los componentes
- Todos los componentes tienen una propiedad `style` que permite pasar propiedades CSS, se le llama [inline styling](https://www.w3schools.com/react/react_css.asp)
```javascript=
<div style={{ textAlign: "center" }}>
```
----
## Componentes en archivos separados
- Es una buena práctica tener cada componente en un archivo separado, con `export` como prefijo para que pueda ser importado
```javascript=
// Boton.js
export const Boton = ({ nombre }) => (
<Button
label="Púlsame"
onClick={() => alert("Hola " + nombre)} />
);
```
```javascript=
import { Boton } from "./Boton";
<Boton nombre = {"Pepe"}/>
```
----
<iframe
src="https://codesandbox.io/embed/primereact-holamundo-oeqdx?fontsize=14&hidenavigation=1&theme=dark"
style="width:100%; height:600px; border:0; border-radius: 4px; overflow:hidden;"
title="PrimeReact-HolaMundo"
allow=""
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
></iframe>
---
## Eventos
- Para reaccionar a eventos y realizar tareas en funcion de los datos de entrada, los componentes reciben _funciones_ como forma de tratar eventos
- En el ejemplo anterior `onClick` es una propiedad de `Button` que será llamada cuando se pulse el botón
```javascript=
<Button onClick={() => alert("Hola Mundo")} />
// La función provoca un pop-up en el navegador
```
---
## Estado
- Se considera **estado** a las **variables internas** de un componente que cambian de valor en función de **eventos**
- Los **componentes puros no tiene un estado por sí mismos**, pero necesitamos mantener un estado para poder implementar funcionalidad básica
- Los componentes clase tienen `this.state` y requiere mantener un ciclo de vida ante creación, inicialización y actualización...
----
## Estado en React
- Los componentes, de cualquier tipo, **son (re)pintados por React automáticamente cuando las propiedades cambian** (incluyendo la creación)
- Si los componentes guardan un estado interno, lo gestionan por su cuenta
- Cuando no tienen estado interno, es por tanto externo, los componentes puros reciben los cambios por **propiedades heredadas de componentes que sí tienen estado**
---
## Hooks
- Los [hooks](https://reactjs.org/docs/hooks-intro.html) fueron agregados a React en la versión 16.8
- Son una forma **funcional** de gestionar estados y otras interacciones entre componentes que, hasta ahora, se hacian con otras librerías encima de React
- Los _hooks_, como funciones, son ejecutadas y gestionadas por React, y **indican como se relacionan los eventos con las propiedades**, logrando **abstraer el estado**
----
## Hook useState
- Es el _hook_ mas simple, permite almacenar el estado de una variable
<iframe
src="https://codesandbox.io/embed/react-hooks-usestate-mmbpw?fontsize=14&hidenavigation=1&theme=dark"
style="width:100%; height:400px; border:0; border-radius: 4px; overflow:hidden;"
title="React Hooks: useState()"
allow=""
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
></iframe>
----
## Hook useEffect
- Se ejecuta cada vez que cambian la parte del estado que le indiquemos
<iframe
src="https://codesandbox.io/embed/react-hooks-usestate-oesvb?fontsize=14&hidenavigation=1&theme=dark"
style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
title="React Hooks: useState()"
allow=""
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
></iframe>
---
## Estado via acciones
- Es un patrón de gestión del estado heredado de otras librerías, consiste en generar acciones (_actions_) que modifican (_dispatch_) de forma unificada el estado (_reducer_)
- Una **action** es un mensaje que se envia al **reducer** mediante **dispatch** para que modifique el estado
- La principal ventaja de este patrón es modificar el estado de forma secuencial y poder separar la lógica de actualización de los eventos que las provocan
----
## Hook useReducer
<iframe
src="https://codesandbox.io/embed/react-usereducer-br2n1?fontsize=14&hidenavigation=1&theme=dark"
style="width:100%; height:600px; border:0; border-radius: 4px; overflow:hidden;"
title="react-useReducer"
allow=""
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
></iframe>
---
## Async / await
- La gestión de concurrencia en Javascript se realiza mediante [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)
- Una forma sencilla de crear y resolver una _Promise_ es mediante [`async`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function) y [`await`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await)
```javascript=
const loadData = async url => backend.get(url);
const data = await loadData(miUrl);
```
- Para esperar a que se resuelva una lista de _Promise_ se usa [`Promise.all`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all)
----
## Axios (llamar a backend)
- [Axios](https://github.com/axios/axios) es una libreria para realizar llamadas HTTP, y devuelve _Promise_
```javascript=
const loadData = async url => {
try {
const { data } = await axios.get(url);
return { ok: true, data };
} catch (error) {
const { response } = error;
return { ok: false, response };
}
};
```
----
<iframe
src="https://codesandbox.io/embed/react-usereducer-swmh4?fontsize=14&hidenavigation=1&theme=dark"
style="width:100%; height:600px; border:0; border-radius: 4px; overflow:hidden;"
title="react-useReducer"
allow=""
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
></iframe>
----
## CORS
- [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) es el sistema de permisos para poder hacer peticiones HTTP entre dominios
- Se necesita **permiso explícito** por parte del llamante y el llamado para realizar peticiones entre dominios en un navegador
- Si todas las llamadas son **siempre a nuestro backend**, no existirá este problema, y además es la mejor práctica de seguridad
---
## Refs y _this_
- Los [refs](https://reactjs.org/docs/refs-and-the-dom.html) son _punteros_ a componentes en React, permiten acceder a componentes fuera de ellos
- Se deben usar sólo cuando sea estrictamente necesario
- Se suele usar también para acceder a `this` en componentes que son clases
----
## [useRef](https://reactjs.org/docs/hooks-reference.html#useref)
<iframe
src="https://codesandbox.io/embed/primereact-useref-con-messages-dhn09?fontsize=14&hidenavigation=1&theme=dark"
style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
title="PrimeReact-useRef-con-Messages"
allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
></iframe>
{"metaMigratedAt":"2023-06-15T02:24:50.264Z","metaMigratedFrom":"Content","title":"2 React - Nuevas Pantallas","breaks":true,"contributors":"[{\"id\":\"eb46e95d-847b-46ed-a8cd-6ce9f5c14045\",\"add\":11005,\"del\":0}]"}