Facebook created create-react-app utility to set up React Project with minimum effort and configuration. There is also a way to create your own setup for React project from scratch. Let’s start without wasting too much time.
Before starting, make sure you have installed npm on your computer. To check that run the following command npm -v this command outputs you the version of npm. NPM comes with NodeJs and you can install it from the official Node.js site.
Our folder structure is going to be like the below image
Use the followings commands to create the directory structure
mkdir react-app cd react-app mkdir src cd src mkdir components styles
Lets Initialize the Project:
First of all we are going to create packages.json with node package manager(npm)
npm init -y
Install Webpack and React:
Webpack is a module bundler that bundles all our project files into a single file. So lets install it to our project.
npm install webpack webpack-cli --save-dev
The above command will add and install webpack and webpack-cli to our project. After completing the about command time to install react.
npm install react react-dom --save
Installing Babel:
We need to install babel to work with React. Because babel transpile ES6 and JSX to ES5. We need to install following as a dev dependencies babel-core, babel-loader, babel-preset-env and babel-preset-react.
npm install @babel-core babel-loader @babel/preset-env @bable/preset-react --save-dev
Create index.js:
Now time to create index.js file in your project’s /src folder.
Create index.html
Create index.html in same location /src folder.
Entry and Output file:
Create webpack.config.js in the root folder /react-app, We have to define some rules for our loaders.
As you can see in the above code Webpack will bundle all our js code into index_bundle.js file in /dist directory.
Now we can add some loaders inside this file.
Add following codes inside your webpack.config.js file
You can that we have added the css-loader and style-loader but we haven’t installed them yet, So we have to add them with npm.
npm install css-loader style-loader --save-dev
.babelrc
Now create .babelrc file in the root of our project directory. This file will tell babel which preset to use for transpiling the code.
Compile file using webpack:
Add the following line inside the script object of the package.json file
We used –watch in development mode because whenever we change the source files, webpack will automatically complie the source files.
Now we can compile our project with the following command:
npm start
And you will see the following output in the terminal
Create App.js
Now move to the react coding part, Create an App.js file inside src/components directory and App.css file inside the src/styles directory.
App.css
And edit our index.js file located in /src directory
Installing Html-webpack-plugin:
html-webpack-plugin will generates the html file with js and css and writes the file to /dist/index.html
npm install html-webpack-plugin --save-dev
Now we have to add this plugin inside the webpack.config.js file
Installing webpack-dev-server:
webpack-dev-server helps us to open and reload the page automatically. We need to use npm to install the webpack-dev-server
npm install webpack-dev-server --save-dev
And change the package.json start script:
"start: "webpack-dev-server --mode development --open --hot"
–open flag helps to open the web browser and –hot flags helps to reload the webpage.
now run npm start and that’s it.
You can download the complete codes from GitHub.