Scribd
Upload
2 views45 pages

React js Notes-45-89

The document discusses various concepts related to React components, including lifecycle methods such as 'ComponentWillMount' and 'ComponentDidMount', as well as controlled and uncontrolled components. It also covers the use of refs, conditional rendering, and the React Router for managing navigation within applications. Additionally, it touches on styling components using inline styles and the importance of handling events in React.

Uploaded by

awg.ramya
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
2 views45 pages

React js Notes-45-89

The document discusses various concepts related to React components, including lifecycle methods such as 'ComponentWillMount' and 'ComponentDidMount', as well as controlled and uncontrolled components. It also covers the use of refs, conditional rendering, and the React Router for managing navigation within applications. Additionally, it touches on styling components using inline styles and the importance of handling events in React.

Uploaded by

awg.ramya
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/ 45
clascmate |. TOPPER — WORLD aa ~ G@ | Teibal Phase = egetDeLaultProjs (J | Tt js used—to specify the defautt value of = thisjaxeps-1t15_invoked before the creation — _ | of the component ov any props from the parent iS passed inte it | etek Tibial Phosec) [_ Th 1s used +o_specify the default value of _ this. state -T} is invoked” before, the creation of the Component. |e Component Will Mount ¢ | sis is_involeecl Jmmedciately before a component gels venderded into the Dom. In the case Cohen you cull SetState co» jriside this method 2 Component Di AMount ¢ Wu This is tnvelsed i i ° 0 _ — can do ang Dom querying operations —_——— —__||_ * rendero) - This method is olefined in each and ever. | component - Tt } onsi 1 —|_o Single oot HTmL nede element-————— —@ | Vesotine eos =~ | Ve 5 putea = — iS _involced when a compe seca ee3 isle m_xesponse. ts prop chanj&5+ Yous Preps and nextpxeps— pie aa ee this. esa aa ae by using Abis. eShouldCass ponent poli) watt senent decides | I} is penne scireas a comp ages ing Occures.— Component Will pda £2 _ 2 ee 2oNe! ss ys Her Component Skate by invo k ing. this Method. © IE O GD TH is jnvoleed_imm = nenk updating octur Puss ans course in a enue Phase — Cai Unmet) POSTS. arabe ja nomwet reread hia! = Component. _is _desheyed permanant; q necessarg Cleanup, Form axe _an_ ‘nkeinal pak of an . fis Revues +o — al |Z [ott the opplisalions an wosil ea guth® ST lecendlan lhe he, Sie nk ms__can p ote rang tusk s that depends on the jure of na of qour buisness requirements —° besTOPPER wort ie ee eas: as authentication_of the use I _ Cx eating. co at sil. dl efor Bw lt || React offers a_ stateful 4 reackve apptach 4a |_build co form. The component rather than Dom _| usually handles the React Ferm. “__ OUncontrolled Component. @ Controlled Component Uncontrolled Component t= {| 2 uncontsolled Cormponent input is _simillar — to the tradit (onal Tm i _The Dom iiself handles +he foim clad The [41M element l Moaintain their owen State thet wil be_updated || when the inpul val So wri Uncontrolled Componente Age ‘Rpp en eae. Cemyanenk Constructor Cprops) — ! See Drolos yt —_| ___this-update submit =thi s-update Submit. —+t —___ bind Cthisd) — Ans teak = teach. creabe Ref (2: ——_—+ —}—_1- -—_—} Ee bptste Semi Conant? [ ode ois — ert _C"You paeenkred the aseiime_ aad ~~ Company niame. — Successfully 92 = —~__event Prevent Default); 9 —l[ ss render ©) 7 —clissute TOPPER ata word (a i ial a SS. Feluned — “ood Se —
~ gh? Uncenbolled Form : [ek teh vest 4 ! ! — iscitebad Poem taps ao = | if Cc Controlled Component £ _ qe ee wi Ape: Sota eyTOPPER wort chandleGhangeCevenbd{ this: setState Cf value: event. target. value) jy | J ______hanile Submit Ceventd yet C" ‘iow a =e input Suciege, —Bvent pees rea Gy —t cece Cup return € ‘ —____ = AUabel> ee pt = | CP Sxprt Default Apconholled by | Data is cont a | nent d Dom itself rent | “Tt uses a ref Current values. at Conhol Validation conhol. _ Th has bettey Conhel| Tt has limited control ae over the form ele- over the form and | ments cand cata elements. 1 oe ! React has its own event ha Gohich iS vex simillar to handling On Dom elements .7 Worapper Q) React events arseTOPPER wort Builds/Modifies Builds/Modifies i — - seer -—_ => : en DOM L Delivers events Delivers events L a anction i s of 0 tring z ) A Che fui k C b uf return all ; i tTOPPER wort ! d av i ___. Conditional rendesing. TL is a paxed. to switch case operator. ~ function Motification Msg Cftext jstabed) bo return C __ | flv ft info: flextt 4 [stated = Pmulist 9 ct Const mnylistTiems = mylist.map Cmybisk)=> £TOPPER | WORLD | eae gel lenin Dany a ead default fee Loot +e ~ eendasin dietenine set of Com ponents every timeTOPPER = wort & fy 53) Terie “sluing lists: C'Peler',' ‘Satin’, 4 skein? Dani's fled, ee updated lists = Shinglisdsa romp. Cshalistj ndex)=> —— Tis intrecluced in Reack 16-7 and above versior a i a sth m ond the we can interact coh the Dom Nod ke dl 6 f e@ elem- —} ent ona in h a al he ef objec: ope Curren © initialliz +o the Ov ent:| —— > | TOPPER bene EP — WORLD a J nv i @h- “ments or multiple element. The sender - : co | lL ° + wnside ada time a a | p_erlend: React. Component L ee I "eee cog i ~redurn ¢ : diy —_ I Khe Se ee a “TvaTpeint ' and insied of the ‘React. Tagment' ass Co d i © Fenders COE / Teturn C &2 | h2D Helle World! It is used fox handling IRL +0 component - The style a{ivibule iS the a Hribute for styling in React Ctp plications. Which adds dynamically - computed Styles af tender time .T_accepts a javascsipt obicey in camelcased Properpies—* other than‘ts.” - ae | dD + : bigs Crint object ib camelCase version Of the” ____Slyle name. Ths value_is the styles—vclue _ cohich ues Sua take ip a Shine os i &ppl: t om ¢ - yp ~ | -cleiss Pipe extencis. React Component } i > | hy = oni" “ o lava Tl: = | PS Here uvucen find all atals se i JL You con find all es tutorials liv 5 | 2 Cx port clefuult Ppp, App-css bady i: L ! baclegzouncd color . H VOBOZO! I coloy : Yellow : i Padleling 2 4O p 1 Font- family Aaial dexk =alicpr i center: Ul 4 cs \—[Saaex imi €!Doc TY pr html 2 hin! Jang = "en"TOPPER wort friple, @hater-MUbiagi sia meta name = "“Viewporl us (content = "uidth=device width initia l I ay id="app "2 Loliv — L ___cs tutpuials p2 |
| 2s | 2 | + \ | exper i | mystyles. meiule css— —_—— __emy L ‘ [ sss ~coloy Ht cdc obo: caine 2 Red 2 add i Palle. | font faraity Pail | fexk -align : center i ; l Colox: Green’ San family Baal { font sRiee SRG wou ii) t fe xt - Olign : Cen bea) It provides great CS tutorials.TOPPER wort 4 ' ee Styled Component is ai Se eee ga [nang for Bena 3 uses enhance css fox Shyling—React—tomps, System in Yous application cohich IS writ | taith mixture of Tavascrip} anc Css | —Tt is one of the most Usec| technique to f React Transition group has mainly 2 APL _— I ansition — Tal Create React T tion Group :- — Tt uses as low-level API Pov animation —— F @ React Css Tiansition Group: - = Ti_uses_as_o high level BPI for implementiny” Yasic CSS tansitions ond animations. ————~_ React Tansition— Gyoup Component. —_——~ t | Provides & main eomponenL. © Transition @_ Css Wansition || aAi classmate, jm | classes to wiite the transition anol Create Ginimations - T1_{S inspired by the 4 -animate | el Tt can also inherit all the Prep of the | : = 1 o pvpeay | o Enter | _0 Eset bs “TWansition } This a es is Used) to Anaags a set of T machine that oe dhe esaustng and un defi Lani L diffrent cinimation with a component-_____ C |(| pp. Tq TOPPER wort ———mport_React component. fiom “seact' 3 Import {C58 TransifionGreup J from “reoct=jransiii | class pp sills “Read.Comps ns soup rend { Consivuctoy Cprops 27 Sets blire Ci, 1): hevsliems. | is-Set : i. geen tale C Litem: neiisltems 1) | Bender (7 f Const ilems =thi. -Stale. i} . : "i Inset em = __ do Get El | ' ‘ . c app 2) Style. ¢ _-€ Karnple -enberf Gp rks 2-0l + |_¥ t —_+ a i le — = iv Opacthy «1 ! tran ‘Mon: ppacity 500 Ms @ase-ins L$ - Spaciky = 1; |TOPPER wort " arr -leave — + 0p “0-01; ‘Animation Example pet - | = re , si oaclasewate )) Rone (Oe es) iy Reacts the map() method used far: O Traversing the list element import React from ‘react’: at impot Reach DOM fiom react -dom') function Roe Cprops2¢ 4. tM = sin ist) = EATS: Lay List Y React Map example Lusttems } cul
» 4 —— cons* itse('py (mica y: React Dom: tender C ar get Element Ay Id Capp') Output fp eames Rest Ma EanTOPPER Jie woOrLD eet ——|_ A toble is an. -axrongement. hich organizes ——_ifronaitins Into ows | ee u——+-Used_to store cind_clisplag_ data ina shiv “——_|_ format at eel ~ba weight fas fy ; | Peusinmizable cind extendak id e ~ i +o ia op a ad rallhae Iss ! - @It ha cle side £Se7vi-side pagination | ra nus fillers 3 i & Aaqreqalion I aye -——@ Minimal’ design dé easily theme ble rm |, MS ~ jmpet ReackTable fom “yeack - pauls ‘ or | i “4% - -t os ~ o Com po nw | Yendes Ci? % Const dete > Cf } was { Nome ." ahs ee 5 i i Name -' Ahana', y a Oge. : 92Qge.4o. | BE _ Nome Dhoni" age: 37 41 Const columns =Cf Healey: Name | Accessor: Name’ dof Header : “Age Gcéessor :'aq4e" 34 return € |
>. Ldiv> + 53) App-T og yy ‘. In port. HOC from, ‘1 HOC’: xender C
HOC Example | 3 pp = Hoc (App); d | _ Output. *inio_@-Sige Cle /Ubhih ie tale bundle. The undle is responsible for | an entiy at ones on the webpage. sai =e Co itting improves:— QThe performance of the cpp © The impact on nemo @ The clousnla dable |cillohytes Size. for Code iting into the app oud e i I Inport 2 Se ote x- he | Reaet-la function calles ty_xencder a dyn- amic as osio_requlax component. ____ Before:- ae: Rope 1G arnple Component: [| function my Component CPE H xvekurn
C { |
° [", SE + " —___.@ Context -Co: . ——|_ TE oe fo the cont : a = context csithin dion —__ | | O-——>) TOPPER (Jee 8 _ WORLD ig SS —— ae I etass. context Tiabi= > p>— +The conlext ype property ona clas y——+as ign a con ext object ~tohich-is-Céealed_by 7+ _React « creole Context (). Tt aillouaS Jou te Co, “| Sume the Closet current value, of 4 ~——+_using this: contexb- aah td — -d tL - Class Bip extenc Cisiatnaah 4 ’ eared # deturn ( ! & a =! 4 + ft [Bk bColor Context. Peovicler + ny t - | + 14 * function Button Cprops ) £ - | return _¢ 4 ye t
00 e 2 ei 7 React Hanks:— Hooks are the news feature Injrockuced in React \G-8 version. Tt ol other React feahire without uoriting a clas Rules of Hooks:~ MOnly call Hooks ot the top level a. —— @ Only call Huoles fiom React functions _____—— Hooks Stale == —__, Hook sinte is the new way of declaring — | ci state in Reack app Hools uses useSiuteC) t functional Component fox setting onc sebivie I 4 state | 1 App-Ts. import React ,duseState J feorm ‘react’?\| TOPPER rot — function Count [pp cog _———|_ Const a Sehfounk LeuseStnie (a3, fee ON aide : | echt p = ~ ti mona ey tts onClick ={C) =? ; 4 Clicks Me | | _S/ button > I) div> ey - Export _clefuult Count App " tee fox Model view Conhaller Ils the user interface fot_Cleveloping. |_Mve. : eee.elacemate. TOPPER a O WORLD (Oks _ the _Model_cmd_the view Components Dr tukes — _ sex input manipulates the dati cand causes You clicked 4 times, clehime UPDATES (MANIPULATES BD A % ¥ E MVC Architecture at soe ve oe cach ‘ar nave restored an__ ss / mye cattle ——T ——— TOPPER wort ; Flux the in Set ada] hoduce din} “Tp. _@ | _iS in: - Pe axel =F _ —ein 0 5 Bis ixe clio. port Uni= direc. _ ©I Ti supprerts Bicdines ~~ | ol data He Sct i i is Cv Vath ) ~ | isthe kes are key i el ALS: Synchronous = | Ti is asynchronous, - 6 ° 8 le all . evergilning. HT is baad te debug] Tt is cosy to debug *—@ [Bis difficult! tp 1 Tt is emsy. to the 2 Understand 35 jororect? under Stand. (| size incieases A @_| Tis maintoi 10. > | huge. t 1 is difficult as the Casy and reduces 1s i 2 =O | “esting of application | Testing of applicatiso Si 418 difficull- f eu | Bealabiliy is complex! 14 can be easily 5 able._4 chcsmate TOPPER = WORLD 2) aaa |-@) Reclux has cn only She Whereas Flus has — many Sioxes. clied directly by Shove contains Wee updates triggers ———__ I = sel icas ET sent to co ps ——_| Store t= iso . + je of your Gpplication lists. Tt manages the — Status of the apelicaton and has co dispatch function Ti is like c bain stesponsible for oll — moving parts in Redux | Action Action is sent o* cis patched from the. — . 15: n be are f seatedTOPPER — Wort oe the ste the -informabiae of sug = e [tt includes imformetion such as type of Mey fr | time of eccuronces toca tion of o ances i ansible pet mae which 6 tale ita, = |G component needs fp render _as_o new | | clament and follow a parent = child hierar it | React Dom.creale Portal Cchild , container a ———F Examyo\ i os tal t- 3 L. We want to~insert a child component — | diffrent locatron in the Do™M oe. [ Yencler ¢ 7 —~ tetuin React Dom ,crcate Portal C —-—~ =~ i Nope .C x ms mylNede ee, 3s ~ i qLt —— = ~ [eens Rend wea ton 16 and its official APT a. | fox creating portal ye STi has 0 fallback fox React vexsion IS. illdren into a ___-lefault to clotiment body le © od. 0. [uae a . ante = | > “When to use 2 | © Madals. : Import ‘/ Aop-css’ ——import Portal Demo from */PortalDemo. Js” ; — Class Ppp extends Component f feesTOPPER = wort [LP render o£ sxe turn C ——_—_—=> - Portals Demo _ | Cloctument get Elerment Bud ch C! Portal -yot! ? ) 3 es index. html. a

You might also like