Here is another fun beginner React challenge (image slider)
Vložit
- čas přidán 27. 07. 2024
- 📘 T3 Stack Tutorial: 1017897100294.gumroad.com/l/j...
🤖 SaaS I'm Building: www.icongeneratorai.com/
✂️ Background Cutter: www.backgroundcutter.com/
💬 Discord: / discord
🔔 Newsletter: newsletter.webdevcody.com/
📁 GitHub: github.com/webdevcody
📺 Twitch: / webdevcody
🤖 Website: webdevcody.com
🐦 Twitter: / webdevcody
Note for beginners: DRYing up your code comes from Don't Repeat Yourself.
Love these type of videos! Keep them coming 🔥
Oh, this taks is pretty similar to my default task for react interview. In my case candidate should implement stopwatch with controls.
Note: more elegant implementation is custom hook based on useeffect+cleanup.
I've been programming for +3 years, in several languages and frameworks and from all the exercises in this series, this is the only one I could (barely) solve on my own. So I guess this is the only one I'd say it's "beginner level"!
I think there is also a small bug in current implementation, when the slide is looping and the 'prev' or 'next' button are pressed, it messed up with the sildeIndex. I think we should clearIntervals when these two buttons are clicked as well.
another way to make adding the css less of a hassle is to have all the images as separate elements instead of swapping the src, then adding/removing a class to handle the animation stuff depending on the index. Makes the logic a bit easier to follow whenever I'd make something like this in plain javascript
That’s a good idea 🧠
Yooo , back at it
The mod thing is cute, but I personally prefer not having that kind of code golf in my repo. The ternary isn't *that* much more code but is way easier to understand at a glance. Just personal preference though, not saying it's right.
Also when you were talking about the pain of animation the slide, it randomly reminded me of how we used to do hover effects back in the day. People who didn't code back in 2000 or whatever might not know but you used to create a "sprite" for images with transitions (like icons that go from gray to full color on hover) and simply move the image around in the background of the container. IIRC this was the only way back then to have hover effects without blinking. Little history tidbit there lol
Css has come a long way, but it still kind of sucks 😂
We could also use the modulo operator to loop through slides in reverse with:
(SLIDES.length + curIndex - 1) % SLIDES.length
For beginners another tip for 14:27 would be to return if the interval.current exists then you avoid nesting.
if(interval.current) return;
...
Interesting that you start at the prev button, because ive learned that we always iterate first, meaning next would have been the easiest to implement. ( intuitively)
The reason why i mention this because when youbstart with JS classes, theres no such this as this.var.previous
Or like how we learn in kindergarten to add first then subtract
I love the % approach, i never really thought about it,
The challenge was pretty easy, i was worried at one point you would have created an infinite loop there, but you immediately made a function for that.
Code was really dry appreciate you doing these little challenges
Niccce!!!!! You’re doing great babe! 😘
Thanks for react videos
I would disable the Prev button when showing image at index 0.
I kinda wanted to try this on my own before watching the video. Would be cool if we could a link to a codepen or something in the future with the respective challenge so we can try it ourselves.
Hey keep doing this challenges Atleast one a week
I think this is a nice thought process.
BTW if you don't technically care about how the sliding would work. You can maybe use jquery slide
I forgot the method but it have to do with slide
Then you just pass the element you want to slide. Or the className
one word, swiper :)
please create a video on that transition part as well. i mean css transition. it woulb be great
u can use framer motion sliding stuff it gets real easy
making a slide animation is such a pain, I did it once with headlessui Transitions, rendering prevElement, current and nextElement. it was so inconsistent, that we decided to just fade in n out :D
Yeah I’ve tried it and it wasn’t easy. Definitely isn’t a beginner friendly challenge
After calling clearInterval you're not actually clearing the ref.
You should probably set
interval.current = null;
Yeah that might be useful
oooo, using a ref for other stuff besides elements do not occur to me (I don't read all the docs hahaha). Awesome!
Much better than using useEffect!
Hey can you make a vedio on firebase serverside pagination using next 13 server actions ?
I want more
Is AI going to replace us what do you think. Can you make a video about it?
No not in a while
where can i get the starter code ?
just setup a vite app and choose ts react
@@WebDevCody i was looking for something from where you had started images buttons are already there
Why do cut so much of your screen?
I’m on a mac book air, and it doesn’t do 1080p
I would have personally created a function for `changeSlide` like so:
function changeSlide(amount: -1 | 1) {
setSlideIndex(slideIdx => (slideIdx + amount) % SLIDES.length)
}
This is a clean solution!
In the slide index setter, you'd want to add SLIDES.length to the first operand in parenthesis. This is so that in the case where slideIdx is 0 and the amount arg is -1, you're not trying to return the remainder of -1 % SLIDES.length
eg.
setSlideIndex(slideIdx => (SLIDES.length + slideIdx + amount) % SLIDES.length)
Nice improvement!
I am anything but a JavaScript developer, so I did not know that modulo is not well-defined for negative numbers in JavaScript, unlike other languages (e.g., Python).
@@brandonsayring
What is the point od dedicating my time and energy for something AI can do easily and better than me
Ai gets the code wrong a lot, I use gpt a lot, and often it fails me