React

React Step by Step from Product Idea to Web App

In this post, I’ll walk you through building a web application from a product idea using React and adhering to it’s best practices.

Let’s first start that you have an idea to solve a business problem or an end user problem. May be you are creating a Purchase Order/Sales Order solution targeted towards retailers. Or you are planning to build an application where folks can buy and sell homes, or anything else.

Step 1 – Create a mock design

The first step obviously is to create a mock design of what is in your mind (or customer’s or end user’s mind). Today I am going to introduce you one of the greatest design tools in the history of time. This tool is still number one choice for many top class designers in the era of Adobe Photoshop and Illustrator. Any guesses?. Yes, perhaps you guessed it right. It is the mighty Pencil and Paper. The possibilities are limitless (unlike mouse and keyboard) there and you can convert your exact thought process to a rough design and then take a pic of that, share it with your developer (or with yourself in case you are the developer).

Or if you are not too comfortable with Pencil and Paper and totally gone digital, then try out Invision or Moqups. I have used Invision and it is descent.

Idea – For the purpose of this post, let’s build a searchable cars list along with their price using React.

The mock looks like this.

design-mock

We shall ask our server developer to develop API and mock json for that should look like this.

{
  carinfo: [
    {
      category: "sedan",
      price: "$56,000",
      electric: false,
      name: "Mercedes Benz E Class"
    },
    {
      category: "sedan",
      price: "$42,000",
      electric: false,
      name: "Audi A6"
    },
    {
      category: "sedan",
      price: "$34,000",
      electric: false,
      name: "Nissan Maxima"
    },
    {
      category: "sedan",
      price: "$44,000",
      electric: false,
      name: "Kia Cadenza"
    },
    {
      category: "suv",
      price: "$65,700",
      electric: false,
      name: "Porsche Cayenne"
    },
    {
      category: "suv",
      price: "$69,700",
      electric: false,
      name: "Audi Q7"
    },
    {
      category: "suv",
      price: "$60,700",
      electric: false,
      name: "BMW X5"
    },
    {
      category: "suv",
      price: "$44,000",
      electric: false,
      name: "Mercedes-Benz GLE"
    },
    {
      category: "suv",
      price: "$49,495",
      electric: false,
      name: "Vokswagen Tovereg"
    },
    {
      category: "suv",
      price: "$132,000",
      electric: true,
      name: "Tesla Model X"
    },
    
  ]
}

Step 2 – Create a component tree from UX design

This exercise is to divide the design into various logical components. Where component(s) can be parent/child of other components. Based on the design above, I divided it into 5 simple components.

  • SearchableCarList ( The full example)
  • SearchInput – For receiving input for searching cars.
  • CarList – Displays and filters cars list based on input in SearchInput
  • CarCategoryRow – Displays car category
  • CarRow – Displays car and it’s price in a row

<SearchableCarList> is parent of every other component. <SearchInput> is child of <SearchableCarList>. <CarList> is child of <SearchableCarList>. <CarCategoryRow> is a child of <CarList>. <CarRow> is a child of <CarList>. Below is the parent child relationship/component tree shown.

SearchableCarList

  • SearchInput
  • CarList
    • CarCategoryRow
    • CarRow

Step 3 – Build a static website in React

Now you have components to be made, you need to build a static version of your application. When we build static version we write a lot of code without much thinking applied. Once the static version is there, then you add interactivity (here you need to put more thoughts and less code).

One rule to follow while building static version of your application is to not use state at all. As this is static version of your app, you don’t need any state.

You can use top down approach (create parent components first and then move down) or bottoms up approach (create child components first and then move up). For simpler page with fewer components, top down approach is preferable. For more complex UI, bottoms up approach is preferable. Always keep writing tests as you build your components.

At the end of this step you will have a library of these components. And you will have only render method (since you are not using state and all components are static). The key concept of React one way data flow (unlike AngularJS two way data binding) is helpful here.

Step 4 – Identify minimum state variables for making UI interactive

In programming, most painful part to debug is the mutable variables (in React case they can be identified as State variables). For example if you are building a car list, then keep car list in a state variable (carArray). You don’t need a separate state variable for cars count. That can be derived from carArray length property. This is based on DRY (Don’t Repeat Yourself programming principle).

Let’s make a list of all the pieces of data in our application above.

  • List of cars
  • Search text that user enters.
  • Checkbox value
  • Filtered list of cars

Just ask three questions for each data to determine if it needs to be a state.

  1. Is it passed from a parent via props? If yes, then it should not be state.
  2. Is it constant (not change over time). If Yes, then it should not be state.
  3. Can you compute it’s value based on other props or states. If Yes, then it should not be state.

Only when answer is no to all three above questions, you should create a state variable.

The list of cars is passed as prop from parent. So according to first question it can’t be a state. Search text that user enters is not passed from parent via props. It changes based on user input and we can’t computer it’s value. So it should be a state. Same goes for checkbox value. It should be a state. The filtered list of cars can be computed using other states/props. Hence it won’t be a state variable.

Step 5 – Identify components for state

One thing to note is that data flows only one way in React. There is a very simple process to follow in order to find out in which component should we put state variable.

  1. Identify every component that renders anything that is based on that state variable.
  2. Find the lowest common parent/owner for all components that render anything based on that state.
  3. That is where your state variable should be.
  4. You can also create a separate component solely for owning state and then make that component a parent of the owner component identified above.

Let’s follow this in our example. <CarList> needs to filter car list based on state and <SearchInput> needs to show search text and checked state. The common owner component is <SearchableCarList>. So we can put our state variables in <SearchableCarList>. We can put the state in SearchableCarList constructor method.

this.state = {filterText: '', showOnlyElectric: false}

Then you can pass filterText and showOnlyElectric as props to <CarList> and <SearchInput> components.

Step 6 Have reverse data flow

Till now we have developed the application where props and states are flowing down from top component to bottom. But as we see, the state variables are staying at top and components which are 2 or 3 levels down need to update those state variables. How do we achieve that?

Since only a component can update it’s own state, the parent component (where the state is there) will pass callbacks to child components and so on and these callbacks need to be fired when state should be updated. So here <SearchableCarList> component will pass callbacks to <SearchInput> component. And you can use onChange event on inputs to notify and execute callbacks. The callbacks passed by SearchableCarList will ultimately call setState() and app will be updated.

This was a lot to digest for new react developers. Let’s just summarize what you need to do create a web application from product idea.

  • Create a mock design.
  • Create component tree from UX design.
  • Build a static website in React using only props.
  • Identify minimum state variables for making UI interactive.
  • Identify placeholder components for state variables
  • Have reverse data flow.

If you diligently follow these steps, you will create a solid react application which is easily maintainable and testable. I have explicitly not given code examples here so that you guys try it out on your own.

How useful was this post?

Click on a star to rate it!

Average rating / 5. Vote count:

As you found this post useful...

Follow us on social media!

We are sorry that this post was not useful for you!

Let us improve this post!

About anil

Hi, I'm Anil Verma. I have a passion for teaching and developing awesome front end apps. I was involved in development of post processor for Nastran(built by NASA). More recently I have been building supply chain apps at E2open.
View all posts by anil →

Leave a Reply

Your email address will not be published. Required fields are marked *