0% found this document useful (0 votes)
16 views12 pages

react_notes

react notes

Uploaded by

Yash Kadam
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
0% found this document useful (0 votes)
16 views12 pages

react_notes

react notes

Uploaded by

Yash Kadam
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
You are on page 1/ 12
y UseRef ond ite poremelers, 6 trery fit (LLI¥ iu Joslo4 WR) JAS = liseRef Hook 2. ¥ ~ po structure manipulation _js_donc_by — usePef hook > sUseRef jis: a sreact hecle that lets yeu _— reference 0 \volue that's not needed for rendér ng. = a Synlax ! Inihal value: atin Const “ref = useRef Cinshal value) Bonde import React, f useRef} from. react’ -funcHen MyComponent © ca \ See Aas a e . . é “tl etonst intHalRef =. useReFCO) » cera) inidiel Pet = _usePef (Null ; The yolue you want to ref object " current property” to dns ioiWally-) sth: can be value tof any type featur useRef : qe returns an object a_single property. current ( property) 7 Tritialy it _set +o the johal value you have passed if you passed dhe reference obj. | to reack_ as a pheee ee alribute te TSx node “react oill set its current property . Text Reader. (js ————————— ee import fLuseRef} from treoct’ funchon TextPeader ©) < const _fextVieus = usePef Coys Funchon _jnerYol © textView - current: focus (25 text View, current. styJe. bockgroundGlor = “red”; 5 return © <> < input classNeme =" view" type =-“text” ref = ftextviewy /> t < button on Click = [ inerVoal > Increment I <1 butten> { textView. current} | | | l )s | | export default TextReder 5 ! x! [Red fs colow change | | [shesres i Jake a textbox as user _ jin put a color name a the background Color should be changed using useRef g useState - y 4. React Router 2olosle4 ae React Souter nem _instoll reect- router- dom x React Router React router iso collection of navigation component within your opp!” with the lotest ersion of react router v6 - Ir enable athe navigation omeng views of variou: component in a react changing tHe browser Sune a With the ual Oppi? allows url and keep the ut in imps Feature of the react router : a ). Declarative routes 2). Nested routes >. Programmatic navigahon 4)- Route _parometer 2): Trprove Ajpescript support preve—4 * Component of react router : "). BrowserRouter - PorentRouley _entends ant other 3 Tt uges the htm! file history APL ib keep your UI _in syne with unl. 2. Routes - A__contoiner for _all_youy ‘ route” def”. >. Route - A_ define single ropte with a path and a component _d» he tender 4) Link - Create navigaHonal Mink in ysux Spel”. 9). Nowlink - aa. = Similex +o Link but provic es 0: ifonal sty 4. “dttributes When the link ig Ocha - Example App is é import Hello from _'. / components / Hello! im i Header from *./ Companents /. Headey ' tent ort Jalelcome from +. {com ponents] Ielcome ' import {BrowserRouter ag Rothe Route, Link , Route} : from _' react- router - dorm' Function App L return (
x Routing structure Home Si Link) <1ink t=" /Hette” > About Link faa"/ Welcome Welcome its

Home page ih no tatn ¢¢ byld ) } : f App js. Sq t f {| <1} Hello user poge is here This is atta, F is fname} bout user inf formoton <| p H l ) aT [ —fxport_defoult User . | App. < Route path =" / Users: ReMme” Com ponen}= fuserRh cute ee ee | Borie vor 1 iz Fagenot i> 2th dila st sie, cfine Ya y panes Avtes) npm install | 5. State Management using Kedux (ser —'6n logloq | CRreact - Redux) > Component Type | E ——— class Function | component component I this. stote =f Lusestste {| count 04 t ss "const Fstote. setStote] = he Tes usestote (5 Parent _cornponent pass the data to child component | using props or, tote. | pedux ic aged “fos store poi enagemenk: I Tr con used ith other longuoges also. | Redux defination :’ [ Redux is _@ predictable stoke menagement for JS app)? Example: Cake_Shop Enh He: I D+ Shop - stores cake on @ shelf L 5). Shopkeeper ~ At tne front of the shore »). Customer - At the entrance of stor | Activites : | 4h ): Gistomer - Buy _ coke I 2. Shopkeeper __Cake shop scenorio Redux Purpese d - 1). Shop Store Holds the ctate of your I opp)? |: tntroduction_or Action Described whet happen _llecion uy o coke lection _ € 3: Shopkeeper Reducer __Ties_the sto ocHon together The reducer which actually carry out the transi hon depending onthe action | Three principles of Redure + : !. The date of You whole app)? jis stored j On obj. tee within a ingle store SN eg : noOfcokes ‘105 4 a J 2: The only way +s change the state is tz) emit an action on object desgeribing: sphot--hoppen | - | J } e-g. Cake Shop f type: Buy. cake; 3: To ‘specify how. the state tree jg transform | by actio jou. ducer eg. const reducer = ( stote action) > f wide Cackon. type) { i oT Ss object case Buy Cake + return. | bs tear ao neoOfcakes : State. nodfcakes -I: mas cetion ie o object - Const ivy. Cape =' ee [yeu con create court ple Shion ; achons tn one ota - ; tol) Redux Architecture + . re Then ~subseri-bed- a | eee satey OF | 35 App. = J Dispotch : App!” con't 1 / Redux slore, — directly updale state aehaa \ (state) | I in - I Re ducer |e | | | #! React UT Architecture : | r l L a B rf | “dispatch “at | Redux | T [Wander | stere spot function | I Ii l onclick Opiate Reducer] | br | Updote the T fx loyer Site of Store Button J # || Hements ; ! Action : The on ; Carry some j - 0 sane infamalion Soe Ea Ny wo Ny ere eTown eg —_____They__hove_+ype _propert type ef actien fseing performed chihe achan It _is_clefined string constant. action Gunton : const Buy coke =’ Buy Coke’ 5 txomole: Lune i Kon buy foke © return 5 type: Buy. ke info + first redux ochon' 2: Reducer It specify te __actien send 4o the shore . These function arguments 2 how the opp state changes return the next otote of the appl’. Ervomple i cons} jnitialStote = f % const noOfcores = 10; reducer = ( 6tate fun clon = inittalstote ; acton)= that occepts store: 2 ‘action as - + | | | 1 £ ebject_ property ! witch (achion. +4 pe) a i Zz ockon i | case Buy coke + return noofcakes : State -noofcakes ~ PY YY spysyyssywssyyvy qo install reduy in nade aes react = | ppm instal! redux aej is Imporl Pedus tram redux? default <= return stote 3: Store : This_port_brings action 4 reducer together. > Create one store for the entire appl” ' I Pesponsibilities = “Hold appt? stote - (initial ssate) 2- Allow access fo tote +h” getstaten 3: To allow access to stote to be yodoted i through dispatch (ockon) for anu acoi siote. j 4 To register listener through Susscrsa( listener) Function Example : | const redux = require (+ redux:) Const cresteStore = redux- createStore const Gtore = creoteStore Creducer) j conzole.log CtiniHalStete ' | Store. getsiote 0) 319 Store. Subscribe (0 =? console-log (‘Update state: Store getstatem) 5 Store. dispatch ( buyCaket>) ; 2 Store-dicpatch ( buycakeo); — $§

You might also like