C2 - React
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
- 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
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)
- 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
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 (
...
)
}
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
- 303