Pre requires

HTML
CSS
JAVASCRIPT
ES6 features:
Spread Operator
Destructing
Hosting
Clousers
Promises
Arrow functions

front end apllication

front : user interface using reactjs
end : data management
application : networking,routing

front end application created using react library with some other libraries such as
axias,mooks,reactrouter dom,redux.

react js is popular javascript library used to design user interface.

react is open source componenet based(free to use) javascript library.
react js is single page application.(it has only one html page connected with
multiple js files)

History of reactjs:
developed by facebook company in 2011
released in 2013
invented by jorban walki
compitators for react are angular and new js.
react has been introduced to design user interface
the companies using react are : instagram, whatsapp, facebook, dropbox.

what is library?
collection of pre defined functions or classes or properties with some rules.

what is framework?
collection of pre-defined libraries with some strict rules.

By using reactjs we cant create entire front end application but alogn with react
we need to
use some other libraries to create entire front end.

In react we write entire code in App.js file.

keypoints about react js:

javascript library : reactjs is an open source javascript library developed by
facebook for
building user interface, particularly for single-page applications.

componenet based architecture : it allows developers to create reusable UI

components,
which helps in maintaining and organizing the codebase efficiently.

VIRTUAL-DOM : REACT USES A VIRTUAL DOM TO OPTIMIZE RENDERING,WHICH IMPROVES

PERFORMANCE
BY MINIMIZING DIRECT INTERACTIONs with the actual dom and only updating
what has changed.
what is the purpose of react js?
react is used to create user interface
react is used to create single page application with other libraries
using react we can create static and dynamic web page

advantages of react js
---------------------
easy to learn and use.
learning curve is very very small
react application are very very fast in performance
in react we use virtual dom
react community is larger
react is supported by facebook.

difference between angular and react js

----------------------------
character angular react
developer misko hevery jordan walke
initial release

12/11/24
working of react application:
the browser will not send any request to the server if we want to request from one
page to another page
the react only handles the browser request so it is callednas single page
application.

when user wants to change anything it will reflect in virtual dom the virtual dom
will update only the changes need
in dom and it will not completely render.

react creates a virtual dom in memeory instead of a manipulating the browser dom
directly react creates a virtual dom in the memory
where it does all the necessary manipulating before making the changes in the
browser dom

virtual dom changes only what need to be changed when user wants to change anything
it will reflect in virtual dom and
the virtual dom update only changes need in dom.

features of reactjs:
1.jsx
2.components
3.one-way data binding
4.virtual
5.perfomance
6.simplicity

jsx:
jsx stands for javascript xml
it is javascript extension syntax
it is a html like syntax in reactjs
ex:
let heading=<h1>Welcome to react js class</h1>

ex:
function heading(){
return(
<div>
<br/>
<h1>Welcome to react js class</h1>
or
{heading}
</div>
)}

2.components:
react js is all about components react js application is made up of multiple
components and each component has its own logic
and controls this components are reusable

3.one way data binding:

react js is designed in such a manner that follows unidirectional data foe or one
way data binding.
the benefits of one way data binding give you better control throughout the
application

4.virtual dom:
it is a copy of virtual dom whenever any modification happened in the web
application the entire ui is rerendered in virtual
dom representation. then it will checks the diff bw dom representation and virtual
dom only it updates if it is needed.

5.simplicity:
react js uses jsx which makes the application simple and very easy to hold as well
as to understand
we know that react js is component based approach which makes the code reusable as
you needed.

6.performance:
react js is known as good performer this feature make it much better than other
libraries and framework the reason behind
this is that manages virtual dom.

why react is used to create user interface when we can create ui using html and js
html:
ui----->html---->by using predefined elements.
--->using html creating ui is very very easy
--->to create ui html is providing some html elements or tags.

drawback:
we can not reuse the ui
the time consuming to create ui

javascript:
ui---->js---->predefined function----->dom elements---->screen
advantages:
-->js we can create ui dynamically
we can reuse the ui
disadvantages:
js creating ui is very difficult
to create the ui is time consuming
ex:
<html>
<head>
</head>
<body>
<script>
function CreateButton(){
var btn=document.createElemet("button")
btn.innerHTML="click here"
let body=document.body
body.append(btn)
}
createButton()
createButton()
createButton()
createButton()
</script>
<body>
</html>

react js:
creating ui is very easy like html
reuse the ui like javascript is available.

13/11/24
installing react
install node js latest version
create one new folder in desktop with name react
go to command prompt and check the node version (node -v)
go to visual studio select folder react and then select new terminal
type command npx create-react-app happy(the folder name should be in lowercase)
(with connection of internet)
proceed?(y) give here y
then if it shows happy hacking then installed successfully.
then give cd happy
then give npm start to start the server.
it will direct to the chrome and gives react image output with turning.

