Build & run React Application with Webpack – React Webpack example

Webpack is a module builder that does not run during our page but our development. It takes modules with dependencies and generates static assets representing those modules (bundles) that will be understood by browsers. Webpack is powerful and highly configurable. In this tutorial, we’re gonna look at way to build and run a React Application using Webpack.

More practice:
React Modal example
Style React Application – apply SCSS/CSS files to React with Webpack

Overview

In the former React Example, we have build React Application using Babel, then run it with live-server:

react-webpack-example-old-app

Today, we will build and run a React Application with Webpack that also includes React, Babel, Webpack devtool and devServer configuration, then we can run the app with live-server for public folder:

react-webpack-example-new-app

React Application with Webpack

Prepare folders and files

Create Project folder with files as below:

react-webpack-example-prepare-folders

index.html

We will build the source code from src folder to public/bundle.js file.

Indicate necessary modules & Configure scripts

Open package.json:

This file includes necessary “dependencies” (modules) for compiling, building and running the app.
We also configure “scripts”, so when we run cmd:
yarn run build: bundle.js file is generated automatically inside public folder.
yarn run serve: the app now runs using live-server with public folder.
yarn run dev-server: the app runs the same way as live-server does, without bundle.js. It doesn’t care bundle.js file created from yarn run build, it use Webpack with a development server that provides live reloading.

Configure Webpack & Babel

Open webpack.config.js:

For transforming JSX into createElement calls, we need a configuring step.
Open .babelrc:

Install modules

Point cmd to project folder, then run cmd: yarn install.

react-webpack-example-yarn-install

node_modules folder now appears in project folder.

Check result

– Open app.js:

– Run cmd: yarn run dev-server.
react-webpack-example-run-dev-server-test

– Open Browser with url http://localhost:8080/:
react-webpack-example-run-dev-server-test-browser

– Now stop the terminal, then run cmd: yarn run build.
react-webpack-example-run-build

bundle.js file is generated automatically in public folder.
Run cmd: yarn run serve and check result in Browser:
react-webpack-example-run-dev-server-test-browser

Note Application with Webpack

At this step, we’re gonna build the same Note Application in the former React Example, but we split all components to files:

react-webpack-example-new-app

With old example, we only have one app.js file for all components:

Components

New React App with Webpack has one file for each component:

Header.js

Note.js

Notes.js

Action.js

NoteApp.js

app.js

Run & Check result

– Run cmd: yarn run dev-server.
react-webpack-example-run-dev-server-result

– Open Browser with url http://localhost:8080/:
react-note-app-webpack-result

Source Code

ReactWebpackHelloWorld

By JavaSampleApproach | April 5, 2018.

Related Posts


Got Something To Say:

Your email address will not be published. Required fields are marked *

*