Postmortem of React.js In Simple Way

React is an open-source, front end, JavaScript library for building user interfaces or UI components and it is maintained by Facebook

Here some basic things about React JS :

1. Framework vs Library: There is a difference between framework and library, A framework is a complete package, while in the library maybe you have to use more than one library, It is not a complete package, whenever what is needed, you have to use it.
2. React JS is not a Framework: There are some misunderstandings that React Js is a framework or library? well React developers describe it as “a javascript library for building user interfaces and it is not complete developers often need to use more libraries with React.
3. React Virtual Dom: When React UI displaying its elements on the screen, it uses Virtual Dom. It’s a step that renders a function which means when developers display something in UI, react create his version of it with the help of diff algorithm and that is React Virtual Dom.
4. Diffing Algorithm: As earlier, we know that React create Virtual Dom and observable pattern & wait for any components to change, so when any component change, React updates the virtual DOM tree. So when the virtual DOM tree is updated React check this version with the previous version of the DOM tree and update the UI, which is Diffing Algorithm.
5. JSX: JSX-JavaScript XML is a JavaScript extension , which allow to write JavaScript in HTML and HTML in JavaScript.

const name = 'JavaScript';
const element = <h1>Hello, {name}</h1>;
ReactDOM.render(
  element,
  document.getElementById('root')
);

6. BABEL: In modern JavaScript, there are so many new features which might not be supported by the old browser, and here comes BABEL its transpile those features into old browser supported from. It also transpile JSX code to JavaScript code.

7. Components: In React to code something developers are use Components. Components are independent and reusable code. Components and JavaScript functions are similar, but Components returns HTML via a render function. To declare Components first latter of Components must be capital latter otherwise React through it is JavaScript or HTML not Components method.

import React from 'react';
const Home = () => {
return (
<div>
<Hello/> //component
</div>
);
};
export default Home;

8. Class Components vs Functional Components: A functional component is just a JavaScript function that returns JSX on the other hand A class component is a JavaScript class that extends React.

//Functional Component 
import React from "react";
 
const Hello = () => {
 return <h1>Hello, world</h1>;
};
//Class Component
import React, { Component } from "react";
class Hello extends Component {
 render() {
   return <h1>Hello, world</h1>;
 }
}

9. State: React updates the UI based on the application state. This state is a stored property of the React component.

10. Props: It is a technique of sharing values from one Component to another Component, Through props, a component can read value which is passed to this component by another component.

import React from 'react';
const Info = (props) => {
return (
<div className="col-md-6">
<h1>{props.name}</h1>
</div>
);
};
export default Info;

Thank you for give me your valuable time & reading these articles.