[React] Hilo General - Una librería para atraerlos y atarlos a todos

isvidal

React

Una librería de JavaScript para construir interfaces de usuario con el objetivo de facilitar el desarrollo de aplicaciones en una sola página. Es mantenido por Facebook y la comunidad de software libre.

Conceptos

Unas pinceladas, de forma simple, a conceptos básicos:

  • CSR => Client Side Rendering, renderizado en el lado del cliente, significa que el código sera cargado y procesado en la parte cliente, React por defecto se ejecuta en el cliente.
  • SSR => Server Side Rendering, renderizado en el lado del servidor, el código es procesado y calculado en el servidor y el resultado es devuelto al cliente, React puese ejecutarse como SSR utilizando apis nativas.
  • Componentes, las piezas con las que se construye, pueden ser funciones o clases que extiendan de React.Component.
  • Lifecycle, ciclo de vida de un componente, los pasos por los que pasa desde que se instancia, renderiza hasta que se destruye.
  • Estado, son las partes (propiedades) que pueden cambiar de un componente, cuando estas cambian, el componente se re-renderiza.
  • Hooks, anclajes que permiten tener estados persistentes en una función como si de una propiedad de una clase se tratara.
  • Props, de propiedades, son los valores pasados y recibidos de forma uní-direccional (De padre a hijo) por los componentes.
  • JSX, una mezcla entre HTML y XML, permite mezclar JS.

Vale la pena aprender React?

Si nos basamos en el % de preguntas de StackOverflow es la librería con mayor proyección de todo el panorama frontend.

Si nos vamos a lo personal, yo veo ofertas diarias donde empresas buscan desarrolladores junior/senior, ya sea para mantener y evolucionar aplicaciones existentes, o para migrar viejas a React.

Y si miramos lo puramente personal, React ofrece una forma muy directa y satisfactoria de construir aplicaciones, es decir, es divertido de programar, y los hooks ofrecen interesantes desafíos mentales y un modelo distinto de programación al que solemos estar acostumbrado.

Ecosistema

Al ser solo una librería deja muchas de las cosas necesarias para una aplicación compleja en manos de terceros:

  • PropTypes : Permite especificar los tipos de props de entrada esperados así como sus valores por defecto de un componente, y si lo recibido no es lo especificado lanza un error en consola.
  • React Router : Enrutamiento declarativo para CSR, para imitar el funcionamiento en el navegador de una aplicación SSR.
  • Redux : Contenedor de estados, permite acceder/mutar un estado desde distintos componentes a distintos niveles de profundidad sin tener que estar pasando props entre componentes.
  • create-react-app : Permite tener aplicaciones de React listas para el desarrollo y el despliegue en producción con solo un comando en el terminal.
  • react-hook-form: Crea formularios de forma fácil y sencilla con hooks.

Frameworks

  • Next.js : Incluye todo lo necesario para construir aplicaciones complejas con enrutamieno, SSR y mucho mas.
  • Gatsby : Siempre has soñado con un Wordpress hecho en React? Con Gatsby es posible.

Prepárate para ser un profesional

TDD, el testing

Las dos librerías mas utilizadas, normalmente mezcladas, para el testing funcional de componentes de React son:

  • Enzymes : Especializada en React facilita el testing de componentes y ofrece funcionalidades muy útiles como el renderizado shallow amen de una api para manipulación muy intuitiva.
  • Jest : LA librería de testing para aplicaciones programadas con JavaScript.
  • React Testing Library : Solución ligera de testeo que intenta imitar al máximo los tests al funcionamiento real del componente.

Utils

  • useHooks : Una colección de pequeños pero útiles hooks que se pueden usar en el día a día.
  • React SVGR : Convierte tus SVGS en componentes de React o React Native

UI Libraries

  • Fluent UI : Coleccion de componentes made in Microsoft. Muy completa.

Para móviles, React Native

Facebook creo posteriormente React Native, un framework construido sobre React y orientado al desarrollo de aplicaciones móviles.

Posts destacados del hilo

#257 SEO y Gestión de Data Global

14
isvidal

#reservado

Josepanaero

En el apartado de testing, yo añadiría también React Testing Library.

