In this article, I’m going to discuss the react js and how you can create your first react app.
After hearing the word “React” the first thing that came to my mind is What is React js? Why do Js developers use it? If you have the exact same questions that I had then no worry. I’m going to clarify all of these questions.
What is React js?
Beginners often ask, is React JS frontend or backend? The answer to the question is the frontend.
Create Your First React App
Before moving on some prerequisites are needed to get started with React Js.
Here are the few prerequisites to get started -
- You have core knowledge in HTML and CSS because HTML and CSS is used to create UIs for ReactJS Apps.
- You have to get familiar with Application Development Tools such as VS code etc.
Now in this part, I’m going to show you how you can create your first react app. Before working on react, you must have NodeJs and NPM installed in your computer. If you haven’t installed then you can download NodeJs LTS version from here. Then set it up in your machine and it is easy.
Now open your command prompt and run the following two commands.
After running those commands you see it shows you a version. If it doesn’t show you then try to reinstall NodeJs. If you see the version number like this then you are ready to move on.
As you are reading this article I assume that you are a developer and you have VS code installed on your computer.
In order to create a react app, you will have to use simple two or three steps. It seems easy, isn’t it?
Now, search on Google with the keyword “Create React App”. Then you will see search results like the following picture.
Among this, I’m going to follow the second website, you can follow the other websites too. If you click on the second website link like me and do some scrolling then you will get the “Quick Overview” section out there.
These three commands have to follow creating a react app -
npx create-react-app my-app
If you can use these three commands your first react app will be installed on your local computer.
Now open the VS Code…Click on the File (which is in upper left corner) then you will get a drop-down list like the following photo.
Now click on the Open Folder option, then you will get an option to choose your folder where you want to create your react app.
In my case, I select the projects folder because I want to create my react app inside this folder. After selecting the folder it will open it up in VS code like the following photo.
Now click on View tab which is in the menu bar and then you will get the drop-down list like the following photo.
Now click on Terminal then you see the terminal is opened like the following image.
Here you can see the folder you have selected is opened in the terminal. Now it is the time to run those commands. At first, we have to run this command in order to create a react app.
npx create-react-app my-app
One thing you have to remember is that when you run the command — npx create-react-app my-app this will not only create a project but also it will create a folder for you. So earlier we have only opened a folder where we want to keep this project and didn’t create a project folder. And you also have to remember in the place of my-app, you have to give your project name. Suppose, you want to create an app for ABC organization, then you can give, for example, ABC-Organization. In my case, I’m going to give my project name demo-project as I’m creating this project just to show you.
Now copy the code, paste it on the terminal, remove my-app and give your own project name like mine. After doing this click ENTER, then you can see it started creating your project. Now, wait until you get this like the following picture.
When you get this now it is time to use the next command…
In your case, it will be like cd Your-project-name that you have given. Now hit ENTER then paste the following command
Now all the steps that is needed to create a react app are done, you can see this in the terminal.
Besides that, a tab is opened on your browser like this.
Now you see this on your browser. Woohoo!!!!! you have done this.
Congratulation!! You have created your first react app.
If you like this article, please do share it.