Full Stack amb React
Full Stack amb React
Full Stack amb 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
Full Stack amb React
Componentes
Full Stack amb React
Full Stack amb React
Extensión para navegador
Full Stack amb React
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
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
Full Stack amb React
Despliegue
La carpeta build
netlify-cli
netlify deploy
Full Stack amb React
Full Stack amb React
Componentes
Un tipo de elementos React
Componentes funcionales:
función
retorna elementos React
se exporta
Full Stack amb React
Full Stack amb React
JSX
Sintaxis que se parece a HTML pero es JavaScript
Condiciones
Bucles
Eventos
Full Stack amb React
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
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
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)
Full Stack amb React
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
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
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
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
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
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
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
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
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
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
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 (
...
)
}