Reading 05

What is the single responsibility principle and how does it apply to components?

If we think about creating a UI, we can imagine a number of components acting as containers. For example, let’s say you have app window > nav bar > search box. In this case, it wouldn’t be nav bar’s responsibility to host the navigation links/icons and search box as well as provide the search functionality. It simply provides a home for the search box.

What does it mean to build a ‘static’ version of your application?

Static versions have their interactive connections severed so that you can build a renderable, but non-functional model of the application. This simplifies and prioritizes the build process. You will start with the skin and bones first, and provide the brains and muscle once you are ready. This means using props, no state.

Once you have a static application, what do you need to add?

State comes next. This is going to provide the interactivity.

What are the three questions you can ask to determine if something is state?

-Is it passed from a parent via props? 🚫 state -Is it unchanged over time? 🚫 state -Can you compute it based on any other state or props in your component? 🚫 state

How can you identify where state needs to live?

Identify each component that will use the state or mutate it in some way. State should live in a component higher than the highest component that uses it.