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.
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.
npm i react react-dom webpack webpack-cli webpack-dev-server @babel/core @babel/preset-env @babel/preset-react --save-dev
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.
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.
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.
Before starting actual bundling of React code lets understand webpack loaders .
Loaders are transformations that are applied to the source code of a module. They allow you to pre-process files as you
npm install style-loader css-loader babel-loader --save-dev
css-loader :- The
import/require() and will resolve them.
style-loader :- It is used to Inject CSS into the DOM.
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 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 :- 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.
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-
Contribute to abhishekn123/React-setup-medium- development by creating an account on GitHub.
Above is the github Repository which used for the entire article.