Visualizing your React Application

When I first started learning React I had trouble understanding the design pattern. The concepts of nested components, passing down props, and state were extremely foggy. However I found some useful tools that helped me visualize and understand the structure of my components. Which later simplified the action of passing props, and modifying the state among different components. I will go through a simple React Application only to demonstrate how props can be passed within components, and to show the tools that guided me to understand my React structure.