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

Sphinx369

Buenas, me presento primero. Hice doble grado ade + informática, al final por cosas de la vida hice solo ADE. Tras el fiasco de la universidad y que me gustaba la programación hice un superior FP de DAM. Este año empiezo el segundo curso pero es a distancia, por lo que me gustaría empezar con algo de exp. Tengo algunos proyectos hechos en react, nodejs y mongo. Le metí el currículum a una cárnica que pedía 0 experiencia y ha pasado de mi cara😂 no se cómo funciona el tema, por si me podéis echar una mano.

1
isvidal

Un truquillo barato de Martes para poder meter animaciones chulas en listas (Sobre todo estaticas, si no lo son huid porque es posible que al re-renderizar dara por culo), que siempre quedan bien en la tipica prueba tecnica de CRUDS que te mandan las empresas.

(Perdonad el gif cancerigeno a 10 fps)

El truco esta en jugar con el animation-delay y la posicion del elemento en el DOM.

Primero, conseguir la posicion del elemento, dos formas

Como prop

Pasandoselo cuando montes la lista:

list.map((props, index) => <ListItem key={props.id} position={index} {...props} />)

y acceder al position como prop dentro del ListItem. Esta forma es mejor a nivel de optimizacion porque requiere de un re-render menos, pero deja en manos del programador el tener que declarar y pasar el prop.

Internamente accediendo al DOM real

Dentro del componente, vamos a pillar la referencia al Elemento del dom:

const ref = useRef<HTMLDivElement>();

Luego dentro de un useLayoutEffect vamos a conseguir su posicion en el listado:

const position = [...Array.from(ref.current.parentNode.children)].indexOf(ref.current);

Segundo, los estilos

Omito como guardar/pasar la posicion, si es utilizando un prop se puede usar directamente, si es utilizando el useLayoutEffect se puede guardar en un useState una vez la tienes.

Con la posicion ya podemos hacer la magia en el style, aqui podemos jugar con los segundos y los multiplos hasta que lo veamos natural:

<div className="item" style={ { animationDelay: ${(position - 1) * 0.1}s } } />

Con esto ya tendriamos un delay de la animacion mas grande segun posicion.

Y luego es aplicar lo que nos plazca en el item a nivel de efectos y transforms (X o Y o Rotate blablabla), el fichero CSS del gif de arriba:

18
isvidal

Los de Redux han sacado una api para el fetcheo de data, substituto de react-query o SWR. Cuanto menos interesante, y bastante nuevo, o al menos yo no lo conocia:

RTK-QUERY

1 1 respuesta
Lolth

hay algo mas feo que un componente de 500 lineas con recompose?

1 respuesta
isvidal

#604 En mi opinion taliban, si el componente pasa de las 150-200 lineas de codigo, algo estas haciendo mal y deberias partirlo en componentes mas peque;os.

1 respuesta
Lolth

#605 si si pienso lo mismo, en eso estoy pero no se si has tocado nunca recompose pero da todo el asco, ver algo asi.

1 respuesta
isvidal

#606 Mis condolencias por tener que trabajar en una codebase sin hooks.

1 respuesta
Lolth

#607 La parte buena es que por allí donde paso quito todo lo de recompose y planto hooks pero migrar esos componentes quita bastante tiempo. Pero despues de haber trabajado con Angular, Vue y React me quedo con este la verdad, y eso que era muy nazi de Angular.

JohnVoiden

#603 Que hagas una api hook y a la vez hagas un reducer, pathname, y seguramente internamente un monton de actions desconocidas. No me gusta esa magia.

RQuaza

que opináis de los cursos de Codely? me han preguntado por ellos, pero no los conozco muy bien. Si alguno ha pillado algún curso suyo...

1 respuesta
thelegend

Tengo una duda con react-native + react-native-maps +expo client

y es que cada vez que lo pongo un mapa me salta este error:

warn No apps connected. Sending "reload" to all React Native apps failed. Make sure your app is running in the simulator or on a phone connected via USB.

y no funciona nada :/, me tiene loco.

1 respuesta
vivora

#610 Pregúntale a @desu

1
isvidal

#611 Ahi tiene pinta de que te esta petando la aplicacion entera y expo deja de poder comunicarse con la app.

Borra el componente de map de la screen y prueba otra vez, luego mete el mapa sin nada, y alli escalando hasta que llegues al problema

1
RQuaza

@desu te invoco, que opinas de codely?

Naith

Quiero hacer una web para unas cosas simples. No hace falta que sea muy vistoso y tampoco tengo intención de profundizar mucho en ningún framework. ¿Recomendaríais React?

