Scribd Logo
Upload

Welcome to Scribd!

  • React Notes MajoLedesma PDF

    Uploaded by

    DrizzzT
    2 views24 pages

    Original Title

    React-Notes-MajoLedesma.pdf

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF or read online from Scribd
    Flag for inappropriate content
    2 views24 pages

    React Notes MajoLedesma PDF

    Uploaded by

    DrizzzT

    Copyright:

    © All Rights Reserved
    Download as PDF or read online from Scribd
    Flag for inappropriate content
    of 24
    Que. we 2 Una biblioteca de JovaSeript para - -construrr ‘unterraces de usuario: React DOM. render ( chp Holo. mundo! dowumentt.qat Element By td ('roo%") )s ‘a Bate pegueno Eypelo muestra un enedkezado con el tekto: Hela, munde| ——= a . ° . eres dela vito de JovaSeript. q* Produce “elumentos” de\Reaebs . mas p de | ELEMENTO eso Reaveto de las Deseribe lo que quieres ver en la pantalla. ‘Considerdndo las Hquienres variables: . const name's 'Elon Musk’; corist elements

    Hello, frome? z ¥ i te siemant, en alguna: parle eho HTML ij 2 eon t a leet 34 Cred) “cid 1a eSet"y'c[duv5s, roe ay. endo un fade raizZ. “> mavestra! Se ode utilizar yea dentro de Aenlniniscnis: iF bodes POR: | : _asignarlo a variables. aceptaro como pc ae 4 rekemarlo desde dentro de Tuneones. as @glascs ; alribules con JAX: » Puedes utilizar cowillas pata esteciei ear. Frings Como ‘orn buted : const: element = : const. | hementt = < ig she Suter. auatarUrl ts © representa objclos 2 Namados React lee estos obyslos 4 los uso para. Construir al DOM gyemnples Aon icinlices cone’ element = ( const leinatt= React .creatte Element ( BY chi className ¢ ‘greeting » HY, ~ Pola. ,»mundol lass Name -“9Feetiig’ © [hos | Wola amundol, - Bs w|i) j ondoni . Se eT emontos ~ BLEMENTO™ ! sys wis ect se ve \Worentaaana ConsT clemerit= <> Hello, world c/In\ > j \mogana gue hay un
    en alguna. arte del ATML
    Hello, { props name? — : ee ‘2 5 AcEeMN UN ARADHNENTO ae | | OE ofbierolPRGRS" (gue proviene £ es [. propiedades’) QON DATOS | or hina +. BEWUELUE Ln) ELEMENTO 9 REACT son : we Wieralwenie | , a ss Fungiones. de i: : Ademds de etiquetas del. tom, los eementos tamietén pueden efresontar jeompenentes? deFinides por el Usuario + Function, Welcome. (progs) teturn } const lenin 2 € Weleore name = 'Elow’ b React DOM. render ( element , dovament: sen cot) ; GP Vanionnes Rist oder) eon deve Wee ae z Roast: Wosna al eo Come props! : « React Dat octuatiia al DOM para que, oinercta con sity Hello, Elon ~ teacl. component. React te permite derintr componentes como funciones o clases. Poso decincr uno clase de comvonente React, necesitat extender React. Comronent + class Weleome axtonds React. Component 5 render () $ y TOMS AUS aA ai a Ae R 2 z a = Si akn no vblizas ES6, puedes wbilizar el mbdulo & create—react-class + vor createReact Class = Fequire Ceseate-react-class") ; vor Aseetinng = ereote React class Ch Tenders Funetion() § return chis ello , Huis. props.name ¢ a el 4 ‘wide -Cominmente usados - un componente. j Se imserta en el DOM. @ constructor() : SINO INiciALIZAS EL ESTADO Y No ENLATAS Los METODOS , NO NECESITAS IMPLENENTAR UN CONSTRUCTOR PARA TU COMPONENTE REACT. Normalmente ,Se utiliza para dos propétitos + —» Para inicializar un estado loeal asiqnando w objto al his state, — Fora onlazar manejadores de eventos © una nstancio 2 render() = S EL UNICO METODO REQUERIDO EN UN QOMPONENTE DE eLASE Quando se Vama , examina a y this. state at dewelve uno de los Siquientes + pos: —> Elewentos de Reast (£4:
    ) — Arrays 4 Fraqmentos + Permiten gue puedas devolver wdlkiples elementos desde ol render . —> Portales = Permiten renderizar Wyos a ofro Subdrbol de\ DOM. — String 4 WOMeros, Jeanos o nulos «No renderizan vada. 2 component Did Nount ()) Se iwoca wwmediatamente despuds de que un Comtouente se wonte (Se wserte ew el drbol) Este wétodo es un buen lugar para establecer eualgucer suseripction . Si lo hates , wo divides darle de baja en - aomponent Will Unmount (’). __adualijacion. Puede ser causada, por combios en los props 0 el estado. orender() 2 Component Did Update () : component DidUpdate (prevProps, prevState , snapshot’) S@ \wvoca wmediatomente después de que lo actualizaci dy Ocurro. Exte wietodo wo es llamado para el renderizodor imictal . Es un buen lugar para hacer solicitudes de rad stempre 4 ewando compare los accesortos actuales cou los anteriores. ° componenst Will Unmount () Se wvoca wwedtatomente cautes de desmoutar 4 destrucc uw Componente . Reoliza las tareas de Uimpiezo necesarias en este metodo. No debes omar setState() em componentiyilUrmount ( ) porque, el Componente Wunca Serd vuelto a rendertzar. mane jorelo eventos Los eventos de Reach se nowbran usando — cowmelCase er vez de minusculas = Con ISX pasas una Funeidn como el wamejador del eveuto , ew vez de Un sisting, WTML REACT En React vo puedes retormar False para prevenic el comportamiento por derecto. Debes \lamar prevent Derault. Paar ActionLink () 4 artes MUCK CLA Cd COED Care NPA Uo a Oy CSAC) (The link was clicked Leena ¢ Pan ea OC pe Uc aes Click me ya Los EVENEOD en React se derinen de manera declarative , Producidos eon JSX en el metodo render (). un i Fara derinirlos € oo Se indica el tipo de evento. 92 Indicamos el metodo que ord. de mane {ador de everito. = @: Un manejador de evento os bdsicamente, Una Fundion “SB” que dertw la Funcionalidad que % egeutard al distaracse Un evento. onclae) q return ( re 7 2 EaSTTR rotatory GIT en Cr cy hota [/Ocuttar Hider 9 v “ y CoA TR Nee ig Luego _ derinimos a wanejador : the on ECC Ie Pra Goats oa a 4 A implewentar un moneyador de eventos es habitual qe Queramos acceder \as props © metodos del Componente. Pero on las Fumerones no es porible accedes a his oe roreremeta al dbjeto sdore. el que se \wvoca ei wetodo. Se wecesita ‘bindear' et contexto? o Divackamente en el constructor eam Ca DET super Cprops) 5 Pea aD da conponente A Pieris ments ace Seal pita hc GMIO ¢ oo En ef template. Paci cTy Er Bee OE OCT al LOM aU .4 \o reuderizames al DOM. Este cadigo muestra una \ista de nimeros enbe 18. Reractorizamos el oj mplo anterior en UA componente Que Acepte un array de Numbers e imprma una lista de elementos + Function NuwmberList (props) 1 Const wumbers « props. numbers; Const ListTems = numbers. map ((number) => & BSE eS a iKoNG CPS Ma Sree ed els i 2 5 const wumbers + [4,2.3,4.917 DLT Nao ECT ¢ SIN SS mt HON Cans a Coast pal Cees ta Uh Al evoutar este cédigo , serds advertide que una Key deberia ser Proporetonada para items de lista Ae ho an (Ol en D <[U> Ayudan a React a tdewhetear que (Hews han Ke! Cambbiado , Son agieqados 0 SON eliminados . Las keys deloen ser dadas a los elementos dentro * del array. Habitualmente vas a usar IDs de bis datos Como keg.
  • 2 <[lir Ew WIML, los elementos de rormulartor como los , , y ch className Basra) Ces ro Pals at) Cea DA aL mes nS SITU aig Caz A er Yonrel eo 2 J - ESPECIALIZACION -. A, veces pensames en componentes emo "casos" coneretos de otros componentes . Por eymplo, podriamos decis que un Weeome Dialog es un caso Concreto de Dialog . En reak, esto Tambien se consi que por composicion ,£K \a que wu compouente cou was ‘eseecifico" renderiza vNo WaS generico” Y lo CouFigura Con props : Pic ADAG) (Coes pase PA ote Re te Amos Pt Nmee ch className ACC Toca) : baastxs Paes

    You might also like