You need to know about React JS

ReactJS is a javascript library, so no, it’s not a framework. Its primary purpose is to assist in creating interactive and stateful UI components that developers can reuse.

If you consider a software design pattern like MVC (Model–view–controller), you can consider React as the application’s view.

React can also work on the server-side and render a page on the server before displaying it to the client.

To work with ReactJS, we need a package manager like NPM or Yarn to install all the files en dependencies required. We can use the command create-react-app to quickly start developing our application since it creates an environment with all the basics that we need. We have to set the name of the application when using that command.

npx create-react-app my-first-reactapp
cd my-first-reactapp
npm start //If using npm
yarn start //If using yarn

React Environment Setup

in this section, we will learn how to set up an environment for the successful development of ReactJS application.

Pre-requisite for ReactJS

1. NodeJS and NPM
2. React and React DOM
3. Webpack
4. Babel

React Features

Currently, ReactJS gaining quick popularity as the best JavaScript framework among web developers. It is playing an essential role in the front-end ecosystem. The important features of ReactJS are as following.

• JSX
• Components
• One-way Data Binding
• Virtual DOM
• Simplicity
• Performance

Virtual DOM

One of the main characteristics of ReactJS is that it makes a copy of the DOM (Document Object Model) called ‘Virtual DOM (VDOM)’ to work within your application. React makes updates to the UI much faster and fluid by updating just the components that need to be updated and not the whole page.

JSX

all of the React components have a render function. The render function specifies the HTML output of a React component. JSX(JavaScript Extension), is a React extension that allows writing JavaScript code that looks like HTML. In other words, JSX is an HTML-like syntax used by React that extends ECMAScript so that HTML-like syntax can co-exist with JavaScript/React code. JSX provides you to write HTML/XML-like structures (e.g., DOM-like tree structures) in the same file where you write JavaScript code, then the preprocessor will transform these expressions into actual JavaScript code. Just like XML/HTML, JSX tags have a tag name, attributes, and children.

<header>
<Component1 />
{
console.log(“Data Validation”);
}
</header>

Component

One of the Key elements of React is Components. If you’re going to work with this library, you need to think about components and how they will interact with each other.

import React from “react”;
const Component1 = () =>{
return (
<h1> This is a basic component </h1>
);
};
export default Component1;

Functional Component

a functional component is also known as a stateless component because they do not hold or manage the state. It can be explained in the below example.

Class Component

The class component is also known as a stateful component because they can hold or manage local state. It can be explained in the below example.

React Events

just like HTML, React can perform actions based on user events. React has the same events as HTML: click, change, mouseover, etc.

Adding Events

React events are written in camelCase syntax:

onClick instead of onclick.

React event handlers are written inside curly braces:

onClick={shoot} instead of onClick="shoot()".

<button onClick={shoot}>Take the Shot!</button>