1 respuesta
B

.

1 respuesta
Naith

#616 wordpress u otro cms no me termina de convencer. Lo que voy a hacer es tirar de varias API para recopilar datos y luego mostrarlos en la web como quiera.

Además, aunque no pretendo dedicarme al sector de web dev aprender algo de js siempre viene bien y estoy bastante verde. Entonces lo que estoy buscando es un framework en JS y usarlo para practicar. Se que están Vue y Angular pero ni idea de que se recomienda a día de hoy.

3 respuestas
B

.

1
RQuaza

#617 Yo te recomiendo React, es el más popular, tienes bastante contenido y una comunidad bastante grande. Hablar de React es ya como hablar de JavaScript prácticamente, además Facebook esta detrás de él y se nota.

Angular como te dicen es mas pesado, pero está Google detrás de él. Contenido tienes de los tres en todo internet, y los tres son perfectamente válidos.

2
thelegend

#617 si vas a tirar de react y va a ser una web pública, te recomiendo gatsby como framework o next si quieres tener el back y el front en el mismo framework

13 días después
Axtrix

Buenos dias a todos menos a mi compañero de curro que prefiere tener 7 useState() antes que un useReducer()

pd: del uso de los any de TS ya mejor ni hablar...

3 3 respuestas
isvidal

#621 yo te iba a decir lo del any jasjajaja es un RED FLAG del copon bendito

Cuantas lineas tiene ese magnifico componente?

Me hace bastante gracia porque define con <any> pero luego define los booleanos, cuando TS ya sabe que es un boleano si le metes true/false, no hace falta que se lo especifiques.

1 respuesta
JohnVoiden

Objetos vacios o nulos? Yo soy mas partidario de usar nulos.

#621 y que tal si le deniegas las PR?

1 respuesta
Axtrix

#622 este maravilloso engendro de componente que estoy intentando adecentar tiene 370 lineas de codigo (por ahora), 100 de JSX y el resto son useEffects infernales, algunos callbacks y alguna llamada a nuestra api hecha a pelo Axios.get... vamos, un buen follon para un lunes por la mañana.

El tema de tipar los boolean es porque el equipo decidio que ibamos a tiparlo todo explicitamente.

#623 yo tambien soy partidario de usar undefined en vez de objetos vacios, pero bueno, es codigo que ya esta en produccion, asi que eso de denegar el PR esta complicado.

pd: obviamente esto no tiene ningun test lo cual hace el refactor todavia más divertido

2 respuestas
JohnVoiden

#624 gl

1
isvidal

Yo siempre nulos en hooks y en general, con algunas excepciones.

El short circuit es barato object?.prop?.nested

Definirlo como objeto vacio puede joder/complicar el null check, ejemplo tonto:

const isLoading = !object
// Si es nulo es que no lo tenemos, es que esta cargando

Si declaras el objeto como objeto vacio, entonces los !object son true.

Entonces la linea de antes se convierte en algo mas peligroso como:
const isLoading = !object.id

1 respuesta
JohnVoiden

#626 Lo hago por los mismos motivos que tu.

edit:

pipeline operator:
https://github.com/tc39/proposal-pipeline-operator

1 1 respuesta
isvidal

#627 Me explota un poco el cerebro la verdad, supongo que sera acostumbrar el cerebro, pero vamos, es como elegir entre el fuego y las brasas para mi ojo desentrenado

1 respuesta
JohnVoiden

#628 Pues yo todo lo contrario tio, lo encuentro ultra mega facil de leer. Es pensamiento hardcore de programación funcional al final.
Lo que no me gusta con JavaScript es que debes de hacer algo así

function pipedString( str ){
    var value = str.toString();

return {
    removeDashes: function() {
        value = value.replace(/-/g, '');
        return this;
    },
    removeParens: function() {
        value = value.replace(/\(|\)/g, '');
        return this;
    },
    removeSpaces: function() {
        value = value.replace(/\s/g, '');
        return this;
    },
    toString: function (){
        return value;
    },
    valueOf: function (){
        return value;
    }
};
}

var clean = pipedString('This \\(--Is--)\/ Dirty')
    .removeDashes()
    .removeParens()
    .removeSpaces();

En cambio con el nuevo operador no hará falta tener que hacer un objeto con las iteracioens de la pipe.
Hay otra manera de hacer de pasar una array con callbacks y ejectuarlas en secuencia.

JuAn4k4

¿No podían poner this en vez de ^ para los pipes? O lambdas normales.

links 
|> x => doA(x) 

|> x => doB(x)