Creating a React Toolchain from Scratch. Part1.

Photo by Stefano Ciociola on Unsplash

When we start a new React’s project we usually pick one of the most popular toolchains that exist in the React ecosystem:

but this toolchains bring with them a lot of implementation that you don’t use or you don’t want to use. So, what about if you want to make your own toolchain? This tutorial is about how to make your react toolchain, but we are going to divide it in 4 parts:

1- Creating a React Toolchain from scratch with vanilla JavaScript.

2- Adding Eslint.

3- Adding Jest.

4- Support Typescript.

Part 1. Creating a React Toolchain from scratch with vanilla JavaScript.

According to the React documentation for build our toolchain we need:

  • A package manager, such a yarn or npm. It lets you to use third-party packages .
  • A bundler, such a Webpack or Parcel. It lets you to write modular code and bundle it together into small packages to optimize load time.
  • A compiler, such Babel. It lets you to write modern JavaScript code that still works in older browsers.

Well, is time to start. So we are going to follow the nexts steps:

Step #1 Init the project

  • Create a new folder, for this example we are going to name it react-toolchain-scratch.
  • Open the Command Line Terminal (CLT) in the folder directory.
Command Line Terminal open in the react-toolchain-scratch directory

For init a new project we are going to run:

this command is going to create a new package.json that contain information about the project. The -y option avoid us to fill out all the questions about the project and gives us a quick start.

Step #2 Create folder structure

Into our react-toolchain-scratch folder we are going to create the follow folders and files structure:

Folder structure on Visual Studio Code

Note: I use Visual Studio Code to write my code, but you can use the code editor of your preference.

src — Contain all our source code.

public — Contain all our public content, here we can have the assets folder with images and other content, and the index.html.

index.html —Our application is going to be rendered and embedded into this file.

App.jsx — Is the aplication itself. Usually here we put the router or our layout component, all depend of our project’s configuration and structure.

index.jsx — Is the entry point of our application, here the App is rendered.

Now we are going to put some code into these files.

index.html
App.jsx
index.jsx

Note: StricMode” is a tool for highlighting potential problems in an application. It activates aditional checks and warnings for its descendants.

Step #3 React

In order to use React we need to install it:

react libraries

react — Is a JavaScript library for building user interfaces.

react-dom — Is a library that allow React to interact with the dom.

Step #4 Babel configuration.

Babel is mainly used to transform ECMAScript 2015+ into a backwards compatible versions of JavaScript in current and older browsers or environments. So, at the end when we parse and compile our code with Babel we are going to have a code that can be used in newer and old browser or JavaScript environments. That is it.

So, we are going to install our babels presets that is going to be used on the transpilation proccess:

Babel presets

@babel/preset-env Takes any target environments you’ve specified and checks them against its mappings to compile a list of plugins and passes it to Babel.

@babel/preset-react — Enables Babel to parse and compile the jsx sintax.

@babel/coreIt is the core of Babel.

Step #5 Install Webpack.

We need to install a bundler, we have some options here: Webpack, Browserify, Parcel and more. For this project we are going to use Webpack because is the most popular. To install webpack we need to run the following commands in your CLT:

webpack commands

webpack — Is the core of webpack.

webpack-cli — Provide a flexible set of commands for developers to improve the setup of custom webpack configuration.

webpack-dev-server — Gives you a single command that starts a static server with build-in live reload. Needs of webpack-cli to run correctly.

webpack-merge — Allow us to combine webpack’s configuration. It lets us to combine the webpack common configuration with the develop or production configuration, this is very useful because avoid repeat unnecesary configuration or make a big webpack configuration with ternary expression.

html-webpack-plugin — This plugin generate a HTML5 for you that include all your webpack bundles in the body using <script></script> tag.

@pmmmwh/react-refresh-webpack-pluginThis plugin enable fast refresh also known as a hot reload. This feature allow you to see the change made in the code reflected instantly in the browser.

babel-loader — Allow us to use Babel with Webpack.

style-loader — Takes the css imported in the JavaScript files and injects them as <style></style> into the DOM

css-loader — Help Webpack to collect CSS from all the css files referenced in the application and put it into a string.

file-loader — Resolves import / require in a file into a url and emits the file in the output directory

Step #6 Configure Webpack

A good practice is to create individual config file for every environment and another one for a common configuration in order to avoid to repeat code, so we are going to have these 3 webpack config files:

webpack confing files

webpack.common.js — Contain the webpack common configuration.

