bytes.cat

La wiki d'FP d'informàtica

Eines de l'usuari

Eines del lloc


daw_mp06_reactpy

Diferències

Ací es mostren les diferències entre la revisió seleccionada i la versió actual de la pàgina.

Enllaç a la visualització de la comparació

Ambdós costats versió prèvia Revisió prèvia
Següent revisió
Revisió prèvia
Ultima revisió Ambdós costats nova versio
daw_mp06_reactpy [2023/06/27 15:26]
armando_mata_urbaneja
daw_mp06_reactpy [2023/06/27 15:59]
armando_mata_urbaneja
Línia 80: Línia 80:
 ) )
 </code> </code>
 +
 +==== Esdeveniments ====
  
  
Línia 88: Línia 90:
 </code> </code>
  
-Tens més exemples a Responding to Events+Tens més exemples a [[https://reactpy.dev/docs/guides/adding-interactivity/index.html#section-1-responding-to-events|Responding to Events]]
  
 +==== Components amb estat ====
 +
 +Com a ReactJS, un dels elements més potents que tenen aquests frameworks són els estats. A ReactPy també tenim aquesta opció, com esmentavem abans, i ens permet renderitzar el nostre SPA a canvis de qualsevol valor. A [[https://reactpy.dev/docs/guides/adding-interactivity/index.html#section-2-components-with-state|Components with state]] tens més exemples.
 +
 +Un exemple senzill:
 +
 +<code>
 +choices, set_choices = hooks.use_state([])
 +resposta, set_resposta = hooks.use_state("")
 +</code>
 +
 +
 +Aquí creem dues variable d'estat, la primera inicialitzada amb un array, i la segona amb una cadena de text
    
 +En un mètode que gestioni un esdeveniment podem, per exemple, canviar el seu valor:
 +
 +
 +<code>
 +def handle_choices(event):
 +   set_resposta("Gràcies per la teva resposta")
 +</code>
 +
 +I aquesta variable d'estat renderitzar-se amb el component
 +
 +<code>
 +return html.div(resposta)
 +</code>
 +
 +
 +Cal recordar, que a l'igual que amb ReactJS, un canvi de valor d'una variable d'estat que es rendertiza en l'html, obliga re-rendertizar l'html, sempre sense recàrrega de l'html, ja que és un spa.
 +
 +Finalment indicar que tenim altres hooks, propis de React, com ja he esmentat a l'inici de l'article, però que aquí no detallarem
 +
 +Teniu un [[https://github.com/armandmt/reactpy|repositori de github]] on podeu veure un projecte sencer. En ell es consulta dues API's per oblir dos select
 +
 +
  
  
daw_mp06_reactpy.txt · Darrera modificació: 2023/06/27 16:02 per armando_mata_urbaneja