Por cierto, una pregunta: ¿qué alternativas a Redux recomiendas para la gestión del estado para proyectos de pequeño y mediano tamaño? ¿Hay alguna alternativa viable que sea más ligera/sencilla?

1 respuesta
isvidal

#3 La nativa de React:

Context

Para mi, a no ser que requieras de mucha complejidad el contenedor de estados es la solución preferible siempre antes que Redux.

Y por complejidad me refiero a cosas como adelante/atrás, intermediarios, peticiones asíncronas por medio o directamente volumen gigantesco de datos, ahí es donde brilla Redux por todo el ecosistema que tiene montado alrededor a nivel de librerías.

Pero si lo que quieres es almacenar un estado y consultar/mutar desde cualquier hijo de la forma menos verbose posible, React.createContext() es lo único que necesitas.

1 respuesta
Josepanaero

#4 gracias, eso es básicamente lo que he hecho hasta ahora, pero no tengo mucha experiencia con React. Había oído hablar de MobX, pero nunca lo he usado.

isvidal

#4 MobX no lo he usado yo nunca tampoco, y creo que precede a React.createContext().

Un switch cute que he hecho para mi nueva pagina web:

1 1 respuesta
isnotavail

Que tal para aprender de 0? queria montarme una Static Web, y habia estado buscando info sobre Jekyll,Hugo y Gatsby que son las que mas he visto recomendadas, que tal Next.Js ?

1 respuesta
Zoko

#6

Cercle? D:

1 respuesta
isvidal

#7 Si es una pagina estática para CSR sin mucha historia con React a pelo ya vas sobrado.

#8

1
isvidal

Estoy entretenido estos días rehaciendo por tercera vez en 2 a;os mi pagina web a ver que os parece lo poco que tengo:

https://jvidalv.github.io/react-josepvidal/

Con móvil no la he mirado aun.

No tengo muy claro que poner en el lado izquierdo, he puesto un lorem ipsum, pero quiero alejarme de los parrafotes explicando mi vida.

1 respuesta
Earh

#10 Está bastante chula, aunque personalmente más que ponerle el efecto bounce ese como hover a los iconos de redes sociales les pondría un color o degradado de fondo con los colores de la red en cuestión.

Yo justo estoy empezando con React, así que el hilo me viene de lujo.

Axtrix

¿Hay algun articulo interesante sobre "separation of concerns" en React? Me parece que con los useEffects mi logica se queda muy atada a React

4 respuestas
r2d2rigo

#12 le estas pidiendo demasiado a un framework que junta modelo, vista y logica en un mismo JSX...

1 respuesta
Zoko

#12

En mi modelo mental Redux ayuda bastante a esto, dejando la vista lo más tonta posible sólo dispatcheando acciones.
Pero claro, te estás acoplando a usar Redux, aunque yo soy feliz.

isvidal

#13 Ni es un framework, ni junta en el mismo JSX en todo caso en la misma función que acaba devolviendo un JSX.

#12 Dale una vuelta seguramente te puedas llevar la lógica a un hook rehusable

Ranthas

Me viene bastante bien ya que estoy pasando de Angular a React, aunque todavía hay varios conceptos que no me terminan de gustar, por ejemplo, el tener los estilos dentro del propio componente; me gusta más el enfoque de Angular; estoy probando CSS Modules a ver si me convence.

También me parece un poco fastidioso el tener que ir propagando los props entre componentes para poder manejar los estados; en aplicaciones sencillas no tiene ciencia, pero a la que empiezas a tener varios componentes anidados es una locura. Supongo que podré usar Redux para solucionar esto.

Seguiré el hilo de cerca

3 respuestas
isvidal

#16 React.createContext()

Y para CSS prueba styled-components.

1
pekter

Pillo context. Con cuidado para evitar leaks y pérdida de rendimiento :)

aren-pulid0

Pillo sitio!

RQuaza

Pillo sitio. Llevo aprendiendo 3 meses ya y muchisimas horas dedicadas. Lo controlo bien para hacer un front decente con un backend tambien decente, pero obviamente no soy nada mas que un junior. Me voy a hacer un portfolio con una replica de instagram y twitter. Estoy con el stack mern, como veis de trabajo para un junior como yo?

1 respuesta
aren-pulid0

