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.
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:
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:
#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.
#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.
#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.
#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.
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...
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.
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?
#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.
#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.
#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
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...
#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.
#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
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
#626 Lo hago por los mismos motivos que tu.
edit:
pipeline operator:
https://github.com/tc39/proposal-pipeline-operator
#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
#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.
