DEV Community 👩‍💻👨‍💻

Cover image for How to configure React with Webpack & Friends from the ground up
Mark Abeto
Mark Abeto

Posted on • Updated on

How to configure React with Webpack & Friends from the ground up

Good Morning Guys!

I just found out that a lot of you guys like my Vue and Webpack Post so I thought maybe you're curious on how we implement this with everyone's favorite framework and the number one (for now) React (technically it's a Library).

Statistics
npm Downloads - React vs Vue vs Angular
Google Trends - React vs Angular vs Vue
npm Depended Packages - 4th React,18th Vue,48th - Angular
StackOverflow Survey 2019 - Most Loved Framework
At the time of writing this post

So Let's Get down to Business.
Please install Node.js before doing this.
From your desktop run this command.

   mkdir react-webpack && cd react-webpack
   npm init --y 
Enter fullscreen mode Exit fullscreen mode

Basically what this means is that we are making a directory (md) that has the name of react-webpack and changing our current directory (cd) Desktop to react-webpack and making a package.json file with the npm init --y command with the default configuration.

   npm i -D @babel/cli @babel/core @babel/preset-env @babel/preset-react
   babel-loader webpack webpack-cli webpack-dev-server html-webpack-plugin 
   node-sass sass-loader css-loader style-loader
Enter fullscreen mode Exit fullscreen mode

i alias for install.
-D means that we install it as a development dependency.

@babel/cli and @babel/core: Theses packages let us transpile our JavaScript code in the command line or we can transpile it programmatically.

@babel/preset-env: This package lets us use the newest features of JavaScript mostly ES6 features and some features ES7 and ES8 in our code. If you want to use async/await feature you might need the @babel/polyfill library.

@babel/preset-react: We need this package so we can use the JSX
or JavaScript XML syntax in our Components.

JSX
JavaScript

The two pictures above are equivalent in functionality. The advantage of JSX is it is more readable than the second one using JavaScript. In the first one, we're doing it the Declarative way and the second one, we're doing it the Imperative way. As the documentation says React is a Declarative library for building UI not Imperative. Basically what the @babel/preset-react preset does it transpiles our JSX code into JavaScript. Because browsers can't understand JSX.

babel-loader: Webpack needs this to transpile our Javascript Code with Babel.

webpack and webpack-cli: The webpack core functionality and the webpack command-line utility so we can run some custom webpack commands.

webpack-dev-server: This provides a live development server and it reloads the browser page every time a file changes.

html-webpack-plugin: This plugin generates an HTML file or we can specify an existing one to server our bundles.

node-sass and sass-loader: We need these two so we can use SASS and these compiles our SASS code to CSS.

css-loader and style-loader: Basically the css-loader returns a string and the style-loader takes that string and it puts it inside the style tag in our html.

   npm i -P react react-dom
Enter fullscreen mode Exit fullscreen mode

-P means we install it a production dependency.

react: The library for making components.
react-dom: The library that binds or connects our components to the DOM.

Our index.html file.
index.html

Our webpack.config.js file.
webpack.config.js

Ok, I just copied this webpack.config.js file from my other post and modified it.

I'm not gonna explain all these just the important parts. We specify the entry path of our main file with the help of path.join method and the global variable __dirname that node provides us. We specify the output using two properties the path to the folder to be created and the name bundled filename.

And in the devServer object we specify the port which in this example is 1000 and the open property to true which automatically opens the browser when we start our application and hot property to true which reloads the page when we change a file in the directory. The historyApiFallback property specifies that the index.html the file will be served instead of 404 responses.

The array rules property in our module object is our configuration for our loader files the first object we specify that we can use either a file with an extension of jsx or js in the test property and we specify that we will use babel-loader in our loader property. In the options object we specify an array of presets first @babel/preset-env for new JS features and @babel/preset-react so we can use JSX syntax. The second object we specify that we can use a file with an extension of scss or sass in the test property and in the use property we specify the loaders that we will use that array must be in that order because loaders are evaluated from right to left.
So Basically the process is like this we use SASS code because of the sass-loader we convert SASS code to CSS Code. sass-loader -> css-loader. And the css-loader returns a string then the style-loader takes that string and puts it inside a style tag in our HTML File. css-loader -> style-loader.

In the plugin property we specify plugins that we need in our application first we instantiate the HotModuleReplacementPlugin so we can enable hot-reloading in our application.

HTMLWebpackPlugin we pass the necessary options we specify the path to our favicon if you don't have a favicon get rid of this option, the path of our template file which in this case is the index.html file.

Btw make a styles folder in the command line and make an index.css file.

    mkdir styles && type nul > index.scss 
Enter fullscreen mode Exit fullscreen mode

type nul for Windows OS. touch for UNIX Systems.

Our index.scss file.
index.scss

Our app.js file.
app.js

And lastly our package.json file.
package.json

Run this command in the terminal.

  npm start
Enter fullscreen mode Exit fullscreen mode

Nice! We just made a React app from scratch with the help of Webpack and Friends.

So I'm gonna add some routing functionality to this app. I'm gonna use the
@reach/router package.

In your terminal run this commands.

   mkdir components
   npm i -P @reach/router
Enter fullscreen mode Exit fullscreen mode

Make 4 files inside the components folder.
Links.jsx, Home.jsx, About.jsx and Contact.jsx.

   cd components
   type nul > Links.jsx
   type nul > Home.jsx
   type nul > About.jsx
   type nul > Contact.jsx
Enter fullscreen mode Exit fullscreen mode

type nul > __ for __Windows OS. touch for UNIX Systems.

Our Links.jsx file.
Links.jsx

Our Home.jsx file.
Home.jsx

Our About.jsx file.
About.jsx

Our Contact.jsx file.
Contact.jsx

Our modified index.scss file.
modified index.scss

And lastly 😃 our app.js file.
modified app.js

Run this npm start command again in the terminal.
Or run npm run build.

Thank guys for reading this post.

Have a Nice Day 😃!.

Top comments (4)

Collapse
 
adam_cyclones profile image
Adam Crockett

Great article but one question, how long did it honestly take you to setup this project?

Collapse
 
macmacky profile image
Mark Abeto Author

So I've been using webpack for almost a year now so I know what packages and libraries to use. It took almost a half hour to setup this project.

Collapse
 
adam_cyclones profile image
Adam Crockett

Cool thanks, what about if you have never seen Webpack, how long would you estimate it might take. For me I'm a bit hooked on tooling and should not be allowed near a Webpack config, you won't see me for a week.

Thread Thread
 
macmacky profile image
Mark Abeto Author • Edited on

I think I can learn it maybe in weeks or a month. The documentation is great and there's a lot of tutorials out there. I really don't like configuring projects and stuff I rather spent my time coding straight away.
But sometimes I just wanna know stuff.

This post blew up on DEV in 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!