Part-5 | Loop with map() , Set state, onClick | Build A Image Gallery With ReactJS From Scratch

This is my ReactJS tutorial series for absolute beginner so If anything went wrong please let me know in the comments section. Here I made a Image Gallery with ReactJS in my previous videos I made some tutorial on web design, gimp and inkscape if you want to learn more you can check out my youtube channel.

⌚Timestamp 0:00 Set props for individual image 0:15 Loop all Images 0:42 Using map function 1:03 Using callback function 2:00 Inline css styling 2:22 unique key in map function 2:43 Using Img Component 3:30 JavaScript code in JSX 3:55 Set image state for style 5:14 OnClick action method 7:14 Change properties by setState method 9:20 Showing Large image 9:55 Set attributes of component by using props 11:48 Loop Object values 13:19 Slice String and concatenation 16:38 Set State or change the state

🔷🔷 React.js shoping cart - https://www.youtube.com/watch?v=YuBjOrxHcbo&list=PLDbgPtNOy-yCDw99-5JcyR00uykMpUuzQ 🔷🔷 Playlist - https://www.youtube.com/watch?v=KeOE9ZkuRdk&list=PLDbgPtNOy-yA7FtvN2sHQZzIEn-hF2O7n 🔷🔷 React.js tab with cdn - https://www.youtube.com/watch?v=Vg1gPVEZgAc&list=PLDbgPtNOy-yCDw99-5JcyR00uykMpUuzQ&index=2 🔷🔷 React.js on codepen - https://www.youtube.com/watch?v=54w93V04X4g&list=PLDbgPtNOy-yCDw99-5JcyR00uykMpUuzQ&index=4 👩🏾‍💻👨🏾‍💻 Get source code: https://theamazinglesson.blogspot.com/2020/03/react-js-image-gallery.html

#reactjs #frontend #reactwebsite

⭕ Learn Fullstack development ⭕ ✔Front-end development Web ui ux design - https://www.youtube.com/watch?v=vA_Qpf4M0rY&list=PLDbgPtNOy-yBNEwvjMAYeU1aqFjrxUPmm Html css basic for beginner - https://www.youtube.com/watch?v=m5o5Xdxcbts&list=PLDbgPtNOy-yAaKcrlojz06JvAzBlujTE6 CSS Framework project - https://www.youtube.com/watch?v=MPN1IbGKHYI&list=PLDbgPtNOy-yCiZ3XOpXIgxaR4CPKQNbdn Sass for beginner - https://www.youtube.com/watch?v=k6zxrWD7-iE&list=PLDbgPtNOy-yDsPJhu1UrlxjjPzFkwojXL React.js beginner to pro - https://www.youtube.com/watch?v=YuBjOrxHcbo&list=PLDbgPtNOy-yCDw99-5JcyR00uykMpUuzQ ✔Back-end development Php crud operation - https://www.youtube.com/watch?v=RJC5JoiY9P8&list=PLDbgPtNOy-yAyOBky7o8teLBF8lbOff-Y PHP PDO - https://www.youtube.com/watch?v=Rqe9lD2qTMU&list=PLDbgPtNOy-yCfzARhO8c3iFFKA96Iq2O1 Node.js crud operation - https://www.youtube.com/watch?v=5DJ-bPpx0kU&list=PLDbgPtNOy-yDcJPbMZYm6mzWlbcEx12Qn Node.js authentication - https://www.youtube.com/watch?v=cQkDcoGGa9E&list=PLDbgPtNOy-yAW1Qyc9qxD1llyqU-DTIvo

⭕ Learn more ⭕ Linux for beginner 🏹 https://www.youtube.com/watch?v=bNCFOKBw7uI&list=PLDbgPtNOy-yDpwoY2JnRZRgKFQvPo4Ap9 Gimp Photoshop Photo Manipulation - https://www.youtube.com/watch?v=yjJqtrtoqks&list=PLDbgPtNOy-yBnaIFgp8WLOJsiOyeQkIUg Libre Office Calc - https://www.youtube.com/watch?v=olRhd-ZN_d ... https://www.youtube.com/watch?v=r55HUx3OWB0