14/11/24
react folder structure
in react application there are several files and folders in root directory some of
them as follows
1.node_modules:it contains the react library and any other third party
libraries(react icons website to use icons)
2.public folder:it holds the public assests of application it contains index.html
with react will mount the application by
default on the tag <div id="root"></div>
3.src folder: it contains the app.css app.js and index.js, index.css
server,worker.js files
here app.js files always responsible for displaying the output in the screen.
4.package-lock-json:it is generated automatically for any operation where npm
package modifies either the node modules
it can not be published it will be ignored if it finds any other place rather than
the top level package.
5.package.json:it holds various meta data required for the project.

15/11/24
jsx:
jsx stands for javascript xml
it is a syntax extension for javascript commonly used in react
it looks similar to html but it allows you write html like elements with in
javascript code
jsx is not valid javascript but it transforms into regular javascript by tools like
babel before being executed by the browser.
ex:
let heading=<h1>welcome to react class</h1>

Rules to write jsx:

1.jsx code shuld be always written in lowercase.
2.jsx must return only one parent element.
ex: return(
<div>
<h1>hello world</h1>
<p>yguhfwfbrgbngb</P>
</div>
) o/p: no error
ex2:return(

<h1>hello world</h1>
<p>jofijurhguhguthgtu</p>
)
) o/p:error

3.The parent should be one for all elements such as <div>,<section>,<article>,

react fragment to avoid multiple div tag error. disadvantage of react fragment is
we can to see classname.

we can enclose jsx code inside the <react.fragment></react.fragment> or <></>

to avoid extra div error we are using react fragment.
ex:
return(
<>
<p>hello world</p>
<h1>welcome</h1>
</>
);

4.jsx elements must be properly closed every tag in jsx must be self closed or have
a closing tag.
ex: <img src="image address"> //incorrect way
<img src="image address"/> or <img src="image address"></img> //correct way

5.jsx attributes use camel case html attributes like class, onclick attributes are
must be written in camel case.
ex: class className
onclick onClick

6.js expression in jsx must be enclosed in curlly brackets.

ex: const name="virat"
function fun(){
return(
<>
<h1>My name is {name}</h1>
<>
)
}

7.jsx tags can have childrens we can nest elements inside jsx tags and they will
render as a part of tree.
ex:
return(
<>
<div>
<div>
 <p>Welcome to react class</p>
</div>
<p>hello world</p>
<h1>welcome</p>
</div>
</>
)

8.jsx supports comments

ex :
return(
<>
<div>
<div>
<p>Welcome to react class</p>
</div>
{/*<p>hello world</p>
<h1>welcome</p>*/}
</div>
</>
);

9.jsx attributes can accept javascript expressions.

ex:
function App() {
let imageUrl="https://purepng.com/public/uploads/large/purepng.com-ferrari-
carcarsferrarigallop-961524670047nmpto.png"
let imgwidth="100px"
return (
<>
<img src={imageUrl} height="200px" width={imgwidth}></img>

</>
);
}

How to add images in react file:

For online image:copy the image url and paste it in img src tag.
For downloaded images:Go to chrome search for image and download it. Than go to
file explorer open the react folder open the
public folder inside the public create new folder called images then copy all the
downloaded images inside this folder.

18/11/24
css in jsx:
css can be used in 2 different ways in jsx
the first way:
by creating external style sheet
by using inside the jsx code.
ex for creating external css:
css file should be created inside the src folder.
right click on the src file new folder give same as app.css
app.css should be connect to app.js file to coonect add line in app.js as
import './app.css'---->app.js and app.css both are in same folder

internal css:
we should write css in {}
note: we should write css value in ""in js file to understand it is css value.
the attribute name and property name should be in camel case.
ex: textSize textAlign backgroundColor

