Reactjs Application setup from scratch

Initial Setup

Lets open Command prompt inside our folder and run the below command for the initial setup.

npm init -y

Installing Bundlers

We are now using webpack as bundler library which is recommended by react community and babel compiler for transpiling javascript code in your application. Lets now install these libraries in our application as a development dependency.

npm i react react-dom webpack webpack-cli webpack-dev-server @babel/core  @babel/preset-env @babel/preset-react --save-dev

Structuring Application

lets now create webpack.config.js inside our application folder. Inside webpack.config.js we are going to give instructions to webpack and we mainly concentrate on this file throughout the article. Application will be structured as below.

Folder Structure

Configuring webpack.config.js

webpack.config.js
bundled file

Loaders

Loaders are transformations that are applied to the source code of a module. They allow you to pre-process files as you import or “load” them. Loaders can transform files from a different language (like TypeScript) to JavaScript or load inline images as data URLs.in our application we are going to use style-loader ,css-loader and babel-laoder. lets install them in our application.

npm install style-loader css-loader babel-loader --save-dev

Plugins

plugins can be leveraged to perform a wider range of tasks like bundle optimization, asset management and injection of environment variables.in our setup we are going to use html-webpack-plugin.

npm install --save-dev html-webpack-plugin 

Running Application

To turn our application live we need to tell webpack-dev-server which we were previously installed .lets configure webpack.config.js file. Add below tag inside package.json file inside script tag.

"start": "webpack serve"

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Abhishek N

Abhishek N

Abhishek is a Software developer who is passionate about learning technology related stuff and implementing it in real world.