0% found this document useful (0 votes)
88 viewsReact JS Handwritten Notes 4
Uploaded by
Divyam BhushanCopyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
0% found this document useful (0 votes)
88 viewsReact JS Handwritten Notes 4
Uploaded by
Divyam BhushanCopyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
/ 15
classmate.
Chan
~ ogic_s cha cuthenlication of the usex
~ | usually handles the React Form.
C [Creating form t= beste
React “offers oa stateful, teackive
build o form. “The Component aie an Dom
ee <2 Component.
| ® trolled
Q Uncontrolled Component i=
| The uncont« ak i n
i chy i - The Dom
__ itself handles the fer_m dan! The [+TM element
= intain. i
eon v ai
| Uy MM |
| import £ Compo G
dasa uk ni!
1 this input = React. creabeRef (Ui +
—_| et
}—Upslate Sinmit Levent? {1 i +
aon Gee au Cou have. ented the useraome—antl |
event ~prevent D if o ——_——
render C Ye a return) a z
__ ~
__
a cheba Maint adie td
f _ Fae ae
ss
a ~
| Dok is conteted by 7
Dom itself “ey
a a
Prop Current walues
L “Tt allows validation | +4 does hot allow
: validation conbol.
+ has bette onho imi ol
o the
ments cand
form ele- | over the form and
da}a elements.
R
React ha,
c
[ts own event handling tem
4—Simillar to handling events
: On Do wienisihithe ey ayant
Pe Susten, is known o ynthe Cven a g
i ynthetic even Ros
qe Wworapper of the browser native event:
ie © React events ave armed ioe orl
~ insted of lowerc, Builds/Modifies
aa & L
Delivers events
u on i dias
of 0 Shing -
Fox _declasation in plain HTML: -
< icles = “ShowM Ca
Hetlow Tava Tpoint
@ In ve ac & ev
t ; wo H 0 t
event e plicilly prevent the
Es ample =
i
TT R
——Senshuchor C props)
Fe raps
this .s4 =f
— CompanyName et
os render ©) £
1 a At
hho Simple Event CLha2———
= t eS Ie Co is—more than one. B 4a clo condifi
yendering— Reel tote sk
o if. —
oT “is the easiest way to fey Snelist-
__| onal _yendering in React in the Apdusa
unctton Lo tops?)
¥ Ww, i
S
_ function G (Props ) £
| yelu chy Please Si p
Il o i = i 5
| if Cis \aegalls, 22
; sehiin user login />)
7 odin
2
React Dom. render F
SSignUp js Log ge lin = {false } [>
—dlecument get Element ById Crroet')
On.
Fie React fiorn react’ i
Import ReactDom fom ‘react =Dom *,——
—funckion Exumple ©) ———_________ weturn (
Yo fi Cored 2% alent Cir
_—_Showin tt
oo
De
I 4 L
Téernar: is .
Yendey (1 £
Const islogged|n = this- stat . iciresadl |
{ Yelura £ =|
div *
Welome fLislegged In ? ‘Bacic + Please login!
Cidiv> |
wottch Clee) 2
case ' Hi att;
Cuse 4
re hy m -
he facil * essays fet ZT an
4
E
E
Feta nail: t
k | classmate
return C
cliv
Et.
info: < Message text = texts /
ayning : < Message teat= ftextt />
Listelel? f
fClistTiems J ¢ /ul | —={
| nn
|| document gelblementBy Id Capp 2 ——_
a: os a
aerreres Bap detoult ee eee aed
m A_Key Ls Unique identifier - Tn React . uTt is
-___[used'te identify hich ems have changed.
7 | ide i =
| Updated 01 deleted from the lists. Ti is
' 1 useful ao we dynamical cxeated Com
a tots.
7 Pease eae ead
7 of xe- prenmbaee the enhie set of compan
Const String ist=['Petes', ‘Sachin, ‘Kevin's
rare Aliso” rT Const _siaing ‘Lists: [’ Peler', ‘Su thin ‘Kevin’, ‘Dhoni’,
_ Alisa
EE as s= Shh shingLi 4s.rop CCshLis Ly index)=
7 key =findex } > Lsdelist 4 cir
yi
Refs is the Shioslhand_uaed foxy rveferances in Rear:
ma |< i CsSi
atical © 1
____- Store 0 _seferance to Particular DOM nodes a1 React
Clemen}s. Tt Provicles O a. to acress React
Dom nodes or React elements and how 1 intera
woith it:
_ When to Use Refs :-
6 When we need Dom measurements Such as
— i = n.orm
Ta 06 Grn erring TEE RCE
—l: wu ent qt ting ith yiel-pa * Di r
\ibvaries.
s Tt can also use ag in callbacks.
Olhen jo not Use Refs:-
aha . e identif
;—insted—of using penc) cind closet? _methids
{ ia)o . jou need fo pass _
an rsOpen pp ts ib-
—t Vo} vi | ASS
SS i = ——— =
} How to dtonte, “Refs
7 Th React. Refs Car nbe_caeated—P4—using ©
“React create Ref Ci. Tt can be aSSigned” ©
_ 4p React Clement via the ef —Otvibute ”
_—___-Tt is commonly assigned toon n5bunce
Eth tee ne saison Hoagie
Componen\.
_ | ae Cprops oFZ
~7—— + Super props) —__—_W———~—
| _khis calief : Reack-createRefC 9.”
4
be, Tender Ct
a Neluin
ereale Ref (2 i :
i DoM clement 9S its Current jor0 =
an 1
t @ The ref Ae iit ised 4s on functior
component because they dont have instunce
Refs a
k + ‘ j °
the refs ave set and unset .Insted of creating
224s by passing a callbarls function to the sof
I Axi £ ° :
input type ="teai" tet =felement =? this. call:
I e e 3
TA is Anhecuced in React 16-7 oa eee versior
4 °
and the ue can (ase dad the Dom —
Dod L a e ele
ent or i the Woput element value
—_T) xehun ‘tes et object whose Current
—— Property initialized to the passed O¥gument .
| lt + Method can return
_ynents or mul Yiple element-
°
inside at a time
class App ex
Tender C2 t
sreduin ¢
cdiy
Hellow Woald
Hellow Woald
child 2
<7 pr be
Thy eke Bagmenke?
@_ Tt “makes the execution of code Suster aS com-
po xed to the cliv tag
—@ Tt tole less Memory
5 a
These is also another Shorthand exists for
Sragments fox the above method- Tt
declaring
Looks Nile. ermpty tag in which We Can use
ee siwg i a at 'R ips '
Class Colums extend React. Component
Yendex COP
teturn C
49
h22 Hello World! <1h27
You might also like
You might also like