javascript in jsx:
to take dynamic values from javascript to jsx we are using
ex:
we can declare the values inside the components and we can access
ex:
function app(){
let name="pentagonspace"
return(
<h1>{name}</h1>

we can declare the value outside the compnent and access them.
ex:
let name="pentagonspace"
function app(){
return(
<h1>{name}</h1>

we can not create a variable or values inside the jsx and we can not return
ex:
function app(){
return(
{let x=10}</h1>
}

why we need to use jsx?

it makes your code readable and easier to write by combining html like syntax and
js logic
it is tightly integrated with react which focuses on building ui components.

react icons :
if we need to add react icons in application we need to install icons library in
react application.
serach for react icons website
click on firstlink
npm installed react icon command copy this
install the library in react application folder.
go to terminal change directory to cd happy and than paste the copied command and
install with internet connection.
after installation in reacticons website search for wanted icon copy the command
for icon and add
it at the beginning of the app.js file near import line
than to add css : <><FaWhatsapp style={{color:"green"}}</>

remove these files

index.css
app.css
logo.css
remove these files

19/11/24
components:
the react components are used for building blocks of ui.
they allows components to reuse.
the components will be having its own logic and controls in react.
in the webpage the whole page is divided as header.js,main.js,footer.js etc and
these all are separate files(components)
the parent for all these files is main.js and to see the output of all thses files
in one page we should use or import
these files in app.js
in react we can nest one component inside another component.

in the react components we have two types of components:

1.functional component---->imp
2.class component.

ex for react components:

Create new folder inside the src folder as Components.
Within the components folder create new following files.
whenever creating new file the first letter should be capital letter.
*in function return should be written to return the jsx code.
export defult is used to send the input

ex: Header.js
import React from "react";
import './header.css'
function Header(){
return(
<>
<div className="heading">
<h1>Heading Component</h1>
</div>
</>
)
}

export default Header;

ex:Footer.js
import React from 'react'
import './footer.css'
function Footer() {
return (
<>
<div className="footerpage">
<h1>Footer Component</h1>
</div>
</>
)
}

export default Footer;

ex:Aside.js
import React from "react";
class Aside extends React.Component{
render(){
return(
<>
<div style={{height:"400px",width:"300px",
boxShadow:"0px 0px 10px black",textAlign:"center",
padding:"10px",textTransform:"upppercase",marginTop:"20px"
}}>
<h4>Aside component</h4>
</div>
</>
)
 }
}
export default Aside;

ex:Nav.js
import React from 'react'
function Nav() {
return (
<>
<div style={{height:"50px",width:"100%",
boxShadow:"0px 0px 10px black",textAlign:"center",
padding:"10px",textTransform:"upppercase",marginTop:"20px"
}}>
<h3>Nav Component</h3>
</div>
</>
)
}
export default Nav;

ex:Main.js
import React from 'react'
function Main() {
return (
<>
<div style={{height:"400px",width:"100%",
boxShadow:"0px 0px 10px black",textAlign:"center",
padding:"10px",textTransform:"upppercase",marginTop:"20px"
}}>
<h2>Main component</h2>
</div>
</>
)
}

export default Main;

ex:App.js
import React from 'react'
import Header from './Components/Header'
import Nav from './Components/Nav';
import Aside from './Components/Aside';
import Main from './Components/Main';
import Footer from './Components/Footer';
function App() {
return (
<>
<Header/>
<Nav/>
<div style={{display:"flex",gap:"20px"}}>
<Aside/>
<Main/>
</div>
<br/>
<Footer/>
</>
);
}
export default App;

app.css
body{
background-color:red;
}
*{
margin:0;
padding:0;
}
.heading{
color:white;
background-color:black;
text-align:center;
}
#para{
color:yellow;
text-align:center;
}

header.css
.heading{
height: 70px;
width: 100%;
box-shadow: 0px 0px 10px black;
text-align: center;
padding: 10px;
text-transform: uppercase;
}

footer.css
.footerpage{
height: 70px;
width: 100%;
box-shadow: 0px 0px 10px black;
text-align: center;
padding: 10px;
text-transform: uppercase;
}

20/11/24
//in react js we have mainly two types of components
1.Functional Component
2.Class Component

1.Functinal Component:
react js functional component are some of the common components that will come
across while working in react.
these functional component is simple js function.
we can create functional component in react by writing a js function.
these functions may or may not receive data as parameter.
in the functional component the return value or keyword used to return jsx code
which will be displayed dom tree object.

2.class component:
these are more complex than functional component.
it requires a extend keyword to call parent component.
the class component create a render function to return the jsx code
you can pass data from one class component to another class component
it is introduced before version of react 16.8
class component now we are using only way to track the state in lifecycle methods
or lifecycle components on the react component.

nested component :
calling function inside another function.
ui tree

21/11/24
diff bt class and functional component
functional component class
component
functional component is easy to create class component is
complex to create
functional component are fast in rendering class component is
little slow in rendering
in functional component we can assign any in clas component state
should be used inside object.
data teype value to the state.
react hooks library can be used inside functional react hooks library can
not be used inside the class component.
component

imp questions of react:

what is react js?
what are uses of rectjs?
what is library and framework?
what is the purpose of react?
diff bt angular and react

22/11/24
RECT PROPS
==========
> PROPS stands for properties.(Key value pairs)
> PROPS are the fundamental concept in react for passing the data from parent
component to child component.
> used to send the data from one parent to another child.
> They are read only & allow components to be customized based on the data pass to
them.
> only before sending modification can do after the sending no modification.
> "One Way Data Binding" & data cannot be changed.
> The main use of PROPS we can dynamically reuse the components.
> Unidirectional data can be pass only send from parent to child.

HOW THE FUNCTIONAL COMPONENT RECEIVES THE PROPS?

================================================
> The functional component receives the PROPS as parameters.

HOW THE CLASS COMPOENENT RECEIVES THE PROPS?

============================================
> The class component receives the PROPS via the "this.props".(Invoke the current
object)

HOW TO SEND THE PROPS TO THE COMPONENTS

=======================================
> We can send PROPS to the component as a attributes.
> PROPS is a object
 <component_name name="virat" age=36/>
props={name:"virat",age:36}

1) Functioanl components - parameter

2) Class components - "this.props".
3) To parent & child send as - attribute & value => Props receive as parameter.
4) PROPS - key value pairs.

UI
|
index.js(root file able to connect only index - not connecting to other files)
|
App.js(everything in Capital connecting to other files)
|
ParentComponent.js
|
ChildComponent.js

UI
|
index.js(root file able to connect only index - not connecting to other files)
|
App.js(everything in Capital connecting to other files)
|
Book.js
|
Booklist.js