A Modular Approach to React

One of the beauties of coding is that there’s often many ways to accomplish the same task. “There’s more than one way to shave a yak” is what an old mentor of mine used to say. Take React for example. It’s one of the many modern, front end technologies that utilize the MVVM architecture, but Facebook decided to take its own unique approach. Whether you’ve been using React since its introduction, or have recently began to dabble in it, we can agree that its flexibility is one of the biggest selling points. Both enterprise applications to your weekend hobby project can be done with React. But with flexibility comes the questions on what the best or even right way on how to do something. In this article we’ll explore the modular approach that our developers use when building React clients.

Subscribe To Our Newsletter

Get updates about software solutions for your business

What Is a Module?

Let’s begin with the basics: the module. A module, in relation to React, is simply a component, or set of components, that accomplish a specific task or functionality. If you’d like further understanding, a more encompassing definition can be found here. But what does this really mean? Let’s say we’re upgrading a static website to a single page web application and you’ve decided to use React. You start by creating a component that will handle the landing page and appropriately name it, LandingPage. You then set out to code out the various “parts” of the page. As you reference the current static site you choose to build out a call-to-action banner first. Instead of coding the banner directly into the landing page component, you create a new file and a new component called CallToActionBanner. After completing CallToActionBanner, you simply import it in LandingPage and instantiate it as needed. Congratulations! You’ve just created a module!

So Everything in React is a Module?

This is where we get into a little of the semantics. Components and modules, with respect to React, are often interchangeable terms. While they actually denote different structures, there is a bit of contention about what the actual differences are. At Kobalt Solutions, we see modules as plug-n-play features that do not introduce breaks in functionality when removed. Components, on the other hand, are core to the application as a whole. Let’s revisit the example with the LandingPage and CallToActionBanner pieces. The CallToActionBanner, while it is a React component, can also be classified specifically as a module because removing it does not break any existing functionality on the LandingPage component, rather you just don’t have that banner anymore. If you remove the LandingPage component, you are missing an entire page of the web application and the routing of the application would most likely break, or throw a 404 error component, if designed with proper error handling.

Kobalt Solutions Modular Approach

Definition of module, check. Difference between component and module, check. Well done! You may have already known all of that, but, just like your browser, it never hurts to refresh every so often! Let’s get to the good stuff…the modular approach to React. To be honest, the name may not be the most accurate name for our process, but it stems from the concept of modules and interchangeability. Our developers use a combination of modularizing the file structure and the code within to keep projects as lightweight and DRY as possible. Take a look at the following example:

As you can see, we have a fresh React project. One of the first things that we do is create a modules folder within the src folder. Next we add an index.js file within the modules folder and leave it blank for now. Most of our React projects have been dashboard or portal apps for our clients’ internal CRM systems so we usually add a buttons, inputs, and lists. You probably noticed that each of these folders have an index.js file of their own. The reason being is that whenever a file is added to any of these folders, the index file allows for the exported React components to be accessible from the folder itself! Remember, the index file is the default entry point of any folder, so by adding something like ‘export * from ‘SomeFile.js’’ to the index, you’ve already made your life a whole lot easier. Let’s revisit the index.js file at the root of the modules folder. Since each of the folders have their own index file and are exporting all the contents from each file within, we do something similar here, but reference the other folders (since they’re already exporting stuff)!

What Did That Change?

Ok so you may be thinking, “that seems like a lot of extra work, so how does that promote DRY code?”. Let’s create a DemoPage and see the difference:

If we look at the second image, line 3 is where all the magic happens. Notice that while these imported React components are coming from a single source, yet they’re obviously from different folders from the first image. This is the beauty of modularizing the file structure of your React apps! By simply changing the modules export method from exporting as default to exporting with a declared name, as well as adding the index.js files, we are able to make reusing React components a simple feat!

Let’s circle back to our original conceptual example of the LandingPage and CallToActionBanner one more time. By utilizing this modular approach to React, you can not only optimize the file structure of this project, but you can import and reuse the CallToActionBanner wherever you need!

Conclusion

Well, that’s it for this week, folks! Just to quickly sum up everything we talked about, the trick to the modular approach to React is proper file structure, component exportation, and indexing. I hope you found this article informative and can apply this technique on your next React project! As always, we greatly appreciate it if you could give us a Like on the social media platform you found this on. If you have further questions, feel free to leave a comment and we’ll be sure to get back as soon as we can!