Planning React app - Core Steps

If you are reading this article, I assume you're learning React library for the time present. And as soon as you feel like React fundamentals are really started to make sense to you, that means you need to start to build a project. But before you start actually to write a code, its a good rule to plan your application.

Planning your application in every language is a crucial step. It will help you to save time and efforts in the future. Today I want to talk about core steps in building React application.

STEP 1 - Creating a mockup

If you are getting a design sketch from a designer (wireframe), you can skip this step and go to step #2.

If you plan to make design on your own, you have to make a mockup of your project first - to visualise what you're going to create. This doesn't have to be tools like AdobeXD or Sketch or Figma (if you want to use any of those, it's awesome, go ahead :). You can just use paper and pen and draw your design using rectangles and shapes which represents UI elements.

STEP 2 - Planning Components

Here you start to break UI elements and create components from those. If you're a beginner and don't have yet enough experience to define which element should be it's own component, you can use the single responsibility principal. To make it short, element is a separate component if it has single part of functionality (like logo, header, navbar, image - they all have a specific role).

STEP 3 - Planning Components Tree

This step is also important, because you have to understand how components are going to interact with each other. You have to make it clear for yourself which component is a parent and which is a child. This will help you to understand the flow of data in your application and to decide which component will contain main application state.

You can look at your mockup and with paper and a pen draw a hierarchy of your components (or by using any other tool).

For example, in your weather app, you can see that weather details consist of icon, temperature, description and date. That means that those 4 elements would be nested inside the Weather component:

This step was very important to me when I just started to learn React. its pretty easy to start writing components, but to understand how they gonna interact with each other can be crucial. It can lead to re-building the whole project if not done at early stage.

STEP 4 - Defining Place for App State

One of the important step while planning React app is defining where the app state should live. It means we need to define which component will manage state.

Official React documentation advises that data flow should go from top to bottom, like a waterfall. So ideally we need to have one source of truth, which will pass the data down the component tree via props.

For state management we can use different approaches:

• external library like Redux;
• native React object Context API

So, here you have to decide if you're using Redux or Context or component composition.

STEP 5 - Planning Components vs Containers

Now once you know the component structure of your application and defined the place for the state, you can plan components versus containers.

That means that you start to define:
1.) which components in your application should be stateless and won't use state or hooks, also sometimes called dumb components.

2.) which components have to be stateful components, either functional components using their useState hook or class-based components using the state property.

So, there are 5 core steps one should follow before actual coding starts :)

Of course as you will see, you might then add more components than it was initially planned. And that is perfectly normal, but having a plan before you start implementing is very important.

If you like to read my blog, you can buy me coffee! :)