*****************************************************************

Environment Setup

source editor/text editor

browser

extension- for development faster,easily development- react developer tool

***********************************************************************************
***

NPM-Node Packaging manager

npm is a package manager for the JavaScript programming language maintained by npm,

Inc. npm is the default package manager for the JavaScript runtime environment
Node.js
and is included as a recommended feature in the Node.js installer. Wikipedia

cd
Isaac Z. Schlueter

Written In JS
Free
open source

Manage all the packgaes and modules for nodejs

Node Packaging manager

for npm need Nodejs runtime Environment

https://nodejs.org/en

To check version after Installation

node -v
npm -v

largest software registery

Around 8 lac packages

npm init

For Auto Config- npm init -y

npm config set init-author name

npm config delete init-author name
npm config edit
npm help

npm help npm

npm config
npm start- Helps start react application

npm test

npm i /install

npm uninstall
npm update

npm run build- used while deployment

npm install install all the dependencies in your project

npm install <foo> add the <foo> dependency to your project
npm test run this project's tests
npm run <foo> run the script named <foo>
npm <command> -h quick help on <command>
npm -l display usage info for all commands
npm help <term> search for help on <term> (in a browser)
npm help npm more involved overview (in a browser)

Other Packaging manager- bower,yarn,Ruby Gems,Nuget,pnpm

***********************************************************************************
*
babel- Js transpiler or js compiler

Modern js convert plain js (backward compatible version)

free,open source
popular tool of js

Poylfill features- complete work if browser didnt have updated features

Transform syntax

Array.includes()

let age=20;
var age=20;

***********************************************************************************
*********

Webpack-
Is a JS Module Bundler
Bundling JS,CSS files for usage on browser

20 js- 1 file bundling

Capable to transforming,bundling,packaging any resources/assets/files

webpack:{
start:index.js,
script:index.js
style:[]
}

*********************************************************

Separate Installation

npm i react
npm i react-dom
npm i @babel/standalone

npm i webpack-dev-server --save

npm i webpack-cli --save

************************************************

npx create-react-app firstapp-

Temporay install packages and react application

npm create-react-app my-app-

Permanently install packages and react application i.e Globally

npx- node packaging executor

is a package runner tool for npm

************************************************************
npm init

npx create-react-app firstapp

cd my-app

npm start- batch program

Executes multiple commands sequentially

Port no 3000

***********************************************************************************
*******

npx create-react-app my-app

Install-

react
react-dom
react-scripts

babel

jest
webpack

web vitals- for performance check

Installing All the dependencies which we need to run first basic react application

npm init
npx create-react-app myapp
cd myapp
npm start

*****************************************************************************

Folder Structure of React Application

package.json- meta data about your project i.e complete overview/summary of your
react application

package-lock.json - meta data about dependencies i.e in detailed info about

dependencies
.gitignore
Readme.md

src- logical files- js.ts.,css

public- Root folder-- All static files- media files,assets

index.html- root file

manifest.json-

robots.txt-

node modules- Actual installed files i.e dependencies code files

***********************************************************************************
Angular- JS FW- Google -2016

TS-superset of js

Framework
predefined structure need to follow while development
limitations
No freedom

Code is in control Of Framework

Working flow-According to Framework

highly coupled- component dependent to each other

handle all things rather than library

difficult to learn

DOM- regular DOM

data binding- Two way Binding- Child to parent and parent to child

- Other features

dependency injection-services dependency i.e a and b inject each other

XSS- protection- avoid from attackers

We can fetch Ajax request

Routing- @Angular/router

for fetch ajax request- @angular/http

form- @angular/forms

others- pipes,decorators,directives.....

testing- enzyme
mobile app- Ionic

************************************************************88
Build complete end to end application (MVC)

MVC- is a popular designing pattern for web application

model- logical part js,ts,database opearation

view- display data- UI components

controller- middlware between model and view

https://data-flair.training/blogs/angularjs-mvc/

*****************************************

React Only works On View part- UI

********************************************************

Virtual DOM- Its updating and rendering results faster than regular dom

copy of regular dom stored on your browser memory

lightweight representation of your regular dom

eg

When UI element render- Create VD copy -> if state of object changed->create new
copy of VD

->pass it to first ->if same->avoid rendering -> either rendering component

***********************************************************************************
*******

execution flow-

app.js- by default component while we create react js application

*******************************************************************
semantic Versionining

//^- automatically installing or updating minor version along with patch version
//~ - installing most recent patch version
//@- to install specific version

18.2.0-major.minor.patch
^18.2.0-

~ - most recent patch version

@- to install specific version

18- Major version - major updates

2- Minor Version.- (functionality update)
0- Patch version- (Bug fixing)