#20 https://trends.google.com/trends/explore?geo=ES&q=React,Angular,Vue
https://trends.google.com/trends/explore?date=today%205-y&geo=ES&q=React,Angular,Vue

JohnVoiden
#16Ranthas:

También me parece un poco fastidioso el tener que ir propagando los props entre componentes para poder manejar los estados; en aplicaciones sencillas no tiene ciencia, pero a la que empiezas a tener varios componentes anidados es una locura. Supongo que podré usar Redux para solucionar esto.

Normalmente lo que hace la gente, si tienes que pasar varios props a más de un nivel es crear un contexto como te ha dicho vidal.

La gente hace sobreingenneria usando Redux hasta para limpiarse el culo, Redux solo lo necesita aplicaciones que necesitan los mismos datos en múltiples sitios y quieres almacenar muchísimos datos.
En un dashboard es viable tener un Redux, pero actualmente tienes alternativas para usarlo.

#12 Como te dicen, y haces tus propios hooks y a la vez sacas las funciones de logica fuera de ese hook? Al final si haces bien una programacion funcional no deberias tener tochos de funciones dentro de cosas de React.
En mi equipo penalizamos bastante tener funciones grandes en componentes porque te atas a React.

Para añadir algo más de info, yo actualmente trabajo en NextJS, si alguien necesita ayuda o información preguntarme sobre eso.

1 respuesta
Zoko

#22

Entiendo que porque la gente se empeñara en meter Redux hasta en la sopa ha pillado fama para ciertas personas de que no hace falta nunca a menos que sea un caso mega excepcional. Yo creo que es un término medio. :/

2 respuestas
JohnVoiden

#23 Es más bien pensar si la aplicación lo necesita.
A mi me gusta, lo utilizo para todas los proyectos en mi empresa, pero porque creemos que las aplicaciones lo necesitan.
Pero estoy haciendo una aplicación tocha en NextJS que no necesita Redux y no le pondré nunca Redux por mucho que me guste xD

JuAn4k4

#23 Recuerdo perfectamente como el UI Lead de pacotilla que tenemos se empeño en meter redux para absolutamente todo, hasta el estado de formularios y componentes pequeños sin dependencias. Fui de los pocos que le planto cara diciendo que era una locura y al final me vino el CTO a preguntar.... un CTO que sólo sabía algo básico de sql y sin carrera ni fp.

Resultó ser un desastre, 3 meses se pegaron para hacer algo que en dos semanas debería haber estado, a mi me movieron de ese equipo y me hicieron volver la última semana para acabarlo y limpiarles lo que pude...

Lo mejor es que se supone que seguian la filosofía de extreme ownership (no bad teams, only bad leaders). La culpa se la llevó el equipo. Ese tio sabe hacer pasillo y amigos pero bien.

Ahora es amiguis del CTO nuevo, hasta se van de vacaciones juntos, parecen novios.

(He hablado de esta persona con anterioridad ppr aquí también, si, es el mismo.)

2 respuestas
JohnVoiden

#25 Por qué un UI Lead decide sobre el desarrollo?
No tendría que ser un JS Lead o Senior que hiciera eso?

1 1 respuesta
Ranthas

Yo ya me pierdo con los títulos chachiguays de esta puta profesión.

UI Lead me suena a un tío que decide de que color son los botones y poco más.

3 1 respuesta
HeXaN

#26 Porque ser "amigo de" es mejor que cualquier título en inglés.

2 1 respuesta
JohnVoiden

#27 Tecnicamente es la persona quien decide sobre el diseño de la aplicación y su usabilidad. Como tal yo he interacuado con dos personas de UIX Leads y solo deciden sobre producto, son asquerosamente tiquismiquis pero nunca deberían meterse en desarrollo, porque no tienen esas directrices.
#28 Me cago en el pecho de todos que son así.

Zoko

#25

Pero que la gente use mal una herramienta no debería hacer que la herramienta obtenga mala fama, que es lo que yo siento que se ve ultimamente sobre Redux :/

2 respuestas

Usuarios habituales

  • isvidal
  • Axtrix
  • Zoko
  • aren-pulid0
  • VonRundstedt
  • JohnVoiden
  • MisKo