The React Build Process / Mindset

Brief Summary of the Thinking in React article from reactjs.org

React mock outline in it’s wild habitat

As I’ve begun to understand the React dev process I figured I should blog about the basics I’m grasping to help reinforce my understanding. So let’s touch on the overarching means to creating apps in React! This post requires a basic introduction to React terminology. We’ll be talking about State and Components. There’s a wealth of beginner and advanced react info at reactjs.org

1. Create the mock-up of your app. It might look something like a flow chart, or a sketch of the UI you’re aiming to create. Be sure to label things in a sensible way for your own good later on, as well as team members’ sanity.

Building relationships one component at a time

2. While conceptualizing the different components in your app keep in mind that each component in the app will ideally have ONE role. If that component begins to grow into multiple rolls — break it up accordingly. You’ll be able to decide what goes where while keeping in mind the singular role concept as well as Reacts one-way data flow.

3. Consider data models. We need them to build out any meaningful application. The key to studying the data model before building in React is to visualize how each piece of a data model could (or is required to) become a component in your React app. This helps get your static version set up.

4. Create a Static Version

This step can be somewhat intuitive with previous coding experience. At this stage we are going to be typing quite a bit to create the app hierarchy — parent and child components and their respective props/data to render upon startup. Another way to say it is we’re setting up the Data Flow. At this stage we are not concerned with interactivity. If you’d like to try adding interactivity along the way you may run into your fair share of undefined headaches.

Also at this stage test your props flow by viewing the app in browser. Once you’ve remembered where everything is supposed to go in the app or confirmed its data flow is in solid order it’s time to start thinking about State.

Thinking and planning is a skill set in speaking the language of information. Stay Focused

5. You’re ready to move on from static version once you’ve confirmed in the browser that the UI looks ready for user actions. So let’s pause the coding for now and start thinking about 3 questions to determine if a component will need state.

A) Is data passed from it’s parent via props? If yes — we won’t need state there.

B) Will the element / component stay unchanged over time? If yes — no state needed.

C) Is this value computed based on another state or props in the component? If yes — state won’t be useful here.

As a general rule to guide my thinking I try to focus on the elements which require user input/action and then place state in their parents or maybe even higher up the chain. All the while doing my best to minimalize the specificity. What I mean is I’m trying to use a State to the fullest extent so it can handle a broad range of interactivity with related components. In other words: if multiple actions are using the same data objects I will try and handle them all with the same state living in it’s shared parent component. It works out well sometimes and other times you find the need to create another useState.

5. Determining where state lives. Keep in mind the one-way data flow in React’s component hierarchy. For each piece of state think about the following:

Keep in mind each component that renders something based on state. For common components find their common parent to house the state.

Sometimes it won’t make sense to say “Ok, these components require state and their parent is just above them”. You may be in a situation in which you’ll need to create a new component to handle state if it doesn’t make sense to own state in an existing component.

Don’t forget to set default values in state :)

6. Add Inverse Data Flow

Callback functions are essential to creating interactive elements in your app. You’ll set up a given State higher in the component tree and make sure it’s managed in the appropriate child components via the props. Becomes progressively more intuitive with practice. Next make sure that your setState() is a callback to the callback function you’ll be using further down.

function handleClick(){
   setState()
}

The idea is as follows: later on when the handleClick is passed via props into a child component’s element that child’s interactive element will trigger w/ the onClick event which says ‘hey call this function that calls the setState function’. Practice with this on your own and it becomes easier to grasp. Consider blogging about it. That helps too :)