Draw a component treemap with basic component structures
The first step to take is to draw a rough idea as to how the whole app will look like. Typically, you either…
- get a design plan from your client or designer. Or,
- develop a design plan by yourself
Based on the design, you are going to draw a component map onto a paper.
First of all, you’ll identify the highest component, which you’ll probably name App.js.
After that, you’ll decide if it’s necessary to put a router (I always use react-router-v4), because the router is easier to update when it’s put just under the root component.
Then, you’ll consider the layout. For example, if your app looks like a blog (just like the one you’re reading now), you’ll probably create components like Header, Toolbar, SiderBar, and Footer.
From there, you are going to consider the structure of their children components. Of course, it’s fine if the end product looks different from what you originally had in your mind.
While considering how each component will look lie, ask yourself what each component is supposed to do. This helps you to determine what to test with testing framework, such as Jest.
Consider the states of the whole app
Once you’ve developed the component treemap, you’ll consider the states the whole app will use. In particular, it’s important to consider what states will be shared among multiple components. Those states will be shared with a technology like Redux.
This doesn’t mean you need to come up all the states required for every component.
Again, this plan can change while development.
Consider how you use presentations and containers
The idea of presentational and container (or, dumb or smart) components is coming from Dan Abramov, a co-author of Redux.
- Presentational components are usually devoid of states and you can create them as functional components (e.g. const componentName = () => (<div></div>)). They are concerned with how they look.
- Container components are usually stateful and created with the Class keyword. They are concerned with how they work.
Assuming that you’re creating a blog-ish app, there will be a form component where you can write a blog post. This can be divided into…
- Form – which has input boxes and CSS classes
- FormContainer – which has all the event handlers (e.g. onClickSubmit())
Begin with test cases
As mentioned above, you should have identified what each component is responsible for. So, start with writing tests, so that those tests can verify what the component is supposed to achieve.