React update

Question 1

En react no es posible renderizar dos elementos juntos sin un wrapper, por eso nacio react ____ y su shortcode es <> >(angle bracket in English)

Answer 1

fragment

Question 2

Usamos props.___ cuando queremos enviar varias cosas dentro y se puede usar el wrapper

Answer 2

children

Question 3

Cuando crear un componente reusable, quieres que otros lo usen bien, por eso se debe validar, con propTypes para ello se debe:

Answer 3

Incluir el proptypes JS package

En Prod no se usan, por lo que es bueno usar un plugin para removerlas

Question 4

son string literales que permiten embedded expresiones de JS, así como usar multi lineas y interpolation

Answer 4

template literal

Question 5

Dentro de las ___, siempre deben evaluar algo, devolver un valor, por eso no podemos usar for loop, if statements.

Answer 5

expresiones

Question 6

Style components with React

Answer 6

• 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.

Question 7

Handle events stateful function component

Answer 7

Para eventos escuchamos con onClick, onChange, etc.

Question 8

Create an state using react for count

Answer 8

const [countState,setCountState] =React.useState(0)

Question 9

Manejar side Effects (como llamar a APIs)

Answer 9

Question 10

useEffect, called only when name is updated

Answer 10

Question 11

Create a custom hook called localStorateState

Answer 11

Tomar en cuenta que se empiezan con la palabra use como estandar para el linter

Question 12

Para que sirven las ref en react?

Answer 12

Algunas veces toca trabajar el DOM directo por ejemplo third parties con ref o manipular video

Question 13

Pasos para crear una referencia en React

Answer 13

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;

Question 14

Qué es un lazy initializer?

Answer 14

Question 15

lazy initializer, what is it?

Answer 15

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

Question 16

Some examples of side effects in React components are:

Answer 16

• Making asynchronous API calls for data
• Setting a subscription to an observable
• Manually updating the DOM element
• Updating global variables from inside a function

Question 17

Explain the two useEffects

Answer 17

explain it :)

Question 18

Only Running useEffect Once

Answer 18

Question 19

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

Answer 19

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.

Question 20

Manejar forms con React hacer submit

Answer 20

onSubmit

Question 21

Tipos de forms fields

Answer 21

controlled and uncontrolled fields

Question 22

Haga un controlled field del username

Answer 22

• El value debe apuntar al state
• usar un onChange para actualizar el state

Question 23

Manejo de errores con React

Answer 23

Se debe crear un componente de tipo clase ErrorBoundary

• Se crea el componente de error
• Se agrega el fallback
• se usa de wrapper

Question 24

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

Answer 24

key

Question 25

Compartir state entre dos sibling components

Answer 25

Lo idel es mover el estado al padre más cercano de ambos

Question 26

Los ___ proporcionan una opción de primera clase para renderizar hijos en un nodo DOM que existe por fuera de la jerarquía del DOM del componente padre.

Answer 26

portales

Question 27

Caso de uso de los portales

Answer 27

los modals

Question 28

Ejemplo de portal

Answer 28

Question 29

Reglas de los hooks

Answer 29

1. No llames Hooks dentro de ciclos, condicionales o funciones anidadas
2. Llama Hooks solo en funciones de React

Question 30

No llames Hooks dentro de ciclos, condicionales o funciones anidadas

Answer 30

vez de eso, usa siempre Hooks en el nivel superior de tu función en React. Siguiendo esta regla, te aseguras de que los hooks se llamen en el mismo orden cada vez que un componente se renderiza. Esto es lo que permite a React preservar correctamente el estado de los hooks entre multiples llamados a useState y useEffect.

Question 31

No llames Hooks desde funciones JavaScript regulares. En vez de eso, puedes:

Answer 31

• Llama Hooks desde componentes funcionales de React.
• Llama Hooks desde Hooks personalizados

Siguiendo esta regla, te aseguras de que toda la lógica del estado de un componente sea claramente visible desde tu código fuente.

Question 32

Un Hook personalizado es una función de JavaScript cuyo nombre comienza con ”___” y que puede llamar a otros Hooks. Por ejemplo, a continuación useFriendStatus es nuestro primer Hook personalizado:

Answer 32

use

Question 33

Crea un hook personalizado que diga si un amigo está online o off

Answer 33

Question 34

___ provides a way to pass data through the component tree without having to pass props down manually at every level.

Answer 34

Context

Question 35

In a typical React application, data is passed top-down (parent to child) via props, but this can be cumbersome for certain types of props (e.g. two examples) that are required by many components within an application.

Answer 35

locale preference, UI theme

Question 36

Change this to context

Answer 36

Question 37

3 steps to use context

Answer 37

• Create context

const ThemeContext = React.createContext('light');

• wrap with provider

<themecontext.provider></themecontext.provider>

<toolbar></toolbar>

• access the context

static contextType = ThemeContext;

render() {

return <button></button>;

}

Question 38

Ayuda a saber cuantas veces algo se renderea y sirve para medir performance

Answer 38

Profiler

Question 39

Explain useContext

Answer 39

Accepts a context object (the value returned from React.createContext) and returns the current context value for that context.

Question 40

An alternative to useState. Accepts a reducer of type (state, action) => newState, and returns the current state paired with a dispatch method. (If you’re familiar with Redux, you already know how this works.)

Answer 40

useReducer

Question 41

___ is usually preferable to useState when you have complex state logic that involves multiple sub-values or when the next state depends on the previous one.

Answer 41

useReducer

Question 42

Pasos para useReducer

Answer 42