How to configure React with Webpack & Friends from the ground up
Tags: react, webpack, javascript, webdev
Published: 2019-08-03 03:31:31

#####Good Morning Guys!

I just found out that a lot of you guys like my [Vue and Webpack Post](https://dev.to/macmacky/how-to-configure-webpack-and-vue-from-the-ground-up-4c19) so I thought maybe you're curious on how we implement this with everyone's favorite framework and the number one (for now) [React](https://2018.stateofjs.com/front-end-frameworks/overview/) (technically it's a Library). 

Statistics
[npm Downloads - React vs Vue vs Angular](https://www.npmtrends.com/react-vs-vue-vs-angular)
[Google Trends - React vs Angular vs Vue](https://trends.google.com/trends/explore?date=today%205-y&geo=US&q=%2Fm%2F012l1vxv,%2Fg%2F11c6w0ddw9,Vue)
[npm Depended Packages - 4th React,18th Vue,48th - Angular](https://www.npmjs.com/browse/depended)
[StackOverflow Survey 2019 - Most Loved Framework](!https://insights.stackoverflow.com/survey/2019#technology)
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.

```cmd
   mkdir react-webpack && cd react-webpack
   npm init --y 
```
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.


```cmd
   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
```


__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](https://thepracticaldev.s3.amazonaws.com/i/l3fjsk0t73uhggu11lhb.png)
![JavaScript](https://thepracticaldev.s3.amazonaws.com/i/vg7kp2a3et4vkydnhnms.png)


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.


```cmd
   npm i -P react react-dom
```
__-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](https://thepracticaldev.s3.amazonaws.com/i/8opmq46brzbcphqeya0d.png)

Our __webpack.config.js__ file.
![webpack.config.js](https://thepracticaldev.s3.amazonaws.com/i/9s4gpjgxhy5vd2q3agvf.png)


Ok, I just copied this __webpack.config.js__ file from my other [__post__](https://dev.to/macmacky/how-to-configure-webpack-and-vue-from-the-ground-up-4c19) 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.

```cmd
    mkdir styles && type nul > index.scss 
```

__type nul__ for __Windows OS__. __touch__ for __UNIX Systems__.

Our __index.scss__ file.
![index.scss](https://thepracticaldev.s3.amazonaws.com/i/r831dilacz6yrlj1z65u.png)


Our __app.js__ file.
![app.js](https://thepracticaldev.s3.amazonaws.com/i/ud8z40fo3bba7imkn7cs.png)

And lastly our __package.json__ file.
![package.json](https://thepracticaldev.s3.amazonaws.com/i/l7ltiv2vv5ipjk6pzyxn.png)

Run this command in the terminal.
```cmd
  npm start
```

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.
```cmd
   mkdir components
   npm i -P @reach/router
```

Make 4 files inside the __components__ folder.
__Links.jsx__, __Home.jsx__, __About.jsx__ and __Contact.jsx__.

```cmd
   cd components
   type nul > Links.jsx
   type nul > Home.jsx
   type nul > About.jsx
   type nul > Contact.jsx
```

__type nul > __ for __Windows OS__. __touch__ for __UNIX Systems__.


Our __Links.jsx__ file.
![Links.jsx](https://thepracticaldev.s3.amazonaws.com/i/4klkjfy8nw888rceyjrr.png)

Our __Home.jsx__ file.
![Home.jsx](https://thepracticaldev.s3.amazonaws.com/i/cw8ikjelz6v4zxgv4nbt.png)

Our __About.jsx__ file.
![About.jsx](https://thepracticaldev.s3.amazonaws.com/i/f3kk9ptv0so6uq1zsrnm.png)

Our __Contact.jsx__ file.
![Contact.jsx](https://thepracticaldev.s3.amazonaws.com/i/bgmiqjcivqh1wufn3xli.png)


Our modified __index.scss__ file.
![modified index.scss](https://thepracticaldev.s3.amazonaws.com/i/knzvwxgas8ldm8cn5ota.png)


And lastly :smiley: our __app.js__ file.
![modified app.js](https://thepracticaldev.s3.amazonaws.com/i/ni367xvs8nuc4slerizx.png)


Run this __npm start__ command again in the terminal.
Or run __npm run build__.

####Thank guys for reading this post.

# Have a Nice Day :smiley:!.