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
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/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.
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
-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.
Our webpack.config.js file.
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.
Our index.scss file.
Our app.js file.
And lastly our package.json file.
Run this command in the terminal.
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.
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.
Our Links.jsx file.
Our Home.jsx file.
Our About.jsx file.
Our Contact.jsx file.
Our modified index.scss file.
And lastly ๐ our app.js file.
Run this npm start command again in the terminal.
Or run npm run build.
Top comments (4)
Great article but one question, how long did it honestly take you to setup this project?
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.
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.
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.