React-Redux (Saga) Boilerplate

All you need to start your project as fast as you can, and a good starting point to create your own boilerplate

Image source

In this article, we will discover a boilerplate using React, Redux-Saga, and Material UI with localization.

What is the meaning of “boilerplate”?

From Wikipedia, “ boilerplate code or just boilerplate are sections of code that have to be included in many places with little or no alteration”. So this means that boilerplate is a quick start for a feature or even a project if the steps that you take to initiate them are the same. To save time, you can start to write them in what is called boilerplate.

When will I need a boilerplate?

Whenever you feel that you repeat a bunch of code, you know that you have to start writing your own boilerplate to accelerate your starting point.

Let’s start exploring today’s boilerplate created by React. You’ll check if it suits your needs or not to start your React app. To be able to use this boilerplate, you need to know React and Redux saga.

React-Redux boilerplate technologies:

• React
• Redux Saga
• React Router
• Route guard ( Private Routes )
• Bootstrap
• Material UI
• React-intl
• Axios

Main folders

React Boilerplate consists of main folders within /src, as shown in the below image:

📁 Assets:

A folder that contains fonts, images, locale folder (for localization), and any shared media folders.

📁 Components:

The Components folder would contain any functional components within your project; you can use React hooks within those components to connect with the state.

📁 Containers:

The Container folder would contain any class components within your project where you can use React life cycle hooks methods.

📁 Network:

This folder would hold two types of folders:

• APIs: This contains a file for initiating the Axios instance and another file for calling endpoints.

Here’s a useful link for Axios :

Using Axios with React

• Interceptor: To transform outgoing and incoming data, you can use interceptors.

Here’s a useful link for interceptors:

Global HTTP request and response handling with the Axios interceptor

📁 Routes:

This folder will contain two files, one for history and another for your project routes.

📁 SCSS:

(Note: If you are using CSS, there’s no need for a SCSS folder.)

You need to install node-sass to be able to use SCSS within your React project. It will exist already within boilerplate, and it will contain partials for different cases such as variables, general styles, etc.

📁 Store:

Redux Saga is used as middleware within this boilerplate and store folder — or you can call it the redux folder, too — and will contain the main folders for using the redux-saga cycle:

• Actions
• Reducers
• Sagas
• Types

Here’s a useful article for redux-saga:

Getting started with Redux: Redux-saga with React

📁Utils:

You could also name this the services file. It will contain any shared or service files, like Lazyloaded components, Auth service, Constants, etc.

PrivateRoute files could be found in utils or can be functional components within the components folder.

Here’s a useful link for private routes.

📄 Theme:

This file is related to material UI theming, where you can set your primary, secondary color, and direction for RTL and any general theming options.
Useful Links for Theme and RTL in material:

Theming - Material-UI

Right-to-left - Material-UI

What Do You Need to Run Boilerplate and Continue From This Point?

Clone repo from GitHub with the following command:

git clone https://github.com/Marinashafiq/react-redux-boilerplate.git

• npm install
• npm start

Here’s the boilerplate Repository link.

Additional Info About This Boilerplate:

This boilerplate includes features that you may not need, such as:

• Snackbar component with its action and reducer. If your app doesn’t have forms or any need for snack bars, you can delete it.
• Private route for apps with authentication.
• RTL is not needed in theTheme.js file if your app doesn’t support it, so you will need to remove JSS from the theme file.
• React intl is also for localization. It will not be needed if your app supports only one language.

Note: Previous versions of react-intl will need to add locale in index.js. Please check the documentation if you’re using a version before 4.4.0.

But also there are other sample folders you can use, like:

• Loader with its reducer and action that fires with each request in the interceptor.
• Sample sagas.js file and apis.js to add your endpoints.
• The sample controls the components folder, which will contain reusable form components like buttons, input, etc.
• The Lazyloaded folder that contains all exports for lazy loading components.

Note: The login component contains adding the token to local storage to simulate route guards only, which you can remove and add your logic.

Lazy loading react components

In this boilerplate repository, you will find another branch called structure_redux_2 that contains a boilerplate with another structure for the redux folder that separate folders by feature for each of ( type — action — reducer — saga ).

Conclusion

Boilerplate is just a quick start for your repeated code or project structure, with the aim to accelerate coding time.

Project structure can be done in many different ways; choose the way that suits you and your project.

Learn more by doing and practicing, not just reading. Happy learning :)

Special thanks to Dina Elghndour. You can check out her boilerplate, which helped me a lot to start mine.

Thanks for your time. Any feedback and comments are most welcome!