Components are the base of React, everything we do in React is via component.
As I was writing this article, I thought to why not to explain Components by taking the example of page on which I am writing.
Different boxes on the above screenshot represents components, each serves its own purpose, the header component in gray could consists of multiple small components, like state, profile icon etc, the green box is our body component.
It’s not necessarily to have these many components, a lot of this depends on how we structure our application, everything can be a single component as well and you would see only single box, but then it would have been hard for me to explain the concept of components.
Taking the same example as of above, let’s translate it to code.
The application code looks like this
In the above code, we have three components: MainApp, Header and MainBody.
Imagine MainApp component as an enclosure of all other components, headers, footers, body, menu will sit here.
Then we have Header component at Line 19, which by the name of it suggest it would contain the code and logic for header.
MainApp component also pass props to Header, and Header access these props using this.props.title , this.props will contain all the properties that we will pass to the component.
This was my Day 9 of coding with React and I will see you in next chapter!
