How To Get Started With React JS

Introduction

This article will guide you on how to get started with and learn React js. This tutorial on React js is the first in a series of articles I am posting.

React js is an open source declarative and flexible JavaScript library from Facebook for building user interfaces. React is neither a complete framework nor a language.

Why React

React is declarative, flexible, and easy to learn. React is maintained by Facebook and a community of individual developers. Nowadays in IT companies, there is a huge demand for React developers.

We can use React JS to develop a mobile application as well as a SPA (Single page application). We can create complex applications by using additional libraries.

React is purely component based, means we can design a complex UI by writing small piece of code in component and we can reuse it as well.

Prerequisites of React

Before we start with React JS we should have knowledge of CSS, HTML & JavaScript, and JS EC6.

Technical requirement

From a technical perspective, we require a code editor and Node JS.

The latest Node.js should be installed on your computer. If it is not installed, then please visit here.

To write the code, I prefer to use the VS Code. You can download the Visual Studio Code from here.

First, we will install Node.js. Once installation is finished for Node.js we can use create-react-app in your command prompt window to create your first react js application.

Step 1

Open command prompt and go to the directory where you want to create your first react js application using below command.

cd <directoryName> (example cd Desktop) If you want to create app on desktop

Step 2

Create react project with below command. Hellowreact is the name of project/folder. It will install all dependencies as well.

npx create-react-app hellowreact

Once done you will see the below information in the terminal widow. It means your first project has been created and you are ready to use it.

 Step 3

Just go to the folder where the project/folder got created and you will find files and folder like below.

Summary

In this article, we have covered the basics of React.js, its features, and its prerequisites. In the next article, we will go through the folder structure created by create-react-app generator.