Many times you may have wondered, “Alright I have learned the vanilla JavaScript, now which framework should I learn next”. Often after hearing features the path divides there and some choose Angular, some Vue and some prefer the React to proceed further. There are many options, but these are kind of favorite choices. When I finished learning JavaScript, I thought what should I do now. After hearing features, I chose the React. So you may ask now what have you seen that made you so keen in this area. But before that, do you know what React is?

What is React?

React is a JavaScript library which is used to build user interfaces. It is maintained by Facebook and a community of individual developers and companies. 

Why Developers Prefer it

Well, first of all, it works component-wise, which makes it reusable, organized and easy to handle. It has a great community, and its popularity is growing faster. It has a JSX feature which we will learn soon and also it can be used in web applications or native mobile applications that make it versatile and efficient.

So let’s begin and create some fantastic things out of React.

Set It Up

If you don’t want to set up anything, go with online tools. You can use Codepen or Glitch. You will have to import the React and React DOM from the setting. To unlock the usage of some special features and syntax, in the JavaScript preprocessor dropdown, you will have to choose Babel.

Create-react-app

If you want to use your own editor, you will have to use create-react-app. The create-react-app is an environment that is preconfigured, and it generates the boilerplate version of React application.

Step 1:

First of all open terminal and go to the location where you want to open your first project. Run 
create-react-app <project-name> 

Step 2:

Next, go to the file that you have just created and run npm start in terminal.

After running npm start, you will be given a port number like below.

Click that link, and you will see this page with a nice React logo and some text. Now we are ready to dive into React.

You will have to add React Developers Tool extension. It helps to inspect certain React elements.

Did I mention?

Sometimes it doesn’t work perfectly after following step by step. In that case, first of all, update your npm and Node.js. If still, you face difficulties, let me know, I will do my best to help.

We are wrapping up for today. In my next blog, we will create our very first component, and also we will learn about JSX.