Angular- Framework developed by JS

React- Library developed by JS

1)Single Page Application

2)DRY - Do not Repeat Yourself -concept
means create component one time and can repeat it many times any where
________________________________________
React is Open Source Application-The term open source refers to any program whose
source code is made available for use or modification as users or other developers
see fit. Unlike proprietary software, open source software is computer software
that is developed as a public, open collaboration and made freely available to the
public.
___________________________________________

Original author(s) Jordan Walke

Developer(s) Meta and community
Initial release May 29, 2013; 10 years ago[1]
Stable release
18.2.0[2] Edit this on Wikidata / 14 June 2022; 14 months ago
Repository
github.com/facebook/react Edit this at Wikidata
Written in JavaScript
Platform Web platform
Type JavaScript library
____________________________________

ReactJS is one of the most popular JavaScript front-end libraries which has a
strong foundation and a large community.

ReactJS is a declarative, efficient, and flexible JavaScript library for building

reusable UI components. It is an open-source, component-based front end library
which is responsible only for the view layer of the application. It was initially
developed and maintained by Facebook and later used in its products like WhatsApp &
Instagram.

Why we use ReactJS?

The main objective of ReactJS is to develop User Interfaces (UI) that improves the
speed of the apps. It uses virtual DOM (JavaScript object), which improves the
performance of the app. The JavaScript virtual DOM is faster than the regular DOM.
We can use ReactJS on the client and server-side as well as with other frameworks.
It uses component and data patterns that improve readability and helps to maintain
larger apps.

React Js- It is open source JS library to develop highly scalable user

interface(Front End).
1)It is maintained by FB.
We cann't develop whole website . we have to use backend technology.
2)we can develop SPA (single page application)
Features of React JS
-->Virtual DOM- when any modifications are in UI , the entire UI will be re-render
in the virtual DOM(V-DOM).then virtual DOM compare the old UI with New UI.
Only the updated data will be re-render in the Real DOM. That's why the performance
of the application will be the fast and no leakage of the memory
-->JSX-stands for Javascript Syntax Extension .
It is also a unique feature of react. Within a page we can put our business logics
and design. Every tag must be closed. All errors are display in a browser. so good
for debugging also.
_______________________________
-->One way data binding- Uni-directional flow
eg. if we put any value in a variable and it is stored in textbox then it is one
way data binding but if data stored in variable t/f in textbox and search also then
called two way eg. in google search

--> React Native- with the help of it we can develop Mobile Application- Means can
work in IOS and Android in both.

-->Component - React is all about component. and every Component have their own
logic and design.

React Js develop webpage but native will develop application/ Screens

--> Environmental Setup
-> node js environment
download and install node js
https://nodejs.org/en/download/
-> npm is also install with node
now install react
npm i -g create-react-app
-> How we create react app (project)
-> open folder in cmd | terminal
npx means node package command executor

npx create-react-app demo

-> React Folder Structure
-> node_modules : in this folder all modules related to our application are
store in it.\\
-> package.json :- all node_modules dependencies are define there
-> package-lock.json :- all dependencies with their vesion
-> public :- in this folder we store all assets (css/images/fonts/js) and the
main index.html file is define there.(this file execute when react app is serve)
-> src :- it is a main source folder where the components are define
-> index.js :- main entry point file , It access the id root from index.html
and load the default component (App) in that id root.
-> App.js :- default component , it load when application is serve
___________________________

-> components --> components are the core building block of the
application .
-> every component have their own logic and design
-> Types of component
-> Function Component :- we can't manage state in function component. But in
react hooks 16.8 verson , we can manage states but we discuss later.
_________________________________
Note-Only one Element canbe default export bcoz we can change the name of default
export at the time of import but we cannot change name of name export.
When we export and import any component it is called Module
Module is a JS file which contains some content like variables, arrays, strings,
objects ,functions and classes etc. and we export these elements and import in
another file.
In JS there are 3 types of Modules-
1)Core Modules - eg. React, React-Dom etc.(built-in)
2)User-Defined Modules
3)Third Party Modules- eg. React Router Dom, Infinte Scroll Component,Redux,Saga
etc.
_________________________

-> component name is start with capital letter

 Myfunc.js
import React from 'react';
function Myfunc(){
return(
<div>
<h2> Function Component </h2>
</div>
)
}
export default Myfunc;
-> How we import or use component in another component
App.js
import Myfunc from './Myfunc';

<Myfunc />

--> Dynamic data binding

{ } :- expression
-> array or object
map()
--> class component :- we can manage the state
Myclass.js
import React,{Component} from 'react';
class Myclass extends Component
{
//logic
render(){
return(
<div>
<h2> Class Component </h2>
</div>
)
}
}
export default Myclass;
-> props in react (properties) :- read only. used to pass data from parent
component to the child component.
App.js
<Myfunc title="Rohit Joshi"/>
<Myclass title="Ducat India"/>
-> state in react js :- State is for managing data.State data can be modified by
its own component.
-> How we create state
constructor(props){
super(props);
//define state
this.state={name:"anuj",age:23}
}
=> read state
<p> Name is {this.state.name} and age is {this.state.age} </p>
-> update state
this.setState({name:"amit",age:45})

-> Routing
function
class
 -> props and state
-> routing
________________________________________