What is a Boilerplate? And, How to build your own React Boilerplate?

Simplest Explanation and Method for React Learners

What is a boilerplate?

Hello, React enthusiasts and learners. Today we are going to see, What is a boilerplate? And How could we build one with minimal skills as a just starting or a junior developer?

So, let’s begin.

What is a boilerplate?

In very basic terms, it’s just some code and libraries cluster that is required in every project or similar projects. With the presence of a boilerplate, you can easily kickstart your simple or most complex projects in no time.

The most important concept in boilerplates is time efficiency which gave results in a very short time.

Image by vectorjuice on Freepik

What are the most known React Boilerplates?

Create React App — Official React Community-driven boilerplate used by a wide range of developers over the world.

Create Next App — It’s the official Next JS boilerplate and the fastest way to create a Next JS App.

Vite — Most of you would know Evan You from Vue. JS. He is the creator of another most known JavaScript library in the developer's world. He also created a boilerplate which can be used to kickstart Vue, React, and Preact projects.

React Boilerplate — Just another good performance boilerplate for React driven with the concept of offline-first React Applications.

React Starter Kit — If you need a boilerplate, which is already bootstrapped with GraphQL, Express, and Enzyme and includes recipes for implementing common use cases, then you are in the right place.

Let’s create our own React Boilerplate.

Creating Project Folder and Initialize a Project

First of all, we need to create a project folder with a name like “my-boilerplate-name”

After creating our project folder, we proceed to initialize our project with npm and after that, we also need to initialize our project folder as a git repository.

npm init
git init

Don’t forget to create a .gitignore file and make sure you put the following inside.

node_modules
build

Adding Runtime Dependencies and Transpiler

Now we are adding our runtime dependencies and our transpiler which is Babel. Babel is a JavaScript transpiler, that converts a newer version of ECMAScript to an older version that all browsers supported.

First, we need to install react and react-dom as runtime dependencies.

npm i react react-dom –save

And next, we are adding our transpiler and its plugins.

npm i @babel/core @babel/preset-env @babel/preset-react @babel/plugin-syntax-dynamic-import @babel/plugin-transform-runtime @babel/runtime @babel/eslint-parser –save-dev

Adding Babel Presets That We Need

We will create Babel specific config file called .babelrc. that can hold all the configurations of Babel.

Create a file called .babelrc that includes the following codes inside.

{
“presets”: [
“@babel/preset-env”,
“@babel/preset-react”
],
“plugins”: [
“@babel/plugin-syntax-dynamic-import”,
“@babel/plugin-transform-runtime”
]
}

The above preset might be different. You can see all presets and plugins below the links.

Babel Presets

Babel Plugins

We are Adding Our Bundler

But, What is a bundler?

A bundler is a tool that bundles your code and your dependencies into one or several bundle files. In our version of a React Boilerplate, we are going to use Webpack for bundling with CSS and SASS Loader.

npm i webpack webpack-cli webpack-dev-server babel-loader css-loader style-loader sass-loader sass –save-dev

And create a webpack.config.js file in your root project directory that includes:

const path = require(“path”);
module.exports = {
entry: “./index.js”,
output: {
path: path.resolve(__dirname, “public”),
filename: “main.js”,
},
resolve: {
modules: [path.join(__dirname, ‘src’), ‘node_modules’],
alias: {
react: path.join(__dirname, ‘node_modules’, ‘react’),
},
},
devServer: {
port: “8000”,
static: {
directory: path.join(__dirname, “public”),
},
compress: true,
},
resolve: {
extensions: [“.js”, “jsx”, “.json”],
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: “babel-loader”,
},
},
{
test: /\.css$/,
use: [
{
loader: “style-loader”,
},
{
loader: “css-loader”,
},
],
},
{
test: /\.s[ac]ss$/i,
use: [“style-loader”, “css-loader”, “sass-loader”],
},
],
},
};

For better code and highlighting errors, we are adding ESLint to our boilerplate.

npm i — save-dev eslint eslint-config-airbnb-base eslint-plugin-jest eslint-config-prettier

Creating Our Boilerplate Folder Structure

Let’s make it more similar to look like create-react-app that might be more familiar to your eyes.

As we set the config on webpack, we will proceed and create a public and src folders in the root of your project directory.

Inside the public folder, we must create an index.html file that will hold our root div.

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8">
<title>Quick React Boilerplate</title>
</head>
<body>
<div id=”root”></div>
<script src=”main.js”></script>
</body>
</html>

And now, we need to create an App.js file under src folder and include the following lines:

import React from ‘react’
const App = () => {
return (
<div className=’App’>
<h1>Welcome to Quick React</h1>
</div>
)
}
export default App;

Finally, we need to create an index.js file in the root directory.

import React from “react”
import ReactDOM from ‘react-dom/client’
import App from ‘./src/App’
const motherContainer = document.getElementById(‘root’);
const root = ReactDOM.createRoot(motherContainer);
root.render(<App />);

If you make it this far congrats. It’s nearly finished but not yet completed.

We must add starting scripts to our package.json file.

“script”: {
“start”: “webpack serve  — mode=development — open — hot”,
“build”: “webpack — mode=production”
}

Last but not least, run your build script.

npm run build

If it's compiled successfully congratulations. It will create a bundled js file called main.js inside the public folder.

Now we are ready to start our project. Go and start your project.

npm start

You might see the following screen:

Congrats. It’s working like a charm.

It’s now working on port 8000 in our localhost.

You created your own React Boilerplate congratulations. It can be customized depending on the preference of your projects.

I also created a lightweight React Boilerplate.
Check it out for starting to learn React fast.
Package: https://www.npmjs.com/package/reactinrush
Repo: https://github.com/canocalir/reactinrush

See you on the next one.