React:
Tags: react, javascript, css, webdev
Published: 2022-11-08 15:56:55

**_React:_**

The definition of react is describe by it's own website will be better, according to them
React is a JavaScript library for building user interfaces. By using react we can create a light weight websites.

**Differentiate Between SPA and MPA**
- SPA

1. The full form of (Spa) is single page application.

2. Spa websites usually light weight websites.

3. SPAs don’t require the app’s resources to reload every single time there is a content request from
the user, so it’s faster.

- MPA

1. The full form of (MPA) is Multiple Page application.

2. While MPA usually not a light weight websites.

3. While MPAs can be sluggish if the user doesn’t have an								optimal connection or if the server isn’t responding well.

**React vs Angular:**
- React

1. React is a JavaScript library,
2. React uses one-way data binding and virtual DOM.
3. React has a moderate learning curve

- Angular

1. Angular is a front-end framework.
2. Angular uses two-way data binding and real DOM.
3. Angular is steeper.
 
**Frame work and Library**
- Library		

1. A library is a collection of functions developers can call at will and still control the flow of the software application.
2. The operations performed by libraries are precisely and specifically defined.
3. When using a library, the control remains with the developer who tells the application when to call library functions.

- Frame Work

1. A framework is a structure in which the application defines the content of the operation by asking the developer to fill in the spaces.
2. The framework defines the concept with the functionality itself is defined by the developer with the end-user in mind.
3. When using a framework, the control is reversed, which means that the framework tells the developer where code needs to be provided and calls it as it requires.

**DOM vs Virtual Dom**

-DOM

1. DOM is an interface that allows the script to update the content, style, and structure of the document.
2. DOM manipulation is required to dynamically change the content of a web page.
3. DOM stands for Document Object Model it is the structural representation of all nodes in an HTML document DOM represents the UI of your applications.

-Virtual Dom

1. Virtual DOM is just like a blueprint of a machine, can do the changes in the blueprint but those changes will not directly apply to the machine.
2. React update the state changes in Virtual DOM first and then it syncs with Real DOM.
3. Virtual DOM is a programming concept where a virtual representation of a UI is kept in memory synced with “Real DOM ” by a library such as ReactDOM and this process is called reconciliation.

**One way Data Binding and Two Way**

- One Way Data Binding

1. In one-way binding, the data flow is one-directional.
2. This means that the flow of code is from typescript file to Html file.
3. In order to achieve a one-way binding, we used the property binding concept in Angular.

- Two Way Data Binding

1. In a two-way binding, the data flow is bi-directional.
2. This means that the flow of code is from ts file to Html file as well as from Html file to ts file.
3. In order to achieve a two-way binding, we will use ngModel or banana in a box syntax.