React - Building Process

Design a Component Hierarchy

Design a Component Hierarchy

Draw boxes around every component (and subcomponent) in the mock and give them all names. The designer have for sure already done it and the Photoshop layer names may end up being the names of your React components.

Build a static version

Build a static version that takes your data model and renders the UI but has no interactivity.

It's best to decouple these processes because building a static version requires a lot of typing and no thinking, and adding interactivity requires a lot of thinking and not a lot of typing.

Don't use state at all to build this static version. State is reserved only for interactivity, that is, data that changes over time.

Identify the minimal set of state

As state to trigger UI changes, you first need to think of the minimal set of mutable state that your app needs.

If the answer to the below question is yes, it probably isn't state.

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