Image for post
Image for post

What is React?

Facebook recently launched their new interface. Which is nice and attractive. As a user, I think it’s good. Because ultimately user experience is the main priority for web designers or web developers. Why we are talking about Facebook???

React is created by Facebook. And React is a User Interface library. Many of us are confused about the library and framework. Just set it to your mind that React is a Library, not Framework.

Now make it clear that what is Library and what is Framework!!

Library is a set of reusable functions used by a computer program. And Framework is a piece of code that builds the architect of your project. You can call your library but your framework can call you.

ReactJS is a Library of JavaScript and AngularJS is a framework of JavaScript.

Image for post
Image for post

What is JSX?

const element = <h1>Hello, React!</h1>;

Wait a sec!! what is that? Using HTML tag line in a variable? Yes!!! This funny but useful thing is called JSX. JSX stands for JavaScript XML. React doesn’t need utilizing JSX, yet a great many people think that it’s supportive as a visual guide when working with UI inside the JavaScript code. It likewise permits React to show more valuable error and warning messages. Understand that thing with an example.

We declare a variable called message and then use it inside JSX by wrapping it in curly braces:

const message = “Hello, React! “;
const element = <h1> {message }</h1>;

VDOM(Virtual DOM)

Before going to VDOM, let’s talk about DOM. DOM means Document Object Model. When a web page is loaded, the browser makes a Document Object Model of the page.

Image for post
Image for post

A Web page is a document. This document can be either shown in the program window or as the HTML source. Be that as it may, it is a similar document in the two cases. The Document Object Model (DOM) speaks to that equivalent document so it tends to be controlled. The DOM is an object-situated portrayal of the site page, which can be altered with a scripting language, for example, JavaScript.

DOM control is the core of the advanced, intuitive web. It is slower than most JavaScript activities. To address this issue, the individuals at React promoted something many refer to as the virtual DOM.

How does it work? When JSX render every single virtual DOM object gets updated. When the virtual DOM has been updated, then React compares the virtual DOM with a virtual DOM which one is previously-stored before the update. Comparing between new virtual DOM with a pre-update version, React figures out which virtual DOM objects have changed. This process is called “diffing.”

Some Fact About React

  1. It’s not a framework# React is not a framework, Its a library of JavaScript

How To install React?

Start a project with React is actually very easy. Just execute some command in command promote or VS code terminal. If we want we can create a project file. Then if you want to create a project with VS code follows the steps:

  1. Open VS code

The basic configuration is ready to explore now.

Optimizing Performance

Sometimes you face some problems like the web page work slowly or render data slowly. In that case, we need to optimize our performance. React. React uses several clever techniques to minimize the number of costly DOM operations required to update the UI.

  1. Use production build

Context

In an app maybe we need to pass data from one component to another. This can be awkward for specific kinds of props that are needed by numerous segments inside an application. But Context makes this work easy. Context gives an approach to share esteems like these between components without having to expressly go a prop through each level of the tree.

Handle Event

On a web page, we see many types of user interaction, like mouse hover, mouse click, keyboard enter, and others. The handling event on DOM and Handling event on React is quite similar. But there is some syntax difference in react handling.

  1. Using camelCase, rather than lowercase in react.

<button onClick={clickHandler}>

Click on me </button>

React Hook

In React 16.8 Hook introduces. It’s very useful for development. Hooks unravel a wide assortment of apparently detached issues in React. It’s difficult to reuse stateful logic between components. But React allows you to reuse stateful logic without changing your components. React allows you to use more of React’s features without using too many classes. Hooks are capacities that let you “hook into” React state and lifecycle highlights from work components. State Hook and Effect Hook are very useful hooks.

Hook rules

Hooks are JavaScript functions, yet you have to keep two principles when utilizing them.

  1. Only Call Hook at the top level.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store