TEMA 5

React
ÍNDICE

1.¿Qué es React?
2.JSX y renderizado
3.Orientación a componentes
4.Despliegue de proyectos con React
5.React Router
6.Hooks
1/
¿Qué es React?

¿Librería? ¿Framework?
¿Qué es React?

Una librería para JS

• Desarrollada por Jordan Walke, ingeniero de software de Facebook (Meta). Tras ser
usado de forma interna, se publicó de forma Open Source en 2013.

• En 2019 se lanzó la versión 16.8 que incluye los hooks y la orientación a

componentes funcionales y es la base actual del desarrollo de Front-Ends con React.

• Es muy utilizado para crear SPA’s (Single Page Applications) donde únicamente hay
1 archivo HTML (y varias vistas). Se centra en la creación de UIs.

4
Características clave de React

Dos principales

• Orientación a componentes: Con React crearemos pequeños “trozos” de interfaz

reutilizables que se irán agrupando para formar interfaces más complejas.

• DOM Virtual: React guarda una copia del DOM auténtico (el que el navegador le
facilita) en una memoria caché y cuando es necesario comunica los cambios al DOM
del navegador mediante un proceso denominado reconciliación.

5
2/
JSX y renderizado
JSX y renderizado

JSX. ¿Qué es?

• Se trata de una extensión de la sintaxis de JavaScript

que se utiliza únicamente en React. Nos permite
definir interfaces de una forma increíblemente
sencilla

const element = <h1>Hola Mundo!</h1>;

• ¿element es un String? ¿Es HTML? Ni una cosa ni la
otra. A esa variable se le denomina elemento de
React (no porque se llame element).

• Nos permite incluir código JS además de HTML. Cada

componente que desarrollemos será autocontenido.

7
JSX - Ejemplos

function pintarUsuario(usuario) {
return usuario.nombre + ' - ' + usuario.edad + 'años';
}

const jesus = {
nombre: 'Jesus',
edad: '17'
};

const element = <h1>Hello, {pintarUsuario(jesus)}</h1>;

const bloque = (
<div>
<h1>Titulo de Nivel 1</h1>
<h2>Titulo de Nivel 2</h2>
<ul>
<li><h3>Titulo de Nivel 3</h3></li>
<li><h3>Titulo de Nivel 3</h3></li>
</ul>
<img src='https://www.unir.net/wp-content/uploads/2021/10/unir-logo-v.jpg'
alt='unir-img'/>
</div>
); 8
JSX y renderizado

¿De qué forma renderiza React?

• Se hace uso del DOM virtual de React y del

método render, donde se incluye el componente
principal de la aplicación (que a su vez contendrá ReactDOM.render(
<React.StrictMode>
todos los otros componentes por los cuáles está <App />
formada) </React.StrictMode>,
document.getElementById('root')
);
• React permanecerá atento (suscrito) a los
cambios que ocurran dentro de los componentes index.js
y cuando detecte uno, re-renderizará (no
recargará) la página, comunicándose con el DOM
de navegador

9
3/
Orientación a componentes
Orientación a componentes

Componentes… componentes everywhere

• Los componentes en React permiten separar la interfaz de usuario en partes

claramente diferenciadas, buscando la reutilización.

• Un componente se desarrolla, mantiene y evoluciona de forma aislada.

• En la siguiente ilustración… ¿Qué crees que puede ser un componente?

11
Orientación a componentes

12
¡Revisa el Aula Virtual!

Recurso Audiovisual

05.01
Aprendiendo a identificar componentes en React

13
Orientación a componentes

Componentes funcionales

• Tradicionalmente, los componentes en React se escribían como clases, extendiendo

una superclase de React llamada Component. Esto era así principalmente por temas
de “marketing”.

• En la asignatura trabajaremos con la especificación más moderna, los componentes

funcionales.

• Se define un componente funcional mediante una función (puede ser una función
clásica o función flecha). De ahí el apellido “funcional”.

14
Orientación a componentes

import React from 'react';

• Importaciones necesarias import '../styles/header.css';
(React y css). const fechaHoraActual = () => {
let currentdate = new Date();
let datetime = currentdate.getDate() + "/"
+ (currentdate.getMonth() + 1) + "/"
• Función flecha para + currentdate.getFullYear() + " - "
obtener hora actual y + currentdate.getHours() + ":"
formatearla. + currentdate.getMinutes() + ":"
+ currentdate.getSeconds();
return datetime;
}
• Declaración del componente export const Header = () => {
funcional y exportación, return <div className="unir-header">
para que pueda ser leído <p><b>UNIR - Header</b></p>
<b>{fechaHoraActual()}</b>
por otros componentes que </div>;
lo incluirán. };

header.js
15
 Orientación a componentes

