Building a React project from the ground-up with Webpack and Babel

So this was one of those things that I wish someone would’ve told me when I first started out or at least provided guidelines, so that I could remember it later on. But I thought I would pen it down as soon as I was building complex applications and had my brain wrapped around React.

Alright, let’s get this started then, maybe most of you by now know the entire process but for those who do not and for those of you who are tired of using the ‘create-react’ script, this is it. First things first, create an empty directory, name it to whatever you like, camel-case is preferable but not mandatory. Example: MyFirstProject. Open command prompt if you’re on windows or terminal on Linux and navigate to the same directory and run the init command.

~$ npm init

You could choose to press enter all the way out of the project options or you could fill them up.

Then install the necessary dependencies for react

~$ npm i react react-dom

…that’s pretty much it for react at least. Now obviously browsers do not understand JSX out of the box so we need a transpiler unless you’re coding React in VanillaJS in which case I bow my head in reverence.

And babel comes to the rescue in the form of a transpiler. However, since we’re also using webpack this is going to be slightly tricky here.

Also, for reference, at the time this post was written, Webpack 5 has been released but had a few bugs with the Webpack Dev Server package so we’re gonna be using Webpack 4.

To install babel and the transpiler environment:-

~$ npm i babel-core@6 babel-loader@7 babel-preset-react babel-preset-env babel-plugin-transform-class-properties

I’ll explain each of the above:-
Babel-core and Babel-loader contains core js libraries and their interpretations from ES6 to ES5 to ensure browser compatibility.

Babel-preset-react and babel-preset-env are responsible for JSX conversion signals and loading the environment in general.

Babel-plugin-transform-class-properties enable you to write functional components or stateless components.

Next up would be the Webpack installation and as I mentioned earlier, we would be using Webpack 4.

~$ npm i webpack@4 webpack-dev-server webpack-cli@3

So we’ve pretty much covered all the dependencies so far. Next would be the project folder structure.

So out of all the folders above — public, src and the files — .babelrc, webpack.config.js, App.js and index. html have to be created manually and I’ll describe the content too.

Let’s start with the public folder. This is where the server (webpack-dev-server) will serve the files from and will be in pure / vanilla JS and will be named ‘bundle.js’ . But all you need to be concerned for now is to create an index.html which will look like this:-

So what happens here is that webpack will bundle all the files and assets into one file called bundle.js which is then loaded onto index.html.

Next let’s create the App.js file which has a simple component that returns Hello!

So we’re done with the main entry file, now let’s set up the configuration file for webpack and babel, starting with webpack.config.js

What’s happening here is that we’re telling webpack where our entry point to the project is and what should be our output using path and __dirname. Also, we’re notifying webpack to run babel for all .js (JavaScript) files except node_modules folder and setting the public folder as the base for webpack dev-server. This file is sort of important to play around with webpack and various loaders for parsing files like CSS, JPG, GIF, SCSS or any kind for that matter. Webpack also supplies loaders and plugins with react which is why it’s widely in use.

Now it’s time to configure babel by creating the .babelrc file

Fairly simple! It tells babel that we’re using React and hence to load JSX parsing and we may also (most definitely) use functional components so load the transform-class-properties plugin too.

..and that’s it, if you’ve done everything right so far, you need to add two scripts to your package.json file as follows:

Now go the console and try running

~$ npm run build

or

~$ npm run serve

I haven’t included the loaders for styling but in case if you like it, let me know and I can do the same.

-Cowabunga!

--

--

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
Thomson Martin

Thomson Martin

React developer with hands-on experience in Redux, MaterialUI, Bootstrap and also experimenting with Storybook, Docker and much more.