Create-React-App from Scratch
Tags: react, webpack, babel, javascript
Published: 2020-07-23 11:12:16

Learn how to create Your First React App From Scratch.

Building UI nowadays has become relatively easy as it used to be with the evolution of frontend javascript libraries and frameworks.**React**, **Angular**, **Vue** are some of the prominent ones.React being the most widely used one.



Getting started with react requires some configuration with **webpack** and **babel**.Thankfully developers of react have provided us with a boilerplate react app to get started instantly.To get started assuming you have one of **npm** or **yarn** package package manager.



```
npx create-react-app YOURAPPNAME

or

yarn create-react-app YOURAPPNAME

```


This will create a biolerplate react app .

```

npm start

```

Visit localhost:3000 to start your react-app.



**But if you want to get started from scratch then this article is for you.**


How to get started with react from scratch?


**Step 1:**Create a folder of your desired name and inside that folder run

```

npm init -y

```

This will create a starter package.json file


**Step 2 :**Install necessary dependencies

```

npm i --save-dev webpack webpack-cli webpack-dev-server @babel/core babel-loader @babel/preset-env @babel/preset-react html-loader html-webpack-plugin inline-source-map


npm i --save react react-dom

or 


yarn add -D webpack webpack-cli webpack-dev-server @babel/core babel-loader @babel/preset-env @babel/preset-react html-loader html-webpack-plugin inline-source-map


yarn add react react-dom


```


**Step 3:** Create a ***webpack.config.js** file alongside package.json file.


```

var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  plugins: [new HtmlWebpackPlugin()],
 devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 3000,
    hot:true,
    liveReload:true
  },
devtool:'inline-source-map,
module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
      },
{
      test: /\.html$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'html-loader',
      }
    }
  ]
}
};


```



**Step 4:** Create a src directory and index.js ,App.js ,index.html inside it.





**Step 5:** Babel config.Create a .babelrc file in your root folder.


```
 {presets: ['@babel/preset-env',@babel/preset-react]}

```


**Step 6:**create react app

```

**index.js**

import React from 'react'
import {render} from 'react-dom'
import App from './App

render(<App/>,
documentElementbyId('root')
)


**App.js**

import React from 'react'

export default function App(){
return (<div>Hello</div>)
}


**index.html**

<html>

<head>
</head>

<body>

<div id='root'></div>

</body>

</html>

```


**Step 6:** Create scripts in package.json

```

"start":"webpack-dev-server",
"build":"webpack --watch"


```



All Set.



```
 npm start 
```


For production build


```
 npm run build
```

This is the setup behind the create-react-app.


Check out my website [C7ech](https://c7ech.xyz) from more.