that is React Js 7 tee rary ‘or ui Idi ng eusa 7 7 ay aaa OM Ronents fe 7 ; £CE component ct Ere —. end library | which is responsible "on} i 77 layer sf the application ie Tt wey initialy developed & Maintained by facebook K Llhyy We use React Js 7 D-1t is used 40 develop the UI thot: improve * the peed 2). If uses yirbugl bom (po umepk Object Model) which improves the performance “ot ihe Opp The 4S virtual pom - which im proves the performance of the app. | >. The JS virtual pom is faster than the ‘ _regulay Dom - econ _u: Reacl Is on the client | & server side language. : | 4). Tt use. om pon nts % dato patterns thot Limprove_tead ability 2 mainlain Laeger op i ). Reack wil) handle efficiently updah ng & { rendering of the component i 2 Xx React Js features ~ Dd, Tsx- ).T5, fonds for JovoScript § Hr W.Tt Is To aScript nynkan extension. : un). This Syntax iS praceed inte 1s_calle 7 4 ; : React framework @ scanned with OKEN Scannerthe Ese. is I oplimize U2 _updates by creating a ligt! _——tweight_cepy identify changes selectively ae SS = pdating only seleve clive Parl, roinimizin: a performance jerhend enhancing the us - 0 Besct je 1c ail aba! components a perience - 1) React TS oppi? ic made up of enullip components § each Cam ponent ha: logis and contra! DReoct IS uses ISK Files which make the = “This cempanents can be revsable whic} Oppl® simpie 2 the code wells understand| helps you tn maintain code i henciseriing on Wide know that the React 15 is a component = Jayer Srole project hosed approach which makes the cole reusabi os _you cf. ———2One_way data binding . React Is_ig d@aigned in guch a ©): Performance = that follows wnidirectional data flow D-T) Jo ‘known as tp be great performance ES The benefit of unidirectional data flow Its features rmokes it much better than ol - is_gives yay betier performance th" appl”. frameworks: The teagon behind this thot ie mite The doko flow i nether clirech managed yDom, E then it ea, ditions) feature . It is “The poe i =platforrs § pragrammin = be the components are supposed ty be APL which deals with fTmi, xmU, xiir mt, routable the dota will b them canna W). The bom exists entirely (in a ‘memoy be chong - luc fe this when we reate q component wwe did_not write directly js nom.” 8: Virtual Dom = 2.1) igo tepresentolion of the engine! _b eos : 2 Ei )."Foay to lear ae Ip works like © late binding _ whe: Creating dynamic meb appl? became casie “ang modification happenin the le component = Hn) Performa, hancement = React 75. impr, nj: The entire O01 is terender in presentotion 2 new bom. performance rhual bom : cress _platferm § proqe @ scanned with OKEN ScannerTo clot meyer = nem atest API which deals ith bi xm and xHTML, mes! of the develeper fac reate_project folder - a om s_deyelaped which slaw down th 3 reate-react-app pyajest_ nay performance hut Reacl Js salve this prob npm install create- react-opp = hy virtual | ages r. i ae teate-teact-opp project na demo. project : project (open with cede) Difference bet” npm_and_npx + Traditionally 35 fra kk haye_an issue ip = : deali| ith SEQ. Mony web developers have np: ppm ffer problems in other longquages with seo Reocl Js overcemy this problem deyelopes D np» reate -react- apy D npm instol| create nevigated _variou: rch engi ____praject_nam. reoct opp ~ “create —rench= app Benefit of having ts library = project_name =) 5 The Js library ids more flexi develspers they oni 2. npe is the npm. 3. npm is the ned package runner package manager * Disadvantages = ). The high pace of a development 2. 1o _npx without inst. 9. npm ingialling libraries ips eape Anion eohone 3 diling any’ pockag dependencies using mene get project npr “Isx igo howiew 7-1 Reael Js us sx. 1¥s syntax extension thot allow HTML. with- 5 _onix fogedhe % About React sx Te_sinp this approach has its benefits D-sx is the xm | rm based syntax hut seme members of the development Lension = mrmunity consider Ts a3 _o harriey spe! O-I's o way te write 15 code using _ _ for pew deve oper: Le waplexity in th. xm) Home eaving cu Tsk isa integral part of hew every @ scanned with OKEN Scannercleveloper writes components export default searchbox = 278% elements to represent. custo: ce = cornpanents + So it is alan called user defing Comment = -erepone nts Monwally se tf yon Create Componen? nay Code on + s oput you “can moke use of such com: CEMpOReNts te prapshron erbiere y)_ather campenents by usin: elemen ‘omponenta = Components ore putin ave oder 7 - All_elements mous be closed Component in Peact serve _as independent f = Elements tha hove child node muy Feusoble Code black fox_u1_elemnent jee Nosed. . They represent diff parts of web peg = Atti butes that Strings oust he rain hotn tructune § hehaviour - quote: around therm Ther re th reusable code blocks contoinira] 2 = Ist ust he eturned in lower ca: logics § UT elements elements. mpenent promoke: efficiency g Scalabiiity web development in allowing developers fo # Some reser words — rapa § customize aethey needed class closstame fi him! for __React_companent = dik = onClicte 1 React component are the building black oF cz Bate ermine ack appl? saa qubmnil -_onSubmit Reusable code block canfaining logic _hlorks | “2 pr elements. A Ul is broken down inte ~#_ Syntay of custom / user- defined _componente= Iple individual pieces called ponents ip aes aneea RESTS You_con ark on component independently 3 a then merge them oll ints”-c “parent compen=at const € Geach Tere , SetSearch Term I= 3_then “App usestote (Ds r —— ponent heve +we type function compon- _teburn § ent aml class component q diy_id= "search-box" best suited need fo int companent i the components cleesnt t @ scanned with OKEN Scannera Eunchen components fee oa ee - a Simple _cemponents —fogeth, Patent cempoy + React props - props stands for properhies they are read a 2). Clazs_component ‘enly_" component ° re_Complex” than FuncHen compen. Tt is_on bjec! Which store the value oF - it Otbibute oF tag” and were imilgr to the value It _teyuire you t= extend from read of attrinste of tog ond pork tegether similar be e omponent “ond freate render funchon the html attribute : Tk pelurn reach clemen’ pisps_ore_immuteble 5: con nat a Yeu_can pass date from classy _ather class modify! thie 1S from Inside the component ompanent import React from “react function component = port const Demo = ( props) = ate irnport React from“ react" i z return function Greet bY Hello. f props name} Hello, Good PMorning Sth"? d @ scanned with OKEN Scanneri age jo [mPstt_Peact._{ Component } from "reads _ ae lass Messag, tends Component compenent © - ae instructor ¢) constructor (> i me sper perc ee ae thi tate = 7 ne ssage : | elcome: visitars? ——______t = i chonge Message © — £ this. seiStale ({ i Shis. seistate (f thie. Stale number 1 message *' thant you fer qubanitin a » _ 4 Ee render Of this. setStoted return ( humber = this state. number -!