Building your first React App

What is React Js?

React is an open-source, front end, JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications. (Wikipedia)

Before you dive right into Reactjs, it is recommended that you have some knowledge of the following things:

HTML

CSS

DOM

ES6

Node.js

Npm

Building Apps with React

React provides its users very easy to use, ready to go functionalities, which makes it super easy to build modern web pages. Interesting thing about it that you don’t need to learn new language if you have worked with HTML, CSS & JAVASCRIPT. React’s unique syntax provides you a mixture of HTML tags and Javascript as well. It support JSX (Javascript XML), which allows you to write Javascript code within HTML. Take a look below:

In between <h1></h1> tag, which is HTML tag, a method formatName(user) is called which is in Javascript. Hence, to include Javascript code within HTML tags, we can use curly braces {}.

Create your first React App

Make sure you’ve installed latest version of Nodejs before you get on React (We will cover what NodeJs is in other blog).

Installing NodeJs

Go to NodeJs website and install the latest version of Node from there.

Easy? Let’s move on.

Install VSCode on your system if you do not have it yet. Procedure is as simple as it was in NodeJs’ case.

Once downloaded, install VSCode and run it. You’ll land on VSCode’s new window. Click the terminal from the top menu and click new Terminal:

There you go, you are all set to create your first react App. Refer here if you want to start your project in some other directory.

Run the following commands:

npx create-react-app my-first-app

It will take only about a minute before it shows you success message. Once done, use:

cd my-first-app

npm start

THATS IT! Once your app starts in the browser, you’ll see the React’s welcome page, so you also have a basic project structure to start with.