Introduction of React

React is a JavaScript library for building user interfaces. React.JS is an open-source, component-based front end library. It designs simple views for each state for any kind of application. A react application is made of multiple components, each responsible for rendering a small, reusable piece of HTML. Components can be connected with other components to allow complex applications to be built easily.

Note: React is not a framework. It is just a library developed by Facebook to solve some problems that we were facing earlier.

DOM

DOM, full meaning is Document Object Model. It is a World Wide Web Consortium standard logical representation of any webpage. In easier words, DOM is a tree-like structure that contains all the elements and it’s properties of a website as it’s nodes. It represents the page so that programs can change the document structure, style, and content. A Web page is a document. This document can be either displayed in the browser window or as the HTML source. But it is the same document in both cases. The Document Object Model (DOM) represents that same document so it can be manipulated. The DOM is an object-oriented representation of the web page, which can be modified with a scripting language such as JavaScript.

Functional Components

Functional component is simple javaScript functions that simply returns html User interface. These are typically arrow functions but can also be created with the regular function keyword. There is no render method used in functional components .Functional components can accept and use props.

This is a functional component written using ES6’s arrow function. It will be returns an H1 tag with the text “hello functional component”

Class Components

Class component is regular ES6 classes that extends component class form react library. Sometimes called “smart” or “stateful” components as they tend to implement logic and state.class components must have render() method returning html. You pass props to class components and access them with this.props. Let’s see Example:

React Hook

React Hooks were invented by the React team to introduce state management and side-effects in functional components. It’s their way of making it more effortless to use only React function components. React Hooks enable us to write React applications with only function components. Thus, there is no need to use class components anymore. Let’s see Example:

React State

The heart of every React component is its “state”. React components have a built-in state object. the State of a component is an object that holds some information that may change over the lifetime of the component. When the state object changes, the component re-renders. The state object is initialized in the constructor:

React Side Effects

Sometimes in React you want to trigger a side effect (such as an API call) in response to a prop changing. A common way of handling this is to use components that will receive props .

Let’s start with an example. We have a component, MyFirstComponent that use useEffect for retrieve data from an API:

React Props

React is a component-based library. In some cases, those components need to communicate (send data to each other) and the way to pass data between components is by using props.

“Props” is a special keyword in React, which stands for properties and is being used for passing data from one component to another component. Let’s see Example:

React JSX

JSX is a preprocessor step that adds XML syntax to JavaScript. JSX allows us to write HTML elements in JavaScript. It is faster than normal JavaScript as it performs optimizations while translating to regular JavaScript. JSX looks like a regular HTML in most cases. Let’s see Example: