Scribd
Upload
5 views5 pages

Day 1

ReactJS, developed by Jordan Walke in 2011 and open-sourced by Facebook in 2013, is a JavaScript library for data management that allows for easy and fast scalable development using JSX. It features a virtual DOM, one-way data binding, and supports third-party libraries, making it loosely coupled compared to Angular. The document also outlines tools for testing, state management, and application setup, along with some disadvantages and examples of applications built with ReactJS.

Uploaded by

Tejas Zamre
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
5 views5 pages

Day 1

ReactJS, developed by Jordan Walke in 2011 and open-sourced by Facebook in 2013, is a JavaScript library for data management that allows for easy and fast scalable development using JSX. It features a virtual DOM, one-way data binding, and supports third-party libraries, making it loosely coupled compared to Angular. The document also outlines tools for testing, state management, and application setup, along with some disadvantages and examples of applications built with ReactJS.

Uploaded by

Tejas Zamre
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 5

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 [email protected]

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.

You might also like