webpack.dev.js — Contain the webpack development configuration.

webpack.prod.js — Contain the webpack production configuration.

Now we are going to put some code into these files and explain it in details:

webpack.common.js

In this config file we are going to put all the common configuration.

  • Line #1. The join function allow us to normalize the path directory, this is very important because linux, macos and window use diferents delimiters (\ or /) in their paths.
  • Line #4. Webpack is going to start to bundle the application from this file that is going to be the entry point of our application.
  • Line #6. Tell webpack what directories would be searched when resolving modules.
  • Line #7. Attemp to resolve these extensions in order. If multiple file share the same name but have different extensions, webpack will resolve the first one listed.
  • Line #10. Here we declare the loaders. The loaders are transformation that are applied to the source code of a module. Is recomended to combine style-loader and css-loader.
webpack.dev.js
  • Line #8. Providing the mode configuration option tells webpack to use its build-in optimizations accordingly.
  • Line #9. Because JavaScript can be written for both server or browser, offers multiple deployment targets (node or web).
  • Line #10. Some development options are declare as the port and that the server has hot reload, this is posible thanks to webpack-dev-server and @pmmmwh/react-refresh-webpack-plugin, because both are using behind scenes.
  • Line #14. Here we declare the plugins to be used, in our case we are going to use: html-webpack-plugin and @pmmmwh/react-refresh-webpack-plugin. Both were explained above.
  • Line #22. This rule allow us to check the .js and .jsx files and apply them the declared presets for the correct transpilation.
webpack.prod.js

This webpack production config is for generate the final code to be served by our server.

  • Line #8. Generate source-map files. Source maps are basically files generated while building for production that can help revert a combined/minified file to the original state.

Note: source-map is only downloaded if we have open the browser developer tools.Therefore shipping source maps to production will not affect your end-users and will help your team with the debugging.

  • Line #16. Here we set the configuration for our ouput folder, in this folder we are going to get have all our transpiled code and ready to be served by our server.

Step #7 Polyfills

A polyfill is a piece of code (usually Javascript on the web) used to provide modern functionality on older browsers that do not natively support it.

First of all we are goin to run this code in your CLT:

core-js — Modular standard library for JavaScript. Includes polyfills for ECMAScript up to 2021: promises, symbols, collections, iterators, typed arrays, many other features, ECMAScript proposals, some cross-platform WHATWG / W3C features and proposals like URL. You can load only required features or use it without global namespace pollution.

whatwg-fetch — Is a polyfill that implements a subset of the standard Fetch specification, enough to make fetch a viable replacement for most uses of XMLHttpRequest in traditional web applications.

raf — RequestAnimationFrame polyfill for node and the browser.

Then we are going to create a new file named polyfills.js

polyfills.js

and put this piece of code into it

now import it on the top of the index.jsx file

index.jsx with polyfills included

Step #8 Scripts

Now is time to create our scripts for develop and production:

For development we can use de dev script, so you can run it writing in the CLT npm run dev, this open a new tab in your current default browser and use the configuration of our webpack.dev.js file

Project compiled
Project open in a new tab

For production we can run the script npm run build that is going to generate a folder named dist as we set in our webpack.prod.js configuration file.

Project’s code generated
dist folder

If you want to test it you can use the live server:

Live Server

and then run the index.html file:

Running our project with Live Server
Project of production open in a new tab

Git Repository
- React toolchain from scratch with vanilla JavaScript.

Git Branch
- example1 (Here you have an example with some components + css + image)

Conclusions

With this small tutorial I wanted to show you how to make your own react toolchain from scratch step by step according to React documentation. I don’t encompass all the posibilities of configuration that you can make with webpack, I only used the most common and necessary configuration for our small project, but there are a lot of configuration that can be done. I hope that this tutorial be useful for you. Enjoy it….. Happy code :)

--

--

--

Full Stack Web Developer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Function Expressions in JS

Array Methods Every JS Developer s

Symfony 4: Creating a Smart Controller

Login and signup in Angular 11

Leetcode (medium): Three Sum alias 3Sum

Update on Project SENSES Wed Dec 29 23:40:07 +0000 2021

Life’s Algorithm

Making browser games more secure with Elm, Part One

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Alien Padilla Rodriguez

Alien Padilla Rodriguez

Full Stack Web Developer

More from Medium

What are React Functional Components?

What are Controlled and Uncontrolled Components in React JS?

How to render a DOM element into a React element?

ReactJS — Separating logic using Higher-Order Component (HOC)