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
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
Now time to create index.js file in your project’s /src folder.
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
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:
And you will see the following output in the terminal
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.
And edit our index.js file located in /src directory
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
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.
npm start and that’s it.
You can download the complete codes from GitHub.