In This video you will learn how to create a replica version of the side bar that is being used on the Amazon website, as of publishing this video. Unlike my previous tutorial which ended up with the same product, link to which can be found here: • How To Make The Amazon...
This tutorial uses React, instead of the vanilla front-end tools of HTML, CSS and JavaScript, which is what I used in the previous tutorial. This updated tutorial is a lot better, because for a complex front-end feature like this, not using a framework would result in a huge mass of disorganized code that looks messy and is hard to work with. Therefore, this tutorial sets to create the very same project as before, just with a more professional and streamlined workflow, then the one used before.
Likewise, the data on the sidebar of this project is not hard coded by us on the front end. Instead it comes from sending a GET request to an API that I have set up beforehand. This means that we do not have to waste precious tutorial time on the drudgery that is hard coding values into a document. Instead we can just fetch the data and then loop through it so that each entry can be displayed in the correct order on the sidebar.
📚 Materials/References:
- Completed projects GitHub repository: github.com/lukechopper/ReactA...
- API, JSON data endpoint: 200126984.cs2410-web01pvm.asto...
🧠 Concepts Covered:
- Animation in React.
- Global state management in React using the use context hook.
- Animating elements so that their position effects the positioning of other elements.
- Sending a GET request in React using the use effect hook.
- React functional components.
- Custom hooks.
💻 Technologies used:
- React.
- react-transition-group dependency for React.
- fetch API.
If you enjoyed this video then please consider liking 👍 and subscribing. You would be doing me a huge favour if you did this and it would be greatly appreciated ❤️ by me. Likewise, if you have any queries or comments that you want answered. Then please, don’t hesitate post them down into the comments box below. I would love to hear back from you and will answer all of your questions to the best of my ability.
Stay awesome guys. ❤️
#React#ReactJS#WebDev#Amazon#ComputerScience#CS#VSCode#JavaScript#FrontEnd#JSON#API
24 май 2021
