Fish Touching🐟🎣


Apr 3, 2023

# Thinking in React

Original: Thinking in React

# Step 1: Break the UI into a Component Hierarchy

Depending on your background, you can think about splitting up a design into components in different ways:

Now that you’ve identified the components in the mockup, arrange them into a hierarchy. Components that appear within another component in the mockup should appear as a child in the hierarchy:

# Step 2: Build a Static Version in React

To build a static version of your app that renders your data model, you’ll want to build components that reuse other components and pass data using props. Props are a way of passing data from parent to child. (If you’re familiar with the concept of state, don’t use state at all to build this static version. State is reserved only for interactivity, that is, data that changes over time. Since this is a static version of the app, you don’t need it.)

# Step 3: Find the Minimal but Complete Representation of UI State

# Step 4: Identify Where Your State Should Live

For each piece of state in your application:

  1. Identify every component that renders something based on that state.
  2. Find their closest common parent component—a component above them all in the hierarchy.
  3. Decide where the state should live:
    1. Often, you can put the state directly into their common parent.
    2. You can also put the state into some component above their common parent.
    3. If you can’t find a component where it makes sense to own the state, create a new component solely for holding the state and add it somewhere in the hierarchy above the common parent component.

# Step 5: Add inverse data flow