JS- library
2011- developed- Jordan Walke- data management
Fb/Meta-
2013-
publish
open source
free
*************************************************************
Easy to learn
Need only JS
JSX- extension of JS i.e
Freedom to code and code is in our control while using library
no limitation
we can use 3rd party libraies- AJAX,Bootstrap,MUI,Routing,Axios,Redux
npm i react-Bootstrap
npm i bootstrap@5.2
Easy,Fast Scalable,faster development
JSX- JS XML
*************************************************************************
Angular -
tightly coupled- one component depends on another component i.e interconnected each
other
ReactJS==>
loosely coupled-depends on interface rather than class and
component operate independent and less depenedent on each other
*******************************************************
We can fetch Ajax request also
Ajax -request- Asyncronous Java Script XML
Is not A PL
Its FW
-is a XMLHTTPRequest object to communicate with server
-we can send and receive any type of data i.e html,xml,json,text data
- Avoid Reloading of our web page
Performance Increase -SPA
*********************************************************
Features-
DOM_
document=>html=>head=>title=>"text" and body=>img=>src,height,width=""
DOM- Virtual DOM
XSS protection- Cross site protection
one way binding( Unidirectional Data flow)-Parent To Child
no dependency injection (Angular Concept)
SPA-Imporve Performance and faster result
JSX- is Like IS JS - extension of javascript
********************************************
Tools/ libraries-
Testing- Jest ,enzyme
Routing- React Router
Mobile App- React native
State mgtm- Redux/Mobux
***************************
Babel - is a Transpiler-JSX- convert JSX into plain JS
Most Popular Tool OF JS
convert es-6 features into backward compatiable version
polyfill features
Array.map(()=>{
})
Array.includes()
let a=20;
var a=20;
***********************************************************************************
*********
React Developer tool- Development
Redux Developer tool- State Management
Designing- Bootstrap and MUI
npm i MUI
**************************************************
MVC- View - popular Designing pattern to create web application
only view
*******************************************
Disadvantage-
VD needs more memory
More DOM manipulation
Only Build UI but cant control flow of application i.e View
- need 3rd party libraries
*****************************************
Application-
FB, Gmail,Web whatasapp,Instagram,FB,netflix,Twitter,YT
outlook,Airbnb,dropbox,shopify ,trello,Linkedin and More
*****************************************************************
Setup REACTJS Project
1. we can intergrate React in existing HTML file
2. CDN
3. Through command-
3.Local setup
4.single Command
local setup Through command
npm i react --save
npm i react-dom --save
npm i @babel/standalone --save
npm i webpack --save
npm i webpack -dev-server --save
npm i webpack -cli --save
*********************************************
Through Single command
//temporary installed packages for your project
npx create-react-app app_name
npx= is a runner tool
node packeging executor
//permanently installed packages in your system
npm create-react-app my-app
npm init
npm init -y
npm start- is a batch program(multiple commands executes sequentially)
***********************************
Day_2
Environment Setup-
Source Editor
Browser
extension-faster developement
1. Nodejs environment
Node
Npm use
Package manager
NPM- Requires Node JS environment for NPM
Others -YARN,Bower, Nuget,Ruby Gems,
*********************************************************
Webpack- JS Files bundling i.e Module Bundler
bundling JS files to usage on Browser
20 JS Files => 1 Js Files
capable to transform files and packaging assets,resources
webpack not bundling public folder
******************************
-babel
Crossorigin
CORS (Cross Origin Resource Sharing) is an HTTP feature that enables
a web application running under one domain to access resources in another domain.
In order to reduce the possibility of cross-site scripting attacks,
all modern web browsers implement a security restriction known as same-origin
policy.
