[React] Hilo General - Una librería para atraerlos y atarlos a todos | Página 2

isvidal #31 Jul '20

#30 No creo que la palabra mala fama, como si de jQuery habláramos, sea la palabra.

Yo creo que es mas que Redux al ser el primer contenedor de estados de React mucha gente que empieza, omite o desconoce (Quizás por seguir tutoriales des actualizados) que React ya shippea una solución nativa que es menos verbose y mas sencilla de implementar.

Ejemplo el post de #16 , que lo primero que piensa es en utilizar Redux para solucionar el problema de props drilling.

Que no es tan potente y no te permite llegar tan lejos, pero que para la gran mayoría de gente el hace trabajo tan bien como Redux.

1 respuesta

JuAn4k4 #32 Jul '20

#30 No, si yo soy my fan de redux, aunque me gusta mucho más en Angular (ngrx) la evolución que en react-redux.

1 respuesta

Yugarek #33 Jul '20

#32 que tal ngrx? suelo crear servicios abstraidos para toda la comunicación y me pregunto si debería implementarlo en algunos casos.

1 respuesta

Ranthas #34 Jul '20

#31isvidal:
Yo creo que es mas que Redux al ser el primer contenedor de estados de React mucha gente que empieza, omite o desconoce (Quizás por seguir tutoriales des actualizados) que React ya shippea una solución nativa que es menos verbose y mas sencilla de implementar.

En mi caso creo que es justamente eso, mezclado también un poco con que Redux parece que se ha convertido en una silver bullet, ya que lo poco que he preguntado por ahí sobre React/Redux, da como resultado justamente eso, Redux es la salvación a prácticamente cualquier problema relacionado con el state management y hay que usarlo sí o sí.

JuAn4k4 #35 Jul '20

#33 Es una autentica maravilla, con observables y tipado. Tus servicios pueden seguir absrayendo tus componentes de ngrx (tiran acciones) y selects con selectors (muy potentes con memoize y tal), puedes incluso hacer CQRS en la UI (es lo que hacía yo, un servicio para commands y otros para reads). La verdad es que la evolución que ha tenido al añadir observables y typescript ha sido para mejor sin duda. Lo use en AngularJS donde era muy similar a react-redux, con muchisimo boilerplate y tal, en ngrx el boilerplate es mucho menor y queda todo tipado sin tener que hacer nada. El store es un observable, por lo que puedes crear componentes "container" que usan los servicios "read" y wrappean componentes tontos que solo reciben props + pintan + lanzan acciones con servicios.
Lo hace todo muy sencillo la verdad.

1

isvidal #36 Jul '20

Pues voy a tirar mi remake de la pagina personal a la "basura":

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

Y la voy a empezar de 0 con NextJs para hacerla SSR, voy a intentar recrear al máximo el diseño de la de encima, lo primero que intentare sera implementar el switch de modo oscuro/claro, que con una CRA sencilla y styled-components es 5 minutos, y con NextJs de momento tengo dos articulazos con muchas lineas de código jajajaja:

https://joshwcomeau.com/gatsby/dark-mode/
https://brianlovin.com/overthought/adding-dark-mode-with-next-js

Nos vemos en dos semanas

Por curiosidad, los que trabajáis con Next, cosas como el header o footer, o el content mismo, lo creáis como componentes en alguna carpeta rollo components/layouts, como lo hacéis?

Yo hasta ahora tenia una carpeta components/ y otra layout/ donde tenia header, footer y main.

En otro orden de cosas este lunes empiezo en una nueva empresa, mi primerita vez como puro frontend dev y trabajando 100% con React, espero no hacer el ridículo que me pagan mucho jajajajaja

2 respuestas

JohnVoiden #37 Jul '20 Penitente

#36 y si la haces con Gastby? Tu contenido no será dinamico.

Yo los componentes Header y Footer los creo en carpetas/index (es mi manera de naming)
Pero el layout debido que es un componente excesivamente especial lo dejo fuera de la categoria de carpetas/index y lo llamo layout.tsx en componentes. Sin carpeta, porqué es cosa de Next. Si me preguntas por que, no se responderte, solo se que me gusta más así xD

