Creating a React Toolchain from Scratch. Part1.
When we start a new React’s project we usually pick one of the most popular toolchains that exist in the React ecosystem:
- Create React App (single page application)
- Nextjs (server side application with nodejs)
- Gatsby (static contet-oriented website)
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.
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:
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.
Note: “StricMode” is a tool for highlighting potential problems in an application. It activates aditional checks and warnings for its descendants.
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/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/core — It 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 — 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-plugin — This 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.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:
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.
- 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.
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
and put this piece of code into it
now import it on the top of the index.jsx file
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
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.
If you want to test it you can use the live server:
and then run the index.html file:
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 :)
