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.

Document Object Model
Virtual DOM

What is JSX?

const greeting = <h1>Hello, Everyone!</h1>;
// 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'),
);

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.

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

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/>)
}

An enthusiast JavaScript and React developer.