Originally posted here
After dwelling in Ember.js for almost two years I have tried React.js. As every developer do, I started surfing on the internet to create my Hello World app using React.js.
Initially, I found create-react-app which is pretty much useful for creating React.js in lightning-fast speed. I really enjoyed create-react-app since it had all the setup that we usually need in JS framework, starting from development server to test setup.
After using it for a while I felt that it lacks customization. create-react-app uses Webpack behind the screen to build the application. Webpack is a widely used javascript bundler which has a large ecosystem that supports plenty of plugins. But create-react-app doesn't allow us to explore those plugins.
So I arrived at the conclusion that I need to move out of create-react-app to utilize the full power of webpack with React.js. I started writing my own webpack configuration to release the full power of webpack.
Here I'm writing how I used webpack to build my react application to help the developers like me.
Prerequisite
- Node.js must be installed on your computer. I hope you guys are familiar with yarn. Also, yarn is installed globally.
- Create an empty project and create a package.json file.
Installation
Install the following packages.
Setup React.js
yarn add react and react-dom
react - React.js library.
react-dom - This package serves as the entry point to the DOM and server renderers for React.
Setup webpack
yarn add -D webpack webpack-cli webpack-dev-server html-webpack-plugin
webpack - Webpack is a bundler for modules.
webpack-cli - Command Line interface for webpack.
webpack-dev-server - Development server that provides live reloading.
html-webpack-plugin - The HtmlWebpackPlugin simplifies creation of HTML files to serve your webpack bundles.
Setup Babel
yarn add -D @babel/core @babel/preset-env @babel/preset-react babel-loader
@babel/core - Mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript.
@babel/preset-env - @babel/preset-env allows you to use the latest JavaScript.
@babel/preset-react - This package is a set of plugins used to support React.js specific features.
babel-loader - This package allows transpiling JavaScript files using Babel and webpack.
Configuration
We have installed all the required packages to create a React.js application using webpack. Next we need an index.html template where we need to insert the react constructed dom. Create an HTML file inside src/ folder.
src/index.html
<html>
<head>
<title>Setup React Application From Scratch</title>
</head>
<body>
<!-- We will insert the dom here -->
<div id="react-app">
</div>
</body>
</html>
Also, we need a starting point to create react application. Create a js file index src/ folder.
src/index.js
import React from 'react';
import { render } from 'react-dom';
const rootElement = document.getElementById('react-app');
render(<div> Hello World! </div>, rootElement);
Configure webpack to serve live development server
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: path.resolve(__dirname, 'src/index'),
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [{
test: /\.js$/,
include: path.resolve(__dirname, 'src'),
use: ['babel-loader']
}]
},
devServer: {
contentBase: path.resolve(__dirname, 'dist'),
port: 9000
},
plugins: [
new HtmlWebpackPlugin({
template: "src/index.html" //source html
})
]
};
Babel Configurations
.babelrc
{
"presets" : [
"@babel/preset-env",
"@babel/preset-react"
]
}
We have reached to the finishing line. Oh wait! there is one more thing to be done. Add the webpack scripts to package.json file.
package.json
{
"name": "react-setup-from-scratch",
"scripts": {
"serve": "webpack-dev-server --mode development",
"build": "webpack --mode production",
}
}
That's all! It's show time. Let's start the development server.
yarn serve
Voila!!! We are done. Let's see the output.
Fully completed code can be found here.
I hope this post is useful in someway for the beginners ❤️.
Top comments (3)
Very useful, thanks!
I'm glad that it was useful to you! :)
Thanks. Such a useful article for react developers