Me gusta mucha diferenciar los componentes de Next y nativos.

Al final lo de las carpetas es lo de siempre, es a Contexto. Si tu crees que van dentro de layout, van dentro de layout.

Pero como Head pero yo intento dejarlo individualmente y crear subcarpetas si son conceptos excesivamente generales.

Harás el ridiculo vidal

pd. como haces los styleds o comos lo organizas? si solo hay un archivo lo llame index.styleds.tsx por si algun momento creo subcomponentes de context

Card
- index.tsx
- index.styled.tsx

1 respuesta

isvidal #38 Jul '20

#37 Si no se me van muy de madre los styled los suelo meter en el mismo fichero.

Y bueno, Next en lugar de Gatsby, pues por pura curiosidad y por si en un futuro quiero hacerla mas dinámica pues siempre lo tendré montado para poder hacerlo fácil.

1 1 respuesta

Zoko #39 Jul '20

#36

Mucha suerte con el nuevo curro!

1

JohnVoiden #40 Jul '20 Penitente

#38 El contenido de un portfolio no es dinamico, con Hugo o Gastby tiras millas en verdad. Osea te puede servir, pero creo que no es realmente el objectivo, más cuando Gastby te da mejores resultados en SEO.

Yo también lo hago lo de meterlos en el mismo archivo, pero cuando pasan de 3 es ver un archivo innecesariamente más largo.

isvidal #41 Ago '20

Me acabo de enamorar, no se si conocéis SWR, yo no lo conocía.

https://github.com/vercel/swr

Pero para los que no lo conozcáis probadlo ya, es absolutamente GODLY, no volvereis a tirar lineas de React y Fetchs sin esa mierda os lo aseguro.

2 respuestas

Zoko #42 Ago '20

#41

Que diferencia hay con hacer un hook async?

1 respuesta

isvidal #43 Ago '20

#42 Entre otras cosas te permite definir un contexto de donde beben todos los useSWR de tal forma que el código sea lo mas DRY posible, y ademas de poder utilizarlo con GraphQL.

Luego el tema de que uno tiene una empresa detrás y no es de un particular, cosa para mi bastante positiva.

JohnVoiden #44 Ago '20 Penitente

#41 Yo estoy haciendo un proyecto opensource(Aun no publico porque no es una versión estable) que ando utilizando SWR y es bastante increíble.

Si alguien quiere acceso al codigo que me lo diga que le ofrezco contributor para que lea mis mierdas de commits.

La web es esta:
http://keeb.deals/
No tiene https porque tengo que añadirle Encrypt al Droplet.
PD. Esta con un CI de github Actions + pm2, mola mucho. no escala pero mola bastante.

1 respuesta

Zoko #45 Ago '20

Esta mañana me he visto esto, vaya pepino se ha sacado FB de la manga. En el video ahonda en los problemas que ellos han encontrado tanto usando Redux como usando sólo contexto, que se va de las manos muy rápido.

1

isvidal #46 Ago '20

#44 Que grande, yo ahora me he metido en el mundillo este, ayer me llego el:

https://www.pcgamingrace.com/products/the-glorious-gmmk-tkl-pre-built-white

Y el siguiente paso sera cambiar los switches, para unos mas clicky y altos

1 respuesta

JohnVoiden #47 Ago '20 Penitente

#46 Mi main teclado me tiene que llegar es este. https://protozoa.studio/collections/frontpage/products/protozoa-02-kit
Pero acutalmente tengo un GMMK.

Hook para ayudarte al dashboard.

SWR facilita mucha la vida, pero cuesta algo de entender el tema de mutar, fetcher, mutar. Es algo raro.

Por cierto, la web tiene un sistema de Modal Route como Reddit. SI haceis click en un teclado y volveis a hacer f5 os lleva a otra pagina

1

aren-pulid0 #48 Ago '20

Holaa, tengo una duda a ver si alguno de los que estais por aquí podriaís ayudarme.

Para react native existe la librería de navigation que tiene algunos componentes ya hechos como el bottomtabs y demas.

A mi me gustaría implementar esto pero en forma de 3 botones flotantes. He buscado y no he encontrado nada por inet que ya este hecho.

