React is a widely embraced front-end library renowned for crafting intuitive UI/UX experiences. However, there is a necessary fundamental shift in mindset to have a mastery of React. As opposed to the instruction-based way of building in JavaScript, React apps have a component-based architecture. To learn & eventually build with it requires a complete change of perception.
This article will dive into how you can think & view sites in React before building in it. It draws parallels to the semantics & layout of a site and explores the advantages of adopting a component-based architecture.
Layout of a web page
The layout of a web page is quite simple. There is a header or a navbar, followed by the other parts such as the sidebars, main sections in the middle & the footer at the bottom.
This image exemplified by W3School gives the best perspective of its layout.
With this overview, we can also view React apps in a similar model & conceptualize each segment as a component.
Deconstructing this model into components, we identify elements such as a Header or a Navbar component, a Hero section component, the second section which can be for advertisements called an advertisement component, a side-bar component & a footer component.
Thinking of components as Lego building blocks helps as each piece is fitted together through interlocking to create a cohesive whole.
Now these components can even be broken down further into smaller components and so on. We will keep it quite simple for now.
A real-life example using W3School’s home page
Let’s take a look at the W3School’s homepage. We will focus on the main parts for brevity & in this case, will make it simpler to understand how it could be broken down into components. This means that the other sections (except for the footer) after the second section is excluded.
Clearly we see that there are 5 main components — a header, a navbar, the hero component, the HTML markup component and the footer.
This is how the page is broken down:
As explained earlier, there can also be further breakdowns of the page into much smaller components making things much more modular & maintainable in the long run.
Take the footer for example. It can be broken down into 5 more components as seen in the image below.
This can also be done on other components such as the header or even the hero component. How you would like to break down your applications into components is entirely dependent on how you want it to be. As long as they are re-usable and fits seamlessly with the other components to reach your desired result.
Benefits of deconstructing a site’s layout into components
There are several reasons why using components is beneficial, especially during development.
1. Re-usable components
Components can effortlessly be re-used across various pages or even on another site.
2. Separation of concerns
This is a great way to keep the problems of a component isolated from every other component. It‘s encapsulated within a particular component but not in the others.
3. Isolation of logic
Speaking of isolation, the logic behind these components remains within the component.
4. Modularity
The components are just JavaScript modules (ES6 modules). Having these modular building blocks encapsulates specific functionalities which makes it easier to maintain & test through testing frameworks such as Jest.
5. Easier for Maintainability
The component-based architecture gives a more structured & clear flow of how these building blocks fit together. It’s easier to maintain, refactor & debug.
Adding a new feature/component becomes even easier too.
6. Consistency
The architecture also provides consistency in the design & eventual behaviour of the app.
7. Performance Optimization
The application’s performance is optimized since we can render the parts that need to be rendered onto the UI. Ultimately, this prevents any unnecessary re-renders of components that are not used.
8. Scalability
The scalability of the app is more efficient as complex UI becomes more manageable once it is broken down into smaller parts.
Summary
React empowers developers to construct robust and scalable applications. This means there is a paradigm shift in perception to a component-based approach. It is akin to compartmentalization and is a high-level abstraction.
With this altered mindset, we can easily map out what parts we need, the parts that can be re-used & the ones that need to be rendered conditionally, and so on.
Re-thinking application building in this way helps in understanding React before you will even learn it. In fact, this will also be a great introduction if you will dive into other technologies such as no-code tools that uses this conceptualization.
Additional Resources
For further insights, refer to the React documentation to learn more about the library.
Connect with me!
Follow me on X and LinkedIn if you like my work and want to stay updated for more.
Support
If you’ve found my work helpful & want to support it, you can do so here & it’s greatly appreciated!