Con este ejemplo quizas puedes crear un SkeletonInner para customizar algo parecido al BadgesList.
Espero que te sirva.
Vean esta forma de agregar animaciones se llama react-lottie fue creada por el equipo de diseño de Airbnb.
Realizé un pequeño tutorial espero les sirva react-lottie
gracias
que buen aporte, gracias.
Quedo bien chula :) Me encanta este curso!!!
Si no encuentras el archivo que dice Richard, en el github de platzi Badges en la rama especifica de esta clase esta:
Excelente curso Richard, muchas gracias, ¿podrías por favor poner en algún lugar las extensiones de vscode que usas ademas de Prettier?
Hola Fabian, si tienes curiosidad de probar extensiones para que te ayuden con el desarrollo que realices te dejo un articulo donde muestra algunas extensiones que te puede ayudar a la hora de hacer una aplicación en React.
https://fullstackengine.net/recommended-vscode-extensions-react/
Y la de los emojis -- POR FAVOR --
Si alguien lo está haciendo con el ejemplo del profesor. Este es el código del loader.css
En VS Code pueden instalarse los snipts de React y solo usan rcc y les crea una estructura de componente clase o con rcf una estructura de componente función agiliza muchísimo el desarrollo se los recomiendo.
Hay un montón de snipts si estas trabajando con GraphQL o con Redux por ejemplo.
devolver error aleatoriamente: (un 30% de las veces)
Están en scss. Para usar este pre-procesador solo hay que instalar el package para compilarlo. Podemos hacerlo corriendo el siguiente comando: npm install node-sass.
Posteriormente, hay que nombar el archivo con la extensión .scss. En este caso: Loader.scss
Y lo importaríamos en javascript con la misma extensión en el archivo del componente: import './styles/Loader.scss';
Para agregar Emojis en windows utilicen el comando win + . (windows + punto)
Aveces puede tardar en aparecer el menú flotante.
Esta es mi segunda vuelta por el curso, después de haber leído dos libros de VueJS, ahora ambos frameworks se me hacen similares en la forma de como trabajan.
yengo una duda con props y data ¿como se relacionan para intercambiar infoamcion?
¡Hola, Ever! Es una excelente pregunta.
Bueno, los props o propiedades son datos que le pasamos a nuestros componentes para poder utilizarlos en su lógica interna. Por otro lado, la data corresponde al state o estado de la función.
Una diferencia clave es que los props son inmutables, son los designados al momento de renderizar el componente, pero state es dinámico, podemos modificar el state lo que origina un cambio que puede desencadenar una actualización de los componentes.
Si detallas nuestro proyecto te darás cuenta que en los archivos contenedores (los componentes que estamos guardando en la carpeta Pages) estamos declarando el estado de nuestra aplicación en el inicio, mientras que en los componentes que guardamos en la carpeta Components nunca se les declara el estado, sino que suelen desplegarse recibiendo props.
Esto ocurre así para llevar un manejo fluido de la información, declaramos el estado en el componente común más alto, iniciándolo en el constructor. Y ya con estos datos del state (entre los que esta data) podemos ir manejando la lógica en sus componentes internos, pasándole la información a través de props.
Ocurre mucho que cuando vemos este flujo pensamos "¿Esto no es unidireccional?" y en cierto punto lo es, porque recordemos que los datos que se definen en los props son fijos, pero lo que agrega dinamismo a nuestra información es que si en alguno de estos componentes se modifica el estado, React volverá a renderizar para poder mostrar los componentes con los nuevos estados, lo cuál (oh la la) cambiará la información de nuestros props, haciéndolo todo dinámico.
Si te fijas con detalle este intercambio de datos es lo que ocurre por ejemplo con la imagen de Gravatar, que va cambiando conforme tipeamos el correo en la página de /Badges/new. Iniciamos nuestro estado inicial con el campo de correo vacío, conforme este va modificándose obtenemos un nuevo valor para obtener otro link de Gravatar, entonces el componente ve que cambió el estado y vuelve a renderizar la imagen con la nueva información.
Así hasta que se deje de modificar el estado.
PD: Es importante que en estas modificaciones del estado utilicemos:
this.setState({dato: dato });
Y no lo hagamos directamente, como por ejemplo así:
this.state.dato= dato;
La razón de esto es que si no utilizamos el setState() nuestro componente no detectará el cambio del estado y no volverá a renderizar.
Disculpa que me extendiera tanto, espero haberte ayudado :)
LuFernandoMG gracias bastante claro :D
Cual es la diferencia entre hacer y usar una función en vez de un component..?? Aún no tengo claro estos conceptos.
Hola, la diferencia tiene que ver más con el paradigma de Containers y Components. Un container lo creas con Component porque ahi vas a manejar la lógica de ese componente, como estados, peticiones, etc. Un component lo creas con una función el cual será solo un componente presentacional, es decir, sólo mostrar UI, por ejemplo un Botón, Image, etc.
++Component++
Ciclo de vida
Estado
++Function++
Sólo UI
Tengo error cuando cuando la peticion me trae un objeto "solo" no carga el proyecto, alguien que me pueda ayudar?
Hola! pudiste solucionar el problema que tenias? a mi me paso algo similar y he estado casi mediodía tratando de conseguir el error, y era que se me había olvidado en la carpeta api.js borrar el error que habías colocado intensionalmente como prueba, y descomentar return callApi('/badges'); para que cargara la información de la API