En mi mente es tan sencillo como tener este componente en cada una de las pantallas, pero me extraña que no haya alguna manera aparte de hardcodearlo en el JSX de las pantallas, ademas para detectar en cual de ellas me encuentro para uno de los 3 botones tenerlo de otro color por ejemplo no sabría que hacer

Como una imagen vale mas que mil palabras... quiero hacer estos 3 botones, y en mi caso tengo un stack en cada uno de los botones.

2 respuestas

JohnVoiden #49 Ago '20 Penitente

#48 Una navegación con botones que estan en medio de la pantalla?

Siempre puedes hacer lo siguiente, un HOC que tenga toda la logica de la navegación que estará por encima o en absoluto de tu diseños de la app y tenga el children ahí metidito.

isvidal #50 Ago '20

#48 Es facil hacer esto, si te miras el repo de mi app movil creo que lo puedes sacar tu mismo, no tengo tiempo ahora para explicarlo:

https://github.com/jvidalv/astrale

En src/navigation tienes todos los stacks que tengo yo, seguro que alguno te sirve para llegar donde tu quieres.

isvidal #51 Ago '20

#36 Pues no he empezado mal, mi tercer día y el senior de mi equipo ya me ha felicitado:

spoiler

PD: Se que es el hilo de React pero tenia ganas de compartirlo...!!

15 3 respuestas

Zoko #52 Ago '20

Que grande joder, dejando el listón alto de los que no odiamos JS.

2

X-Crim #53 Ago '20 Moderador Mario Kart

#51 muy top ; )

1

JohnVoiden #54 Ago '20 Penitente

#51 Vaya boost de confianza que te ha dado. No sabes cuanto me alegro.

1

HeXaN #55 Ago '20

Menos mal que no le ha pedido implementar el bubble sort jajaja. Enhorabuena.

2

QuitCat #56 Ago '20 Gafe

#51 Que buena!

¿Se puede dar detalles de tu puesto?¿Empresa?¿100% remoto?

1

isvidal #57 Ago '20

A ver si alguno me hecha un cable, estoy montando mi pagina personal, y quería dejar de utilizar px y pasarme a rem, así es mucho mas fácil escalar la pagina arriba y abajo.

La cuestion es, como utilizo styled-components que transpila un string a css digo, co;o, si pongo yo una capa por medio que me coja todas las unidades con px y me las transforme a rem, pues mucho mejor, asi puedo escribir en px que es mas comodo.

La solucion cutre es una funcion rollo px2rem(px) pero me parece muy ugly llenar todos los estilos con font-size: ${px2rem(20)}. Entonces por eso dije, joder pongo una capita por medio que lo capture y me lo transforme sin yo tener que preocuparme, y encontre este package:

https://github.com/win-winFE/styled-px2rem/blob/master/index.js

Toda la logica esta en este fichero, tu en lugar de importar styled de styled-components lo importas de este package, y funciona de pm, el problema es que no comprendo como captura styled y como aplica sus funciones de allí por medio. Osea, entiendo lo que hace, pero no como consigue hacerlo.

No se si me explico, y si alguien mas senior pudiera iluminarme.

1 respuesta

JohnVoiden #58 Ago '20 Penitente

#57 Lo hace con un curry en la linea 76, de esta manera recoge todos sus funciones y sobreescribe lo que el necesita. (Además de mutar el styled)
Aun así vidal, si quieres que te de un consejo, es sobreingeneria y fueza bruta lo que esta haciendo, no es nada nada bueno hacer esa fuerza bruta.
Lo mejor es ponerte una norma en el lint para que te haga warning cuando uses px.

1 respuesta

Lord_Khronus #59 Ago '20 Abeto

Cómo pillaríais el primer curro en React? Me gustaría entrar pero no he visto ni un opening de react sin experiencia.

1 respuesta

JohnVoiden #60 Ago '20 Penitente

#59 Normalmente se hace algo así:
Hacer cursos + dummy apps, ponerte experiencia en el curriculum y hacer bien las pruebas de nivel que te pongan en las entrevistas.

1

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

Usuarios habituales

Tags