What is React JS?

React (AKA React.js or ReactJS) is a free and open-source front-end JavaScript library for building user interfaces (UI) based on components by Facebook Inc. It is maintained by Meta (formerly Facebook) and a community of individual developers and companies. React can be used to develop single-page, mobile, or server-rendered applications with frameworks like Next.js. 

Prerequisite

Before learning with React, you should have knowledge of:

• HTML
• CSS
• JavaScript
• Knowledge with the new JavaScript features introduced in ECMAScript 6 (ES6)

Example

function SwButton() {
  return I'm a button;
}

Set up a React Environment

Firstly, to run react code on your system you have NPM and Node.js installed. The create-react-app is an officially supported way to create React applications. Install create-react-app by running below command in your terminal:

C:\Users\Your Name>npm install -g create-react-app

Run below command to create a React application named reactapp:

C:\Users\Your Name>npx create-react-app reactapp

Run the React Application

Run below commands to run react application reactapp:

C:\Users\Your Name>cd reactapp

C:\Users\Your Name\myfirstreact>npm start

After running above command you will see in a browser window will pop up with your newly created React App! If not, open your browser and type localhost:3000 in the address bar.

How does React Work?

React creates a VIRTUAL DOM (VDOM) in memory. Instead of manipulating the browser’s DOM directly, React creates a virtual DOM in memory, where it does all the necessary manipulating, before making the changes in the browser DOM. React only changes what needs to be changed! React finds out what changes have been made, and changes only what needs to be changed.

Quick Start

If you’re interested in playing around with React, you can use an online code playground. Try a Hello World template on CodePen, CodeSandbox, Glitch, or Stackblitz. If you prefer to use your own text editor.  

React Component

There are two types of components in react:

1. Function Component
2. Class Component

Function Component

Function Components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen. In React, function components are a simpler way to write components that only contain a render method and don’t have their own state. Instead of defining a class which extends React.Component, we can write a function that takes props as input and returns what should be rendered. Function components are less tedious to write than classes, and many components can be expressed this way.

Example

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Class Component

Example

Class Components are ES6 classes. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.

class Welcome extends React.Component {
    render() {
      return <h1>Hello, {this.props.name}</h1>;
    }
  }