First React.Js App and Folder Structure

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

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

Let's create our first react app! 🚀

Prerequisite 🍄

I want you to install node 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, it's awesome.

Now be a developer and open your terminal 👩‍💻

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

1. Now navigate inside your folder

cd your_app_name

1. 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!! 🔥🔥

Hurrayyyyy!!!! 😍😍

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

• So, in your folder you can see a file Package.json,📄 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. 🔥

Now pay close attention ❗

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,

• 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.

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.🥂

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. 😁 😁

I hope you are running your react app now. 😁😁

See you in the next one. 👋

You can connect with me on twitter 😃