React: CheatSheet personal para React

Iniciar un proyecto React

Al momento de escribir esto, Vite es el build tool de referencia para React.

1. Crear con npm create vite@latest nombre-del-proyecto. Esto mostrará un prompt para opciones donde podemos escoger React con JS o TS, y luego creará un directorio con ./nombre-del-proyecto.

2. Si estás en un monorepo cambia los nombres de los scripts en package.json para que no te vuelvas loco con el debugger de VSCode o la consola. Por ejemplo, el script dev puede llamarse devThisVeryApp y así en el listado de VSCode lo podrás diferencial, y te ayudará en el autocompletado de la consola.

3. El comando npm run devThisVeryApp debe añadírsele --host como argumento en el package.json, quedando vite --host para exponer el servidor a otras máquinas, ya que el desarrollo suelo hacerlo por VPN + SSH.

Ejemplo de scrips en un package.json

  "scripts": {
    "devPart5FrontEnd": "vite --host",
    "buildPart5FrontEnd": "vite build",
    "lintPart5FrontEnd": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "previewPart5FrontEnd": "vite preview"
  },

Pasar datos entre componentes

No olvides que los props de React no son más que pares de clave/valor, y que se pasan por referencia, igual que cualquier no-primitivo de JS.

No necesitas usar forwardRef ni useImperativeHandle

Aunque la parte 5 de Full Stack Open te indica que para mutar el estado interno de un componente hijo tienes que usar, además de useRef, forwardRef y useImperativeHandle, verás que convierte todo el código en algo demasiado bizarro, pero más importante no es necesario.

En mi repo de FSO tienes un ejemplo con App.jsx, Togglable.jsx y AddBlog.jsx.

¿Cómo?

1. Crea un useRef en el componente padre. Así te evitas re-renders.

2. Pásalo como prop al componente donde quieres definir el comportamiento. En este componente deberías tener una función que define este comportamiento. Simplemente asigna esta función tal que props.nombreDelRef.current = { fnQueDefineComportamiento };.

   Ahora que has hecho esto, esta función podrá ser accedida desde el componente padre.

3. Ahora, en el padre podrás acceder a esa función con nombreDelRef.current.fnQueDefineComportamiento(). Si lo puedes hacer desde el padre, puedes pasarla como prop a un componente hermano del primero.

¿Para qué?

En el repo enlazado el caso de uso es el siguiente: El componente que añade un blog a la lista debe ocultarse de la vista después de añadir un blog.

El problema es que el mostrado/ocultado se gestiona en un componente diferente, que envuelve al primero.

Lecturas

• React mental models: 1 2

• React in 100 seconds: YT

• React in 10 mins: YT