React update Flashcards
En react no es posible renderizar dos elementos juntos sin un wrapper, por eso nacio react ____ y su shortcode es <> >(angle bracket in English)
fragment
Usamos props.___ cuando queremos enviar varias cosas dentro y se puede usar el wrapper
children
Cuando crear un componente reusable, quieres que otros lo usen bien, por eso se debe validar, con propTypes para ello se debe:
Incluir el proptypes JS package
En Prod no se usan, por lo que es bueno usar un plugin para removerlas
son string literales que permiten embedded expresiones de JS, así como usar multi lineas y interpolation
template literal
Dentro de las ___, siempre deben evaluar algo, devolver un valor, por eso no podemos usar for loop, if statements.
expresiones
Style components with React
- Se puede hacer uso de ClassName o estilos inline con style, pero se debe enviar un objeto
- React DOM compares the element and its children to the previous one, and only applies the DOM updates necessary to bring the DOM to the desired state.
Handle events stateful function component
Para eventos escuchamos con onClick, onChange, etc.
Create an state using react for count
const [countState,setCountState] =React.useState(0)
Manejar side Effects (como llamar a APIs)
useEffect, called only when name is updated
Create a custom hook called localStorateState
Tomar en cuenta que se empiezan con la palabra use como estandar para el linter
Para que sirven las ref en react?
Algunas veces toca trabajar el DOM directo por ejemplo third parties con ref o manipular video
Pasos para crear una referencia en React
1- Primero se crea la referencia
const tiltRef = React.useRef();
//esto en el return()
2- luego se accede en el useEffect
const tiltNode = titlRef.current;
Qué es un lazy initializer?
lazy initializer, what is it?
if you ned to use heavy function calls or access io like with localStorage, you could use lazy initializer function in useState(()=>0)
react will use it once, not in each rerender
Some examples of side effects in React components are:
- Making asynchronous API calls for data
- Setting a subscription to an observable
- Manually updating the DOM element
- Updating global variables from inside a function
Explain the two useEffects
explain it :)
Only Running useEffect Once
Cleanup in useEffect
Returning a function from effect is an optional cleanup mechanism. Each effect may or may not return a function that would execute cleanup code
To specify the code for the cleanup, we add an anonymous return function to the component. The return function is executed every time when the component re-renders.
Manejar forms con React hacer submit
onSubmit
Tipos de forms fields
controlled and uncontrolled fields
Haga un controlled field del username
- El value debe apuntar al state
- usar un onChange para actualizar el state
Manejo de errores con React
Se debe crear un componente de tipo clase ErrorBoundary
- Se crea el componente de error
- Se agrega el fallback
- se usa de wrapper
Cuando se hace render de una lista, se debe tener un __ porque React usa esto para identificador único de los elementos, así cuando algo cambia, ser más eficiente a la hora de realizar el cambio en el DOM
key
