Hello React

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.

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.

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
  2. Its JavaScript# To generate markup dynamically in React you also use JS.
  3. JSX# You can simplify your code with JSX
  4. Declarative # In React you use declarative style to write your components
  5. State# We talk about static data passed down the components tree. But we can use Stateful components.

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
  2. Select the “File” option from the menu bar.
  3. Select the “Open Folder” option from File.
  4. Create a folder or if you already create a folder then click and open it.
  5. Open Terminal
  6. In terminal write- npx create-react-app my-app(app name here instead of my-app) it will take some time to prepare.
  7. Go through the created React project folder. Type cd <folder name> and enter.
  8. After completing this step just go to the created folder and type in terminal npm start
  9. It will open in your browser with https://localhost.3000

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
  2. Use npm run build
  3. Single file build
  4. Install the terser-brunch plugin
  5. Rollup production build


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.
  2. Pass a function as an event handler.

<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.
  2. Only Call Hook from React function.




Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Live Notes Session — Descript Season 2 Announcements -My Notes of All this Jazz!

Building a real-time smile detection app with deeplearn.js

When I was trying to install a reactjs web application, an error occurred.

Build the static blog with Next.js and Markdown

A deeper look into React fundamentals

Automatic testing for React with Storybook and Jest

Immutable objects with property descriptors in javascript?

Web Development in JavaScript: Understanding the Use of Props in ReactJS: Props and Children

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
sadman sakib jisan

sadman sakib jisan

More from Medium

React class components

React Hooks

How to Customize the React TreeView Component