React Js Fundamental and Create Your First React App: React Basic

Image for post
Image for post

In this article, I’m going to discuss the react js and how you can create your first react app.

Let’s begin…

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?

React js is an open-source Javascript library used for building user interfaces especially for a single-page web application. It is a web framework that is maintained by Facebook and a community of individuals.

Why do Javascript developers use it?

The answer to this question is that it specializes in helping developers build user interfaces. Developers can build a website page with this easily. It allows Js Developers to create a large web application that can change data, without loading the page. It is fast, scalable and simple. The components you create can be reused. React comes with two key features — JSX and Virtual DOM that helps javascript developers save their development time and cut down on the chance of coding error.

Beginners often ask, is React JS frontend or backend? The answer to the question is the frontend.

Before React JS, developers were stuck building UIs by hand with “vanilla JavaScript” or with less UI-focused React predecessors like jQuery. It took longer development times and there were plenty of opportunities for error and bugs.

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 -

  • Javascript is the core language used in ReactJS so learning fundamentals of Javascript and the latest version of Js is needed to get started with React Js.
  • 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.

node -v

and

npm -v

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.

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

These three commands have to follow creating a react app -

npx create-react-app my-app
cd my-app
npm start

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.

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

Now click on View tab which is in the menu bar and then you will get the drop-down list like the following photo.

Image for post
Image for post

Now click on Terminal then you see the terminal is opened like the following image.

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

When you get this now it is time to use the next command…

cd demo-project

In your case, it will be like cd Your-project-name that you have given. Now hit ENTER then paste the following command

npm start

Now all the steps that is needed to create a react app are done, you can see this in the terminal.

Image for post
Image for post

Besides that, a tab is opened on your browser like this.

Image for post
Image for post

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.

Written by

I’m a junior front end web developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store