Mi Introducción a React
Estas son algunas cosas que he aprendido sobre React y que me hubiera servido mucho entender hace un par de años.
Intento ponerlas de la forma más simple posible. De a poco iré actualizando este mismo artículo.
En General
React es una librería de JS para crear interfaces de usuarios.
Usa componentes, que son su bloque constructor, sus legos.
Los componentes son cúmulos o fragmentos de interfaces de usuario, como un formulario o un botón.
Utiliza el virtual DOM, renderiza solamente lo que cambia y no recarga toda la vista.
Establecemos la estructura y pasamos la data, con eso damos vida a los componentes.
La librería es bastante liviana. Al mismo tiempo, el ecosistema de React es enorme, hay muchas herramientas disponibles.
React es solo Javascript. Este artículo profundiza esa afirmación
Este es un proyecto que hice en React, siguiendo el curso de Brian Holt en FrontendMasters.
Muy resumidamente, estas son algunos de los insights y recomendaciones de ese curso del Brian.
Siempre los nombres de componentes comienzan con mayúscula
Los parámetros para el React.createElement son elemento, atributos, children
Hago componentes que hacen otros componentes que hacen otros componentes. Es como tener timbres de goma.
Todo lo que hace jsx, es traducir lo que hacemos a esta estructura de React.createElement(nombre, tags, children)
El principal beneficio de react -> es una libreria pequeña que permite mostrar vistas desde estado.
React tiene one way data flow.
Los componentes padres pueden afectar a sus hijos, pero los componentes hijos no afectan a sus padres.
Esta información se pasa en mediante las props.
Uno de los principales beneficios de react es que es muy explícito el flujo de la información.
JSX
JSX es mucho mas fácil de leer que imitar el html desde javascript
En vite no es necesario importar react, porque sabe que si el archivo es jsx estas usando react y te lo importa automático
JSX requiere que un tag sea auto cerrado.. self closing… si no, se peta
El partentesis después del return es para decirle a jsx que sigue en la siguiente linea… si no, piensa que termina en la misma linea del return.
Las render functions deben ser rápidas y stateless… que no cambien cosas cada vez que se hace un re-render.
Para tener el estado dentro de las funciones se utiliza el hook.. se le manda el estado a react y react lo manda de vuelta
Algunas reglas de hooks:
-
siempre llamarlos en el mismo orden. no ponerle condicionales a los hooks. porque react esta contando con ellos, puedes desordenar el estado.
-
siempre que lago comienza con use… es señal de que es un hook
Vue.js tb usa algo parecido a los hooks, los composables.
Effect
Un effect es algo que sucede fuera del componente, por ejemplo anda a buscar esta data afuera, a una api u otro componente.
Anda a buscar a local strorage, llamara a una api, o guardalo en local storage, etc
Al pintar información recibida, el key de cada elemento sirve para que react reconozca los elementos y no destruya todo si cambia el orden, sino que los pueda reordenar.
No usar el index como key, porque tb puede romper cosas al cambiar el orden de los elementos.
Un effect se ejecuta cada vez que la app se renderiza
Si no dejamos el use efeect con ese array vacío al final, va a ejecutarse con cada mínimo cambio… va a hacer muchísimas llamadas a api por ejemplo, con cada gesto que renderice.
Custom Hooks
Consejo del Brian: Si uso un Effect dos o tres veces, un custom hook es una buena idea
Hay gente que hace custom hooks para cada effect que usa… lo cual es bueno… solo que da un poco de flojera y no es estrictamente necesario
Si quieres hacer async await dentro de un effect, hay que hacer la async function dentro del effect… no se puede afuera.. así funciona
Setear el status es buen práctica para después hacer mejor los tests
Component Composition
Hay que tratar de que los componentes sean lo más pequeños y simples de leer posible.
Aproximadamente inferiores a 120 lineas pero son criterios personales.
Se usa bastante, pero no es una buena práctica… hacer un spread para pasar propiedades… es muy poco explícito. Quizas hoy quiero pasar todo, pero mañana puede que no y no voy a tener a primera vista que estoy pasando.
Si tienes un componente, al que no le importa la data que pasa por él, y el componente solamente pasa la info a otro componente, ahí esta ok usar el spread… si no nooo
React Router
React router tiene un foco especial en la accesibilidadd… y eso no es facil de lograr en routing
Al crear el browser router envolviendo la app…. crea un Contexto
El contexto esta pasando una especie de side store data
React Query
React Query es el estándar de como manejar los llamados a apis dentro de react
El Secreto -> lo mas dificil de react es useEffect… El Consejo -> minimizar el uso del effect lo que mas puedas…
Algunas perosonas llaman a BrowserRouter y a QueryClientProvider higher order components… pero solamente estan dando contexto a los componentes
No es necesario ponerle await al return en React Query porque ya retorna una promesa
— No se puede hacer await a una render function —
ReactQuery es más legible que useEffect… reactQuery hace muchas cosas, es una herramienta pulenta
El Brian dice que en su experiencia escribe algo 3 veces y a la 4ta lo abstrae. “La abstracción es un enemigo del buen código mantenible”
… continuará