Simple Introduction to R E A C T. J S

React is a JavaScript library for building user interfaces.

1. React Create Element:

• Call React.createElement( ) and describe its arguments.
• Use ReactDOM.render( ) to render an element.
• Add child elements and nested child elements.
• Pass properties to an element.

2. React.createElement( ):

React.createElement ( type, [props], […children]) create and return a new react element of the given type.

Example :

3. React.render( ):

The React.render( ) method used to render react element or component to the Browser DOM.

Example:

4. JSX:

JSX sands for JavaScript XML. JSX allows us to write HTML in React. JSX is actually a compromise, instead of writing React components using the React.createElement( ) syntax, we can use it syntax similar to HTML and then use a transpiler to translate it into React.createElement ( ) calls.

Example:

Same things in react.createElement( ) API:

5. The Virtual DOM:

The Virtual DOM is a virtual delegation of the DOM. A virtual DOM object has the properties as a real DOM object, but it lacks the real things power to directly changable what’s on the screen.

Manipulating the virtual DOM is much faster.

6. Diffing Algorithm:

Diffing algorithm is a algorithm which work to compare between two virtual DOM and update to the real browser DOM based on the comparison result. when diffing two trees - React 1st compares the 2 root elements. The attitude is different depending on the types of the root elements.

7. Hooks:

Hooks are special function in React which can only used React functional component not in class component. Every hook begins “use” word.

Example:

8. Class Component:

This is the bread and butter of most neoteric web apps built in ReactJS. These components are simple classes.

Example:

9. Optimizing Performance:

React uses several clever techniques to minimize the number of costly DOM operations necessary to update the UI. For multiple applications, using React will be lead to a fast user interface without doing much work to specifically optimize for performance.

10. Prop-Types:

PropTypes defines type and which props required. This benefits the future developer using your components in two ways —

• You can easily open up a component and check that props are required and what type they should be.