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).
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
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
i alias for install.
-D means that we install it as a development dependency.
@babel/preset-react: We need this package so we can use the JSX
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
-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.
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
type nul for Windows OS. touch for UNIX Systems.
Run this command in the terminal.
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
In your terminal run this commands.
mkdir components npm i -P @reach/router
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
type nul > __ for __Windows OS. touch for UNIX Systems.
Run this npm start command again in the terminal.
Or run npm run build.