- El estado de la interfaz de usuario se vuelve difícil de manejar con JavaScript.
- Foco en la lógica de negocio.
- Comunidad enorme y activa.
- Alto rendimiento.
- Vistas declarativas para cada estado.
- Virtual DOM.
- Componentes.
- Puede renderizar en servidor y cliente.
- React Native
- React Windows
- Next.js
- GraphQL
- Redux
- Flux
| Ventajas | Desventajas |
|---|---|
| Fáciles de crear, leer | No puedes usar los métodos del Ciclo de vida (ComponentsDidMount, ComponentDidUpdate) |
| Menos código | No tienen state |
| Fácil de probar | No puedes usar refs |
| No puedes usar la palabra this | Si necesitas cualquiera de estas 3, entonces crear un Class Component |
| Se dice que tienen mejor performance |
- Son métodos o funciones que se ejecutan automáticamente en el componente.
- Solo existen en Class Components.
- Son eventos que ocurren desde que el componente es creado hasta que es destruido.
Se invoca automáticamente cuando el componente/documento está listo, es el simil a $(document).ready() de jQuery.
class App extends Component {
componentDidMount() {
console.log("El componente está listo");
}
render() {
return(<p>Hola mundo</p>);
}
}Se invoca automáticamente cuando el componente aún no está listo.
class App extends Component {
componentWillMount() {
console.log("El componente aún no está listo");
}
render() {
return(<p>Hola mundo</p>);
}
}Se invoca automáticamente cuando algo cambió en el componente.
class App extends Component {
componentDidUpdate() {
console.log("Algo cambió en el componente");
}
render() {
return(<p>Hola mundo</p>);
}
}Un nuevo componente ha sido cargado y este será reemplazado, pero puedes ejecutar algo antes de que esto suceda.
class App extends Component {
componentWillUnmount() {
console.log("Un nuevo componente ha sido cargado y este será reemplazado, pero puedes ejecutar algo antes de que eso pase");
}
render() {
return(<p>Hola mundo</p>);
}
}-
¿Cuál método del ciclo de vida se ejecuta primero: render() o componentDidMount()?
R: render(). Render se ejecuta antes que componentDidMount(), solamente componentWillMount() se ejecuta antes.
-
¿Cuál es el único método obligatorio en un Class Component?
R: render() es el único método obligatorio.
-
¿Puedo tener un state en un Stateless Funcional Component?
R: No. El mismo nombre lo dice, Componente Funcional sin estado
- Clases y Props (la forma más común, 95% del código existente en React la utiliza).
- Context API (Disponible desde 16.3).
- React Hooks (Disponible desde 16.8).
- Redux (La forma más común de manejar un state complejo).
No son excluyentes, se pueden mezclar:
- Clases y Props con Redux (lo más común).
- Hooks con Context.
- Hooks con Redux.
- Clases y Props con Context.
- Disponibles desde la versión 16.3+.
- Puedes pasar el state o funciones desde el componente principal hasta los hijos, sin necesidad de pasarlo por cada componente.
- En React sólo pasas los datos del componente principal al hijo.
- También se puede actualizar el state desde el hijo (o ejecutar una función que lo actualice).
¿Los props son obsoletos?
- Aún se pueden utilizar los Props, así es como React fue diseñado y el 90% de las aplicaciones React así están hechas.
- Si el proyecto es sencillo, tal vez props sea mejor opción que Context.
- Context hace un poco más complicado la re-utilización de los componentes.
El provider es donde se crean los datos, state y funciones.
El consumer es donde se consumen los datos o se utilizan las funciones.
Digamos que tienes 4 componentes:
- App
- Tienda
- Productos
- Producto
Usualmente con props, pasarias de App hacia Tienda, de Tienda a Productos y de Productos a Producto.
Con context puedes pasar los datos desde el componente padre al hijo directamente (o al hijo del hijo...). Esta es una de sus grandes ventajas.
- Disponibles desde la versión 16.8.
- Te permitirán actualizar el State sin necesidad de crear un Class Component.
- La cantidad de código es menor.
Hooks vienen con una función llamada useState.
import React, {useState} from 'react';Esta función al extraer sus valores cuenta con 2 partes:
const [cliente, guardarClientes] = useState([]);clientes = Tiene el state actual
guardarClientes = Cambia el state
-
¿Los hooks hacen que mi aplicación sea más rápida?
No.
-
¿Los hooks hacen algo que en un Class Component no se pueda hacer?
No.
-
¿Los Class Components van a desaparecer?
No.
-
¿Mi conocimiento de state, props, eventos será obsoleto ahora con los hooks?
No.
-
¿Debo re-escribir toda mi aplicación de React con 80 componentes a Hooks?
Probablemente No.
-
¿Debo implementar Hooks en mi próximo proyecto?
No necesariamente, va a depender del proyecto.
- Menor cantidad de código
- Mayor facilidad para implementar reducers, administrar el state y context.
- useState
- useEffect
- useContext
- useRef
- useReducer
- useCallback
- useMemo
- Sólo debe existir un store con todo el state de la aplicación
- Los componentes/vistas no modifican el state directamente
- El state se modifica por medio de funciones
- Store: Contiene el state (1 por aplicación)
- Dispatch: Ejecuta una acción que actualizará el state
- Action: Objetos js, tienen un tipo y payload (datos)
- Subscribe: Similar a un event listener para el state
- Reducers: Son funciones. Saben que hacer con las acciones y el payload
Requisitos: npm >= 5.2
create-react-app viene incluido en las dependencias de node a partir de la versión 5.2 de npm.
Para crear una aplicación React utilizar el siguiente comando:
$ npx create-react-app my-appReemplazar my-app por el nombre del proyecto.
Algunos recursos utilizados en el curso de React: