DEV Community

daniel ukuhor
daniel ukuhor

Posted on

How to Think Like a Senior React Developer

In this article I will take you through the approach that most senior react developers use when writing React UI's. By the end of this article you would have gained knowledge on the right steps to take and the mindset to have when using react in your own web apps or projects.

There is a rather distinct way of thinking when developing a web app using react. You need to have the ability to look at a design and break it down into smaller components,implement all their UI states, fit these components together to make up the design and then pass data through them the optimal way. How do you do all these? let's get into that.

Senior React Developers usually follow the same 5 steps when building a react UI as soon as they get the mock data and UI design.

Break the UI into Smaller Components and Define Component Heirachy
This is fundamental to properly building a UI in react, it is only when you are able to this that you can begin using react to its full potential beacuse if you can't break a UI design down you won't be able to consistently build the right components. One easy way to figure out what qualifies as a component in a UI is to ask the UI/UX designer that provided the design they would usually have them named in figma or whatever design tool they use.If you can't do that due to not being able to reach the designer or some other reason then there are a few ways to figure out what parts of the UI design should be broken down into a component. Depending on your strongest suit chose one of the three approaches below.
Programming- You can use Robert c. martins Single Responsibility Principle (SRP) to decide what should be a component just like you do with functions and objects. you pretty much want to make sure that a component does only one thing and if in the process of building the components you realize that it is getting too big just break it down futher into an even smaller component.
Styling with CSS- Now components are usually not always this small but you can ask your self, what would I add a selector to if these were HTML tags? what would be classes and what would be id's?
UI Design ask your self, what parts of this UI would have their own layer? and how you would go about it? you can then begin to highlight or draw boxes around what should be components.

Another way to figure out what part of the UI to break down is to use the mock data. If the mock data is well structured enough you will be able to see that pieces of the mock data will match parts of the components in the UI.

Build a Version of the UI Component without Interaction Once you have broken down the UI and have figured out what should be components, You can now start building the components.The best way to approach building the component is to build a UI version that uses your mock data without adding any user interaction implemented beacuse it is usually easier to build a component without interaction first and then add the interactions later.When building a static version avoid using state, instead use props beacuse state is reserved for interactivity.This is because for something to be qualified as state it should change over time and since you are currently building a static version of the app you can't and should not be using state.

Figure Out the Minimum Required State that is Needed by your Component
In React, state is needed to implement interactivity in your app beacuse you need to allow users change your underlying data to some degree. You should ensure that your state is not duplicated or repeated, you should also make sure that you don't create more state than is needed by your component , which means learning to look out for when data can be derived from the already present state.Look into all the data you have and figure out if it is state and if it can be derived from other state.so look at your data, is it a prop? is it constant and dosen't or will not change? and is it possible to get that data from the state and or data already available? if the answer is yes to any these questions when considering if some data should be saved as state then don't as it does not qualify as state.

Figure out Where to Put your State
Putting your state in the right place can prevent you from making multiple api calls, save you from redundance and prevent you from using data that is out of sync. So it is very important that you figure out what component owns and can make changes to the state.
Remember that react uses one way data flow, so data flows through the UI from the parent components down to the child components.
If you don't know which component should hold the state then you can do the following.

1.Figure out all the components that uses that state.
2.Look for the closest parent component or the component that all those components using the state are in?
3.Choose which parent component to put the state in.(ideally the closest one is fine but you can raise the state higher).
Note!! if you can't find a component that all the components using the state are in then it's ok to create a parent component for just the purpose of holding the state.

Make the Data Flow From Top to Bottom
What does this mean? well when building components in react sometimes you need to pass data from a parent component down to a child component but there are also times when you need to do the opposite for a variety of reasons, a common one is when a state positioned in a parent component is shared among various components and can be edited by various components in this case you would need to make data flow upwards.How is this done in react? it is pretty simple just pass the state setter function as a prop to the child component and then when the state setter function is called the state will be updated properly.

If you can incoorporate all these steps while building your react components you will find that it building components become easier and you will always have a backlog of what to do next.

If you have any Questions please leave them in the comment section and i'll get to them as soon as possible.

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (0)

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site