Let’s create a Minimal React Starter Kit with most features

Photo by Safar Safarov on Unsplash

React is a popular JavaScript library for building user interfaces. And while being a popular choice of front-end developers to work on their projects, most of the developers opt to use pre-built starter kits to start with their projects. And I am no exception to this, I also started learning React with create-react-app, the holy grail of React starter kits and I still use it for most of my solo projects.

These starter kits are useful while learning React as developers do not need to concern about React tooling and configuration. But learning React cannot be completed without understanding behind the hood working of a starter-kit or React tooling to say. And there’s no better way to learn it than creating your own starter kit.

So, let’s start and create our own React Starter Kit from scratch.

Getting Started from Scratch

Oh, you are still here? That’s good, it means you are also interested in learning behind the hood working of a starter kit.

Let’s start building our React Starter Kit project. For pre-requisites, we only require a terminal, code editor, node and yarn (or npm, if you prefer that).

I will be using yarn package manager throughout the tutorial but you can use npm, just replace yarn with npm in terminal commands.

We will be using typical folder structure for our starter kit -

react-minimal/
   |-- /__mocks__/ - mock files for jest
           |-- styleMock.js
           |--fileMock.js
   |-- /public/
           |-- index.html
           |-- favicon.ico
   |-- /src/
           |-- App.jsx
           |-- index.js
           |-- setupTests.js
   |-- postcss.config.js
   |-- jest.config.js
   |-- webpack.config.base.js
   |-- webpack.config.dev.js
   |-- webpack.config.prod.js
   |-- package.json
   |-- .babelrc
   |-- .prettierrc
   |-- .eslintrc
   |-- .gitignore

So, let’s start with creating a project folder and app initialization with yarn -

mkdir react-minimal && cd react-minimal
yarn init -y

Next, we need an entrypoint HTML file and a favicon to serve our starter kit in the browser.

So, create a public folder and add index.html inside it -

mkdir public && cd public
touch index.html

index.html

You can get favicon that I am using from here or generate one for yourself from here. Once downloaded, move favicon to the public folder.

Now our basic stuff is done, we can move to a more exciting part - webpack.

1. Setup Webpack

Webpack is a famous bundler which bundles all your files and outputs static files. And we will be using it bundle our project files - React files, stylesheets, images, etc. If you want to learn more about webpack, you can read here.

Now let’s install webpack and some other packages -

yarn add webpack webpack-cli webpack-dev-server webpack-merge babel-loader eslint-loader html-webpack-plugin html-loader dotenv-webpack style-loader css-loader sass-loader postcss-loader file-loader-D

We will be creating 3 webpack files -

1. webpack.config.base.js : config common for both development and production environment.
2. webpack.config.dev.js : config for development environment, includes hot reloading, etc.
3. webpack.config.prod.js : config for production environment, includes code optimization, etc.

Now, create these files inside the root folder -

touch webpack.config.base.js webpack.config.dev.js webpack.config.prod.js

webpack.config.base.js

In webpack development config, we will be adding hot reloading, sass support and other features.

webpack.config.dev.js

In webpack production config, we will work on production code optimization. But before that, we need to install some packages -

yarn add mini-css-extract-plugin terser-webpack-plugin optimize-css-assets-webpack-plugin postcss-safe-parser clean-webpack-plugin -D

webpack.config.prod.js

With this our webpack configuration is done, but we need to add a postcss config file before diving into the next part of our React Starter Kit.

Create postcss.config.js in root folder -

touch postcss.config.js

postcss.config.js

And, with this, our webpack setup is done.

2. Babel Configuration

React uses JSX and ES6 syntax, but the browser cannot understand it. So, we need babel which will transform React code to ES5 code that browser can understand.

Let’s add babel to our starter kit but first, we need to add some dependencies -

