# Build a React App Without create-react-app (Using Parcel)

Set up a React app from scratch with npm, react-dom and the Parcel bundler, and see what create-react-app was doing for you behind the scenes.

Published: 02nd August 2023

Let's build our react app from scratch we'll not use npm create-react-app, but instead, we'll build our app from scratch and see what happens behind when we enter npm create-react-app.

So let's start by making a new directory

```jsx
mkdir react-from-scratch
cd react-from-scratch
```

In this we will initialize package.json

```jsx
npm init -y
```

Next, we will install React and React-DOM packages using npm.

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

We will set up the folder structure as same as we get from create-react-app our src will contain index.js (which you can also name as App.js or whatever you like).

- make a new folder src
- In src make a new file index.js
- In the source folder ie your main folder create index.html

## Now the most important part!! PARCEL (BUNDLERS)

We need a bundler for our react-app to work. Bundlers are used in both development and production. There are many bundlers out there like vite , parcel, webpack
For our app we are going to use PARCEL for our app
Bundlers do many things behind the scene

- Hot module reload -keeps track of every changes in the app.
- Image optimization
- Caching
  and many more functionality are offered by Parcel

NOW WE KNOW WHAT ARE BUNDLER LETS INSTALL PARCEL INTO OUR APP.

```jsx
npm install --save-dev parcel
```

Till now you folder structure should look like this-


<Filesystem
  size="small"
  withCounters={true}
  items={[
    {
      name: "node_modules",
      items: [],
    },
    {
      name: "src",
      items: [],
    },
    {
      name: "index.html",
    },
    {
      name: "package-lock.json",
    },
    {
      name: "package.json",
    },
  ]}
/>
NOW put this code in you index.html file-

```html showLineNumbers title="index.html"
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My React App -from Scratch</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="./src/index.js"></script>
  </body>
</html>
```

And put this code in src>index.js file-

```jsx showLineNumbers title="src/index.js"
import React from "react";
import ReactDOM from "react-dom";

const App = () => {
  return (
    <div>
      <h1>Hello, React!</h1>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));
```

Now run this command to run your app locally-

```text showLineNumbers title="terminal"
npx parcel index.html
```

Congratulations you have successfully made a react app from scratch.

Thank You

Original page: https://faisalhusa.in/blog/createreactapp