React Component Hierarchy| Frontend Development with Meta

? Complete Playlist of Frontend Development with Meta https://www.youtube.com/playlist?list=PLfQLfkzgFi7btV5yeUAP1JbsyaMq6Os6j

Planning an application as a series of components can be tricky at first, but after doing it a few times, it will become set in nature. We've already learned about the core Internet technologies and now you know that JavaScript libraries in React allow you to develop user interfaces much faster. Isn't it cool that you can develop user interfaces so quickly? In this video, you will learn how the component hierarchy works in React. Every React application contains at least one component, the root component or app component. Components are added to the app component to build out a tree structure of components that make up the application. Let's explore an example of how an application might be structured as components. Suppose your application is a shopping list of items that needs to be picked up from the grocery store. At the root we have the app component. The app component has two child components, new item bar and shopping list. The new item by component allows us to add new items to the list. The shopping list component contains a shopping item, child component for each item in the shopping list. Even though the item itself might be different, such as chicken or noodles, it is displayed in the same manner as other items. Therefore, you can reuse the shopping item component to display multiple items. When a user takes off the items, the list will update and remove the corresponding shopping item child component from the shopping list component. Now that you understand the component hierarchy, let's explore how a website can be broken down into components. As an example, I will talk you through a typical blog websites. Normally there is a heading, a menu, and a search bar. You also usually have a featured blog posts that displays larger than previous blog post below it. Now, let's unpack the component hierarchy. At the root of the component hierarchy, you have the app component. This is the entire webpage. The app component has to child components, the Navbar component for the navigation bar and the Page component. The Navbar component contains the title of the blog, navigation links for the website, along with the search component. In the page component, we have three components. The main feature component and two instances of a small feature component. The main feature component displays a blog summary about a specific blog post. In the small feature component, there is a blog summary and a thumbnail component to display an image associated with the blog post. Notice that the small feature component is used twice. It is the same piece of code, but for the second small feature, the code uses different properties. That is exactly the benefit of building a website with React components, you can reuse code for multiple sections. Using a series of components to build an application can be tricky at first, but after you do it a few times, you will appreciate how handy it is. Good luck with planning your component hierarchies in React.

Subscribe to our channel for more computer science related tutorials| https://www.youtube.com/@learnwithgeeks