export const Header = (props) => {

return <div className="unir-header">

<p><b>UNIR - Header {props.numero}</b></p>
<b>{fechaHoraActualArrow()}</b>
</div>;
import React from 'react';
};
import ReactDOM from 'react-dom';
import './index.css';
export const MainApp = () => {
Header.js return (<>
import { MainApp } from './MainApp';
<Header numero="1" /> ReactDOM.render(
<Header numero="2" /> <React.StrictMode>
</> <MainApp />
) </React.StrictMode>,
}; document.getElementById('root')
);
export const Header = ({numero}) => {
MainApp.js
return <div className="unir-header">
<p><b>UNIR - Header {numero}</b></p>
index.js
<b>{fechaHoraActualArrow()}</b>
</div>;
};

Header.js (desestructuración)
16
4/
Despliegue de proyectos con
React
¡Revisa el Aula Virtual!

Recurso Audiovisual Importante

05.04
Despliegue de Front-End en entornos reales

18
¿DUDAS?
Demo Time
¿DUDAS?
HANDS ON!
5/
React Router
React Router

¿Qué es React Router?

• Una librería externa a React (hecha por Remix, ampliamente contrastada y utilizada
por la comunidad). Nos permite soportar enrutamiento dinámico en aplicaciones web
y móviles (React Native).

• Las rutas se enlazan con componentes funcionales definidos por nosotros (aka vistas).

npm i react-router
npm i react-router-dom

24
React Router

Componentes principales

• BrowserRouter: Es el componente que engloba las reglas de enrutamiento de la

aplicación. Da acceso a la aplicación a la API de HTML5 que soporta navegabilidad
(adelante, atrás…)

• Routes: Engloba Route y mandará renderizar el componente correspondiente.

• Route: Define una ruta de la aplicación. Indica qué componente funcional se va a

renderizar si esa ruta es elegida.
• Si tenemos el atributo caseSensitive: Se tendrán en cuenta mayúsculas. Por
defecto es case insensitive.

25
Ejemplo

import React from 'react';

import { Route, BrowserRouter, Routes } from "react-router-dom";
import { Component1 } from '../components/Component1';
import { Component2 } from '../components/Component2';
import { DefaultComponent } from
'../components/DefaultComponent';
import { Home } from '../components/Home';

export const AppRouter = () => {

return (
<BrowserRouter>
<div>
<Routes> 1
<Route path="/" element={ <Home/>} />
2
<Route path="/c1/" element={ <Component1/>} />
<Route caseSensitive path="/C2/" element={ <Component2/>} /> 3
<Route path="*" element={ <DefaultComponent/>} />
</Routes> 4
</div>
</BrowserRouter>
)
};

* React Router evalúa las rutas de arriba hacia abajo 26

Ejemplo

import React from 'react';

import { Route, BrowserRouter, Routes } from "react-router-dom";
import { Component1 } from '../components/Component1';
import { Component2 } from '../components/Component2';
import { DefaultComponent } from
'../components/DefaultComponent';
import { Home } from '../components/Home';

export const AppRouter = () => {

return (
<BrowserRouter>
<div>
<Routes> 1
<Route path="/" element={ <Home/>} />
2
<Route path="/c1/" element={ <Component1/>} />
<Route caseSensitive path="/C2/" element={ <Component2/>} /> 3
<Route path="*" element={ <DefaultComponent/>} />
</Routes> 4
</div>
</BrowserRouter>
)
};

* React Router evalúa las rutas de arriba hacia abajo 27

React Router

Rutas dinámicas

• ¿Qué ocurre con rutas del estilo /questions/1 donde una parte de la ruta es variable y,
previsiblemente, necesitaremos el valor para algún cálculo?

• Usaremos rutas con la sintaxis /questions/:questionId

• Usaremos el hook useParams dentro del componente renderizado por la ruta para
obtener el parámetro, cuyo nombre debe coincidir.

const { questionId } = useParams();

28
Demo Time
6/
Hooks
Hooks

¿Qué son los hooks?

• Se tratan de una consecuencia de la programación funcional y orientada a

componentes.

• Permiten enganchar los componentes funcionales desarrollados con otras

características propias de React o desarrolladas por nuestra cuenta.

• Únicamente se pueden usar con componentes funcionales y NO con clases.

• Nos permiten añadir estados, efectos… a nuestros componentes.

31
Hooks

¿Qué hooks cubrimos?

• useState.
• useEffect.
• useContext.
• useNavigate.
• useParams.
• Custom hooks.

• Puedes obtener aquí más hooks propios de React

32
Custom Hooks - Reglas

¿Hay reglas para hacer hooks?

• No se debe llamar a hooks dentro de bucles, condicionales o recursión.

• No se debe llamar a hooks dentro de funciones regulares de JS.

• Se llaman desde un componente funcional.
• Se llaman desde custom hooks.

• Su nombre debe comenzar por use…

33
Demo Time
Gracias