I have been learning lately, and I have used to create my React projects easily with minimal efforts and configuration, and i guess you too have most probably used or to create your react apps.These are fantastic tools if you want to just focus on React and let them take care of the configuration. But is this the way you want to learn React? React create-react-app create-react-app react-slingshot Probably not, that’s why you are here. So let’s get started :) Getting Started: Before starting, you must have npm installed on your computer, which comes bundled with , you can install it from . Node.js here Folder Structure: Folder structure for the React app You can create the above directories with these commands. mkdir react-boilerplatecd react-boilerplatemkdir -p src/components src/styles Initialize the Project: All projects that uses node package manager(npm) must be initialized. To initialize a project enter below command in a terminal. This will create a file. package.json npm init You’ll be asked few questions related to the project, you can skip them by pressing enter, if you want to skip all the questions, add a -y flag. npm init -y Now your package.json file will look something like this. {"name": "react-boilerplate","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"keywords": [],"author": "","license": "ISC"} Installing Webpack: is a module bundler that lets us bundle our project files into a single file for production. So let’s add webpack to our project. Webpack npm install --save-dev webpack webpack-cli The above command will add and as a dev dependency to our project.We installed so that we can use in the command line. webpack webpack-cli webpack-cli webpack Installing React: Install and as a dependency. react react-dom npm install --save react react-dom Installing Babel: In order for React to work, we need to install Babel alongside with it. We need Babel to transpile ES6 and JSX to ES5. Install , , , as a dev dependency. babel-core babel-loader babel-preset-env babel-preset-react npm install --save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react Transforms ES6 code to ES5 babel-core: Webpack helper to transpile code, given the the preset. babel-loader: : Preset which helps babel to convert ES6, ES7 and ES8 code to ES5. babel-preset-env Preset which Transforms JSX to JavaScript. babel-preset-react: Index.js : Create an index.js file inside root of the folder, for now add the following line code inside it.This file will be the entry point to our app. /src console.log("hello"); Index.html : Create an index.html file inside root of the folder and add following code inside it. /src Entry and Output file: Create a in the root directory of the project so that we can define rules for our loaders. webpack.config.js Define the entry point and output directory of our app inside the webpack.config.js In the above code, Webpack will bundle all of our JavaScript files into file inside the directory. index-bundle.js /dist Webpack Loaders: Now add some loaders inside this file, which will be responsible for loading and bundling the source files. Inside the add following lines of code: webpack.config.js, Here is used to load our JSX/JavaScript files and is used to load and bundle all of the CSS files into one file and will add all of the styles inside the style tag of the document. babel-loader css-loader style-loader Before Webpack can use and we have to install them as a dev-dependency. css-loader style-loader npm install --save-dev css-loader style-loader Keep in mind that webpack executes the loaders from last to first i.e from right to left. .babelrc: Now create a .babelrc file inside root of the project directory with the following contents inside of it. {"presets": ["@babel/preset-env", "@babel/preset-react"]} This file will tell babel which presets to use for transpiling the code. Here we are using two presets: : This preset is used to transpile the ES6/ES7/ES8 code to ES5. env : This preset is used to transpile JSX code to ES5. react Compiling files using Webpack: Add the following lines of code inside the script object of the package.json file as below: "start": "webpack --mode development --watch","build": "webpack --mode production" Here i have used flag, so whenever there is a change in source files, webpack will automatically compile all the source files. watch There are two modes in webpack 4, the production mode which produces optimized files ready for use in production and development mode which produces easy to read code and gives you best development experience. The flag lets us choose which mode to use. --mode Now you can compile the project using below command: npm start After executing the above command you will see file created under the directory which will contain transpiled ES5 code from file. index_bundle.js /dist index.js App.js Create an App.js file inside the folder of the folder with the following contents inside of it. components src App.css: Create an App.css file inside the folder of the folder with the following contents inside of it. styles src This CSS file is used to make sure the css-loader and style-loader are working correctly. Now modify the file that we created earlier to contain following lines of code. index.js Installing Html-webpack-plugin: Now we also need to install , this plugin generates an HTML file, injects the script inside the HTML file and writes this file to . html-webpack-plugin dist/index.html Install the html-webpack-plugin as a dev-dependency: npm install --save-dev html-webpack-plugin Now we need to configure this plugin inside the file, add the following lines of code inside it. webpack.config.js Here the value of template key is the file that we created earlier and it uses this file as a template and generates new file named inside the folder with the script injected. index.html index.html /dist The setup is almost complete, all we have to do is to compile the source files using webpack, you can run the project using below command: npm start You will get output inside the / folder of project, Now open the in a web browser, you will see the text inside of it. dist index.html “My React App!” But this approach has a downside that you have to manually refresh the webpage, in order to see the changes you have made. To have webpack watch our changes and refresh webpage whenever any change is made to our components, we can install webpack-dev-server. Installing Webpack-dev-server: Install as a dev-dependency webpack-dev-server npm install --save-dev webpack-dev-server And change the start script like below: package.json "start": "webpack-dev-server --mode development --open --hot" I have added two flags and which opens and refreshes the web page whenever any change is made to components. --open --hot Now run the below command in the terminal: npm start You should see the browser window open and display the content just like the below screenshot. Output in a browser window That’s it, Now we have our own React boilerplate that we can use to create our React projects. You can also download this react setup from my . Github If you found this article helpful, please hit the 👏 button. If you have any doubts, you can comment below, I’d be happy to help :)

Alongside

Facebook

Initialized

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

How to build a React project from scratch using Webpack 4 and Babel

Too Long; Didn't Read

Companies Mentioned

Sukhjinder Arora

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

How to build a React project from scratch using Webpack 4 and Babel

Too Long; Didn't Read

Companies Mentioned

Sukhjinder Arora

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES