Scribd
Upload
115 views15 pages

React JS Handwritten Notes 4

Uploaded by

Divyam Bhushan
Copyright
© 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
115 views15 pages

React JS Handwritten Notes 4

Uploaded by

Divyam Bhushan
Copyright
© 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
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 Ee hWID Conbolled Form <¢/hi> <\abel> i il Name: | OMChange = {this handlechange 3 - Sabet he 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 [Link] 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 = [Link] 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 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