Once we have the component hierarchy outlined, we can build a version that takes our data model and renders it without interactivity. Decoupling the view and interactivity is good as static versions are lots of typing and little thinking and vice versa. The established best practice is to build components that reuse other components and pass data using props. 

We won't be using state here because that's used for interactivity. A top-down approach to building our components is as acceptable as a bottom-up approach. Although this bottom-up approach is more common in TDD environments. Doing all this helps to establish a library of reusable components to render each data model from, each component only has a return JSX expression and any minimal logic to help create it. 

To effectively do this, you need to understand what props are and the mechanisms that are used to pass props down the component tree. It would also be handy to know about default props and how we can type safe and validate props and components using prop tights. If you're not familiar with these ideas, I suggest skills on props using our learning materials before continuing with the thinking in reality.

Lectures

• React and Data
• What are Props and How Are They Passed?
• Receiving and Using Props
• Default Props
• Prop Types