C2 - React

Full Stack amb React

Introducción

Librería JS
UI reactivas
SPA: Single Page Applications
Data binding
Web components
Microservicios / Jamstack
Código fuente y código compilado
Reactividad
Inmutabilidad
JSX

Full Stack amb React

Componentes

Full Stack amb React

Extensión para navegador

React Developer Tools

Full Stack amb React

create-react-app

Crea el proyecto
react-scripts
eslint
webpack
servidor web de desarrollo
compila el código
dejar el mínimo código

Full Stack amb React

Directorios

/src: código fuente para desarrollar la app, Webpack lo tomará como origen para crear todo el código final.
/public: archivos estáticos, Webpack no los procesará, simplemente los copiará en la carpeta de build.
/build: carpeta donde irá el código final de la app, generado por Webpack.

Full Stack amb React

Despliegue

La carpeta build
netlify-cli
netlify deploy

Full Stack amb React

Componentes

Un tipo de elementos React
Componentes funcionales:
- función
- retorna elementos React
- se exporta

Full Stack amb React

JSX

Sintaxis que se parece a HTML pero es JavaScript
Atajo para no escribir la función React.createElement()
Elementos React
Un solo padre
className, htmlFor
Etiquetas autocerradas
Expresiones JS dentro con { }
Condiciones
Bucles
Eventos

Full Stack amb React

Componentes dentro de componentes

Etiqueta propia
props
children
propTypes (npm install prop-types)
- componente.propTypes = {
  ...
  }
- PropTypes.string, PropTypes.number, PropTypes.boolean, PropTypes.arrayOf(), PropTypes.shape()
- PropTypes.isRequired

Full Stack amb React

El state

El hook useState()
Devuelve un array con [variable, setVariable]
React vigilará cambios en la variable y hará que la UI reaccione a ellos
No modifico nunca el valor de la variable directamente
Cada vez que se modifica el valor, se llama de nuevo al componente

Full Stack amb React

Hooks básicos

useState(valorInicial)
- Sirve para declarar una variable de estado.
- Devuelve un array con [variable, setVariable].
useEffect(callback, dependencias)
- Sirve para ejecutar una función sólo cuando cambie alguna de las dependencias.
- No devuelve nada.
useRef(valor)
- Sirve para declarar una variable sin que se redeclare en cada llamada al componente.
- Devuelve un objeto con una propiedad current cuyo valor es el que le hemos pasado al hook.

Full Stack amb React

Hooks básicos

useMemo(callback, dependencias)
- Sirve para que se calcule un valor y se memorice, y sólo se vuelva a recalcular cuando cambie alguna de las dependencias.
- Devuelve el valor calculado.
useCallback(callback, dependencias)
- Sirve para memorizar una función y que se declare sólo una vez, excepto si cambia alguna de las dependencias.
- Devuelve la función callback.

Full Stack amb React

Formularios

Vincular cada control de formulario a una variable de estado, a partir de su propiedad value o checked, según el tipo de control.
Vincular el evento onChange de cada control a una función que modifique la variable del punto anterior a partir del e.target

<input
  type="text"
  id="nombre"
  name="nombre"
  value={formDatos.nombre}
  onChange={modificarDatos}
  required
/>

const modificarDatos = e => {
  const nombrePropiedad = e.target.name;
  setFormDatos({
    ...formDatos,
    [nombrePropiedad]: e.target.type === "checkbox" ? e.target.checked : e.target.value,
  });
};

Full Stack amb React

Context

Permite poner un valor a disposición de un componente y todos sus descendientes sin tener que pasarlo por props.
Podemos pasar un objeto para poder poner varios valores a disposición de los componentes.

Full Stack amb React

Context

Crear un contexto: createContext()
Consumir un valor de un contexto: useContext(NombreContext)
Colocar un proveedor de contexto englobando a otros componentes y proporcionando el valor:
<NombreContext value={valor}>

// Crear un contexto
const NombreContexto = createContext();

// Consumir un valor de un contexto
const valor = useContext(NombreContexto);

// Englobar componentes con un proveedor de contexto
<NombreContexto.Provider value={valor}>
  <Componentes>...</Componentes>
</NombreContexto.Provider>

Full Stack amb React

Reducers

Permiten aislar toda la lógica de modificación del estado
Funcionan mediante llamado de acciones
Las acciones son objetos
Las acciones se llaman mediante dispatch()

const datosReducer = (state, action) => {
	switch (action.type) {
		case "accion1":
			return stateModificado1;
		case "accion2":
			return stateModificado2;
		case "accion3":
			return stateModificado3;
		default:
			return state;
	}
}

Full Stack amb React

Reducers

Usamos el hook useReducer para obtener el estado y la función dispatch.

const [state, dispatch] = useReducer(functionReductora, estadoInicial);

Full Stack amb React

Enrutado

La librería react-router-dom
Toma el control de los links de navegación y hace que haya una página u otra en base a la URL, sin que se recargue la app
Haremos que cada página sea un componente
Vincularemos cada ruta con un componente

Full Stack amb React

Enrutado

Englobaremos todo lo que queramos que esté controlado por el router en un componente BrowserRouter
Lo renombraremos a Router

// Al principio del archivo:
import { BrowserRouter as Router } from "react-router-dom";

// En el JSX:
<Router>
  <RestoDeComponentes>...</RestoDeComponentes>
</Router>

Full Stack amb React

Enrutado

Usaremos los componentes Switch y Route para indicar qué componente se tiene que renderizar con cada ruta
También podemos establecer redirecciones con el componente Redirect
Las coincidencias se buscan por orden. Si se llega hasta el final es que no se ha encontrado ninguna coincidencia, por eso el 404 lo ponemos al final

<Switch>
  <Route path="/portada" exact>
    <Portada />
  </Route>
  <Route path="/listado" exact>
    <Listado />
  </Route>
  <Route path="/quienes-somos" exact>
    <QuienesSomos />
  </Route>
  <Route path="/" exact>
    <Redirect to="/portada" />
  </Route>
  <Route path="*" exact>
    <NotFound />
  </Route>
</Switch>

Full Stack amb React

Enrutado

Podemos establecer rutas con parámetros:
/factura/4
/alumno/2737
/bus/32
Para recoger los parámetros desde el componente usamos el hook useParams

<Switch>
  ...
  <Route path="/factura/:id" exact>
    <Factura />
  </Route>
  <Route path="/editar/:tipo/:id" exact>
    <FormFactura />
  </Route>
  ...
</Switch>

const Factura = () => {
  const { id } = useParams();
  return (
  	...
  )
}

const FormFactura = () => {
  const { tipo, id } = useParams();
  return (
  	...
  )
}

Full Stack amb React

Enrutado

Podemos recoger los parámetros query con el hook useLocation
Devuelve un objeto con una propiedad search
Se utiliza la clase URLSearchParams de JavaScript para parsear el resultado

const FormFactura = () => {
  const { tipo, id } = useParams();
  const query = new URLSearchParams(useLocation().search);
  // query.get("dato") para obtener el parámetro query que queramos
  return (
  	...
  )
}

Desenvolupador Web Full Stack amb React - C2-React

By mariogl

Desenvolupador Web Full Stack amb React - C2-React

Diapositivas para el curso Desenvolupador Web Full Stack amb React, del 2 de febrero al 27 de abril de 2021 en Barcelona. Módulo C2 - React

C2 - React

Desenvolupador Web Full Stack amb React - C2-React

More from mariogl