*****************************************************************
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)
