Reactjs Application setup from scratch

How to setup without using any wrapper library

Hi everyone, In this article we are going to understand how to setup react application from scratch without using any wrapper library such as create-react-app. lets begin with empty folder named REACT-DEMO.

Initial Setup

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

npm init -y

This will now create package.json file inside our application folder.

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

webpack :- It is a static module bundler for modern JavaScript applications

webpack-cli :- Webpack can be configured with webpack.config.js. Any parameters sent to the CLI will map to a corresponding parameter in the configuration file.

webpack-dev-server :- Development server that provides live reloading.

@babel/core :- Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.

@babel/preset-env or preset-react :- It is a smart preset that allows you to use the latest JavaScript without needing to micromanage which syntax transforms (and optionally, browser polyfills) are needed by your target environment(s).

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

Entry :- An entry point indicates which module webpack should use to begin building out its internal dependency graph.

Output :- The output property tells webpack where to emit the bundles it creates and how to name these files.

contenthash will generate unique id prefix to the bundled file in our case it will generate as shown below for every build new contenthash will be generated.

bundled file

Before starting actual bundling of React code lets understand webpack loaders .

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

css-loader :- The css-loader interprets @import and url() like import/require() and will resolve them.

style-loader :- It is used to Inject CSS into the DOM.

babel-loader :- This package allows transpiling JavaScript files using Babel and webpack.

lets now add some react code and try to bundle for that I was going to create two files index.js and App.js inside src folder. which shown below.

now we need to alter the webpack.config.js to bundle. We need to tell Babel compiler our code includes react so whenever you came across react code use babel-loader to compile it. Configuration will looks as below.

In above configuration we are telling webpack whenever you came across file ending with .js use babel-loader to compile the file and then babel-loader internally uses presets to transform vendor library syntax. Ex:-React.

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.

html-webpack-plugin :- This simplifies creation of HTML files to serve your webpack bundles. This is especially useful for webpack bundles that include a hash in the filename which changes every compilation. Install the plugin to our application by running below command.

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

After installing the plugin we need to tell the webpack how it should behave for that first we need to create index.html file inside inside public folder. The file looks as below.

lets now configure the webpack.config.js file. This file will look as below after configuring the 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"

the output will be show as below.

lets add now some css to make the beautiful. Create App.css inside src folder and add some styles . the file show below.

The Final output will look as below.

GitHub - abhishekn123/React-setup-medium-

Above is the github Repository which used for the entire article.