All you need to know about React.

react mechanism

Virtual DOM

As a beginner react developer you might hear the word Virtual DOM. The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. This process is called reconciliation.

When we render an HTML file in the browser, the browser creates a DOM (Document Object Model) of the page. It looks like a dom tree.

Document Object Model

But when we change an HTML element it rerenders the full dom tree. Think about when we need thousand of change HTML element it renders thousand times. It is a slow process. So, In reacts when we change an HTML element before rendering the actual dom first react virtual dom compare the state change. It takes snap short when a component mounts in dom and when the component state changes its compare two-state and only change the elements, does not rerender the full dom tree.

Virtual DOM

What is JSX?

const greeting = <h1>Hello, Everyone!</h1>;

Well, JSX is a javascript extension. It is neither a string nor HTML. But look like an HTML. React recommend using JSX to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript.

// using JSX
const name = 'Bob';
const element = <h1>Hello, {name}</h1>;
ReactDOM.render(
element,
document.getElementById('root')
);
// using javascript
ReactDOM.render(
React.createElement(
'h1',
null,
'Hello Bob',
),
document.getElementById('mountNode2'),
);

Look at the two example. They are identically same. But using JSX is much more easier than plan javascript. When you are using JSX behind the sense it converted to plain javascript. If you are create a react app using ‘create-react-app’ command you don’t think about anything to convert JSX, Bable js will automatic convert your code.

What is HOC?

Higher-order components (HOCs) in React were inspired by higher-order functions in JavaScript. A HOC is an advanced technique for reusing logic in React components. It is a pattern created out of React’s compositional nature.

Higher-order functions in JavaScript take some functions as arguments and return another function. They enable us to abstract over actions, not just values, They come in several forms, and they help us to write less code when operating on functions and even arrays.

The most interesting part of using higher-order functions is composition. We can write small functions that handle one piece of logic. Then, we can compose complex functions by using the different small functions we have created. This reduces bugs in our code base and makes our code much easier to read and understand.

import React from 'react';
// Take in a component as argument WrappedComponent
const higherOrderComponent = (WrappedComponent) => {
// And return another component
funtion newComponent {
return <WrappedComponent />;
}
return newComponent;
};

We can see that higherOrderComponent takes a component (WrappedComponent) and returns another component inside of it.

Data Flow

In React data goes down the tree of the components. If you want to pass data from parent to child component you need to use props.

import React from 'react';const parentComponent = () => {
return(
<childComponent name={Bob} age={35}/>
)
};
const childComponent = (props)=> {
return(
<div>
<p>My name Is {props.name}.<p/>
<p>I am {props.age} years old.<p/>
<div/>)
}

In some case, you need to send data to siblings. In that case, you need to declare your state in the parents component and pass data to siblings.

An enthusiast JavaScript and React developer.

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