Creating React Components
Explore how to build reusable React components that form the core of an e-commerce frontend. Understand the difference between class and functional components, use React Hooks for state management, and organize your project with dedicated CSS files for easier teamwork. By the end, you will know how to create components such as Navbar, Hero, Categories, and Footer and combine them in your React app to structure your e-commerce interface.
What is a component?
Components allow us to separate the user interface into pieces that can be reused and handled independently. They perform the same function as JavaScript but work independently and return HTML. Components are classified into two types–class components and functional components.
React extensions are required for class components–ES6 classes that return JSX. Before the introduction of React Hooks, it was impossible to use state inside functional components (in earlier versions of React, such as 16.8); functional components were only used for rendering UI.
Thanks to React Hooks, we can now use states in functional components, and many developers use them because of their clearer syntax. We’ll also be using functional components in this course.
We’ll use four components in this project: the Navbar, Footer, Hero, and Categories components. We’ll make a dedicated folder in our src ...