Introduction To ReactJS

In this article, you will learn following things,

• What is ReactJS?
• What is the use of ReactJS?
• What are Prerequisites?
• How to install ReactJS?
  • How to check NodeJS version?
  • How to check NPM version?
• What is component in ReactJS?
• How many types of components in ReactJS?

What is ReactJS?

ReactJS is open-source javascript libraries developed by Facebook. It is V - View in MVC. ReactJS handle, manage and responsible for View-Layer.

Component base development is heart and main pattern of ReactJS.

Official Website: https://reactjs.org 

ReactJS Logo

What is the use of ReactJS?

ReactJS is known for its Virtual DOM (Document Object Model) manipulation, actual DOM is very slow as compared to Virtual DOM. So it makes it faster.

What are the Prerequisites?

You should have basic knowledge of HTML, CSS and Javascript.

How to install ReactJS?

For ReactJS first install NodeJS. After NodeJS we can create our ReactJS Application.

NodeJS Download Link: https://nodejs.org/en/download/ 

You can check in your download folder file: node-v16.17.0-x64.msi.

To confirm NodeJS installation and version check

node -v

npm -v

To Create ReactJS App

Syntax : npx create-react-app <ProjectName>

Example : npx create-react-app blog

What are Components in ReactJS?

“Component means small part of a whole thing”.

In ReactJS you can not imagine development without component. Development starts and ends with component. Component base development task much simplier and easier. ReactJS is View part of MVC, Reactjs is used for UI development. UI is completely managed and handled by component. You can divide the application work or module into small units or small development sets of components.

In ReactJS we can merge all or some components into one component that's really great thing.

In short, we can say component is a small logical group of code. Any type of component in ReactJS basically return a JSX (Javascript XML) code.

There are two types of Components,

• Class Component
• Function Component

Class Component

Class component use syntax of JavaScript ES6 class. Class component look more techie as compared to functional component. Class components are also called as Stateful components because it support state. Class component having life cycle and all the important properties of ES6 class and as its transferred to class base component.

Example

class Header extends React.Component {
    Render() {
        return < h1 > Hello, From Header < /h1>
    }
}

Function Component

Function component is easy way to develop. No component life-cycle methods are found in it. This is more similar and easy as writing a JavaScript function.

Function component also known as Stateless component because mainly used for rendering UI and accept data and display.

ReactJS development team suggests and recommends using more and more Function Component.

Example

function Header() {
    return < h1 > Hello, From Header < /h1>
}

Happy Learning and Coding. . .