First React.Js App and Folder Structure
Tags: react, javascript, webdev, tutorial
Published: 2022-06-23 13:01:01

**I am excited to shout out loud that, "Yayyy!! I made my first react app"** :smiley::smiley::smiley::smiley::smiley:

Just explore with me, it will be fun and you will be confident. 


## Let's create our first react app! :rocket:

## Prerequisite :mushroom:

I want you to [install node](https://nodejs.org/en/) in your system, it will make your ReactJs life way to easy. Node provides package manager which is **NPM -> Node Package Manager**. It manages all the dependencies and third party packages.

I hope you have a compiler. If not, [install VS Code](https://code.visualstudio.com/download), it's awesome.

**Now be a developer and open your terminal** :woman_technologist:

1. Go into your terminal, to create a react app, run the command

```
npx create-react-app your_app_name
or
yarn create-react-app your_app_name
```

2. Now navigate inside your folder

```
cd your_app_name
```

3. Now inside your folder, run command

```
npm start
or
yarn start
```
Now open your browser and on **localhost:3000** you can see your **very first react app**!! :fire::fire:

**Hurrayyyyy!!!!** :heart_eyes::heart_eyes:

Now let's understand the folder structure for a seamless journey. :open_file_folder:

- So, in your folder you can see a file **Package.json**,:page_facing_up: a very important and useful one. It holds all the meta data of dependencies, version of your packages, scripts of your react app.

According to your project building you can see **package.lock.json** if you have used npx and **yarn.lock.json** if you have used yarn to create your react app. We can leave it as it is.


- Now you have **node_modules** file where all your dependencies is installed.

- Now let's go into the **Public** folder, where you have few files but our concern is only for **index.html**. It is the only **HTML** file in our folder.

_So the thing is that, React is a **Single Page Application -> SPA**  it means everything will be dynamic in browser but it is the only file that served up to the browser. You can take it a container file for every single component in your react folder, whether it is 3 files of 30,000 files._ :fire:

### Now pay close attention :heavy_exclamation_mark:

In the **index.html** file we have a div in the body tag where **id="root**, you can see that in line no.31 in the attached image. Keep it in your mind I will tell you about it. Before that go to src folder,


![index.html](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i07xu9ljeyx5y0vyesi6.png)
 

- In the Src folder, the most going to be used folder. In this you can see **index.js** file , and in line no.8 the DOM element that is being used is **root**, which is the same that you just saw in **index.html** file.

![index.js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xg7hsk3e1wlly62arjev.png)

So everything that is in the DOM node is being handled by **root** and here **App.js** is being served to the root. 

So let's wrap by saying that **root** element will be served to browser and content in **App.js** will be the view of that, like whatever you see in the browser. 

Now you can add and edit anything in the App.js file and see the change in the browser.:clinking_glasses:

_There are other files like logo, css file, which I suggest you to explore_  

So on this note, we have created our very first react app and also got to know about the folder structure. You will know more things when you start doing by your own. :grin: :grin:

I hope you are running your react app now. :grin::grin:

See you in the next one. :wave:

You can connect with me on [twitter](https://twitter.com/naweli_verma) :smiley: