React Important Fundamentals

What is React?

• React is a JavaScript Library.
• Used to create User Interfaces.
• Model-View-Controller
• React is Declarative.
• React is a Component-based library.
• React is a Learn once and write anywhere library.
• Used to create and render UI components for Client-side as well as Server-side.

What is DOM?

• DOM is a Document Object Model.
• DOM is a collection of nodes and object supported tree structure.
• DOM can be manipulated.
• DOM is the object-oriented representation of a web page that can be modified.
• API = DOM + JavaScript

How React Render into the DOM?

Now see the template object as bellows:

const employee = {
   name: 'john',
   job: 'web Developer',
   city: 'Dhaka'
}

Create a template by React using JSX as bellows:

const jsx =(
  <div className = "employee">
     <h2> {name} </h2>
     <p> {job} </p>
     <p> {city} </p>
   </div>
);

Then React combines the data and template. React create a copy of the actual DOM structure and the new DOM structure or a copy of the actual DOM structure called Virtual DOM. Virtual DOM likes a friend of the actual DOM or the Browser DOM or the real DOM.

React compare with the data of Virtual DOM and the actual DOM then make change the DOM and show the Output. All the comparisons happen inside the memory into the actual DOM. After that, react to create a new DOM structure with a list number of updates. It updates the actual DOM and it only renders the list of changes from the total DOM structure. It only compares the changed data with the previous data and makes a new DOM which not changes all data and updates all.

What is JSX?

JSX means JavaScript XML, is an extension of JavaScript syntax. It provides a way to structure component rendering using syntax.

class Button extends React.Component {
render(){
    renturn(
      <div>
         <p>Header</p>
         <p>Content</p>
         <p>Footer</p>
      </div>
     );
    }
}