Many ideas in React are hard for beginners to wrap their heads around. For me, I had trouble understanding how React components work, but more specifically, how they work together. This analogy is designed to help you understand the following:
1 - What are React components
2 - How do React components work together to build an app.
First, let me explain what React components are. React components are independent functions that accept inputs(i.e. props) and returns a React element that can be reused throughout your application. React applications use multiple components to ultimately give the app the look and functionality desired. There are parent components and children components, ultimately making up a React component tree, shown here:
All the components in this component tree work together to produce a wonderful application. Here is an image highlighting the different components on the Google homepage. Each highlighted component has its own functionality that adds a specific aspect of the page. When you bring all the components together, it gives you the desired look/functionality as a whole. After you have finished reading this blog, sketch out and send me what you think this component tree looks like.
The analogy is this. Everyone has watched a news broadcast like NBC Nightly News. No matter which station you're watching, the daily broadcast, or show that you watch each day is the application for this analogy - the end result. Each show has a head news anchor sitting at a desk and reporting to you. They also have a whole team of news anchors that are sent out to report on various stories all around the world. The news anchors are the components - the individuals who have a story to report on. The head news anchor acts as the parent component, essentially driving the show, where as the various news anchors who are reporting on specific stories are the child components. The child components are reusable in this case because for tomorrows broadcast, they will be covering a different story. When all the news anchors do their job, they work together bringing you the end result, which is an hour long program that is executed the way it was designed - just like the React components do to create the application.
Top comments (0)