React setup without create-react-app
Tags: webdev, javascript, beginners, react
Published: 2023-02-05 14:59:28

## If you are using create-react-app stopping using this for production applications because you may installs many inbuild dependencies and your application it causes heavy and slow applications for users . (npx create-react-app good for beginners).

#### If you want to become a really good you should know about DOM APIs and how DOM API works

### I’m here to help you, with how the setup React from scratch.

_Here is a step some steps to follow_

> Initialize your node project

```
npm init -y
```

> Install all webpack dependencies

```
npm install webpack
```

```
npm install webpack-cli
```

```
npm install webpack-dev-server
```

> if you want to learn more about webpack just go to this website https://webpack.js.org/ explore it and see more settings in webpack.

> Install react and react-dom

```
npm install react react-dom
```

```
npm install react-dom
```

_explore https://reactjs.org/ this website for learning react_

> Install babel

```
npm install — save-dev @babel/core @babel/preset-react
```

_you should explore this https://babeljs.io/ you love it_

> Install webpack loader dependencies

```
npm install — save-dev babel-loader html-loader style-loader css-loader sass-loader html-webpack-plugin sass
```

## Folder structure

### Create folder name with src inside this src folder you have to create three file App.js, App.scss and index.js then update your all three file code is given below .

## App.js

`import React from “react”;
const App = () => {
return <h1>Hello React</h1>
};
export default App;`

##App.scss

`h1 {
color: blue;
}`

## Index.js

`import React from “react”;
import ReactDOM from “react-dom”;
import App from “./App”;
import “./App.scss”;
const root = document.getElementById(“root”);
ReactDOM.render(<App />, root);`

> Create another folder public, inside this create one file index.html then update this file.

> Index.html

``` 
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>React</title>
</head>
<body>
<div id=”root”></div>
<script src=”bundle.js”></script>
</body>
</html> 
```

> Create a .babelrc file
> create .babelrc file in you root folder then update your file.

`{
“presets”: [“@babel/preset-react”]
}`

## Create webpack.config.js

> create webpack.config.js file in you root folder then update your file.

```
const path = require(“path”);
const HtmlWebpackPlugin = require(“html-webpack-plugin”);
module.exports = {
output: {
path: path.join(__dirname, “/dist”),
filename: “bundle.js”,
},
plugins: [
new HtmlWebpackPlugin({
template: “public/index.html”,
}),
],
devServer: {
port: 4000,
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: “babel-loader”,
},
},
{
test: /\.(sa|sc|c)ss$/,
use: [“style-loader”, “css-loader”, “sass-loader”],
},
{
test: /\.(png|woff|woff2|eot|ttf|svg)$/,
loader: “url-loader”,
options: { limit: false },
},
],
},
};
```

**Now your folder looks like ……**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ypi637vwdcse3tvtj1i.png)

> now type npm run start and see magic

> congratulations you completed a step …

> make more steps to making a good developer ……