yarn add @babel/core @babel/preset-react @babel/preset-env @babel/plugin-proposal-class-properties @babel/plugin-proposal-function-bind @babel/plugin-syntax-dynamic-import babel-plugin-transform-react-remove-prop-types -D

And create a babel configuration in root folder -

touch .babelrc

.babelrc

With this, our babel configuration is done and now we can write some react code. So, let’s try creating a React component.

Create a src folder and add index.js entrypoint file and a React app component App.jsx inside src folder -

mkdir src && cd src
touch index.js App.jsx

src/index.js

src/App.jsx

Also, add some scripts in package.json to run React code -

package.json

Now, let’s start starter kit in development mode -

 yarn start

This should open starter kit at http://localhost:3000 in the browser.

3. Test with Jest

Testing is an important aspect of software development and our starter kit cannot be completed without adding a testing environment. So, let’s add the testing environment to our starter kit.

Jest is one of the most popular testing frameworks when talking about testing React components. So, we will be using Jest and a testing assertion utility Enzyme(makes easier to test React components) in our starter kit to setup a testing environment.

First, let’s install jest and enzyme dependencies -

yarn add jest jest-cli enzyme enzyme-adapter-react-16 -D

Now, create jest.config.js in root folder -

touch jest.config.js

jest.config.js

In our jest config, we used a property named moduleNameMapper, it mocks the import files which are not native javascript or jsx files, such as CSS, image or other asset files. So, we need to create mock files for these.

Create __mocks__ directory inside the root folder of the project and add mock files inside it -

mkdir __mocks__ && cd __mocks__
touch styleMock.js fileMock.js

__mocks__/styleMock.js

__mocks__/fileMock.js

But, that’s not all, we also need to setup Enzyme, so that we don’t have to write redundant code for every test suite.

Create setupTests.js inside src folder -

cd src
touch setupTests.js

src/setupTests.js

Now, let’s add some scripts in our package.json to complete our testing environment setup -

package.json

With this, our testing environment is done and we can move to the next part of our starter kit.

4. Lint code with ESLint

When talking about linting, the first thing that comes into mind is usually style guides. But linting is not limited to just style guides, it also helps in avoiding certain classes of errors — variable scopes, assignment errors, etc.

ESLint is a popular tool for linting JavaScript code and can be used to enforce different configurations. Here we will be using ESLint config by Airbnb with a few touches here and there.

So, let’s install some dependencies first -

yarn add babel-eslint eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-jest eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react -D

Once dependencies are installed, create .eslintrc in root folder -

touch .eslintrc

.eslintrc

Also, add a script for linting in package.json -

package.json

With this, our linter setup is done but we also need a code formatter, that will format our code. As prettier is an opinionated code formatter for most. So, let’s use prettier for our project.

Create a prettier config in the root folder -

touch .prettierrc

.prettierrc

If you use VSCode, you can install ESLint and Prettier extension from here:

ESLint - Visual Studio Marketplace

Prettier - Code formatter - Visual Studio Marketplace

Once extensions are installed, click cmd + (in Mac) or ctrl+, (in Windows) to open VSCode settings and add this line to workspace settings: "editor.formatOnSave":true to format your code automatically every time you save.

5. Add Pre-Commit Hooks with Husky

It is always best to make sure that your code is clean and error-free before you push it to source control (aka git). And, that’s what husky do for us. So, let’s add husky in our project.

yarn add husky lint-staged -D

And, then configure it inside package.json -

package.json

You can use husky to do a ton of things, like running prettier, tests before pushing changes to git. But we will be stopping here for now.

Conclusion

Congratulations! Finally, we’ve completed our React Starter Kit project. Though it’s far from over, you can try to add more features such as typescript integration, routers, adding PWA support. There are no bounds to it, but that’s all for today.

And, Of course, let me know if I got something wrong or if there is something that could be improved or simplified. PR’s and issues are more than welcome!

Lastly, here is the link for this article repo.

Thanks for reading! Happy Coding :)