Ací es mostren les diferències entre la revisió seleccionada i la versió actual de la pàgina.
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/26 19:15] armando_mata_urbaneja |
daw_mp06_reactpy [2023/06/27 15:59] armando_mata_urbaneja |
||
---|---|---|---|
Línia 5: | Línia 5: | ||
{{ :: | {{ :: | ||
- | React Py és una llibreria que ens permet crear interfaces amb python sense emprar javascript. | + | React Py és una llibreria que ens permet crear interfaces amb python sense emprar javascript. |
+ | Es basa, com fa ReactJS, en components per a construir la interfícies de l' | ||
+ | |||
+ | |||
+ | Tot i així, els navegadors no són capaços d' | ||
Trobaràs la seva documentació a [[https:// | Trobaràs la seva documentació a [[https:// | ||
- | Tot i estar força incomplerta podem veure com esw codifiquen molts dels elements típics de ReactJS en ReactPy. Des d' | + | |
+ | |||
+ | |||
+ | |||
+ | Tot i estar força incomplerta podem veure com es codifiquen molts dels elements típics de ReactJS en ReactPy. Des d' | ||
===== Un primer exemple ===== | ===== Un primer exemple ===== | ||
Línia 32: | Línia 40: | ||
Després d' | Després d' | ||
+ | < | ||
+ | from reactpy import component, | ||
+ | from reactpy.backend.fastapi import | ||
+ | from fastapi import FastAPI | ||
- | '' | + | #.... |
- | '' | + | |
- | '' | + | |
- | '' | + | #Al final del codi |
- | '' | + | app = FastAPI() |
+ | configure (app, HelloWorld ) | ||
+ | </ | ||
+ | I creem el primer component | ||
+ | < | ||
+ | @component | ||
+ | def HelloWorld(): | ||
+ | | ||
+ | </ | ||
+ | Observa com el retorn es fa emprant l' | ||
+ | Pots obtenir més informació a | ||
+ | [[https:// | ||
+ | Un altre exemple d' | ||
+ | < | ||
+ | html.div( | ||
+ | html.h1(" | ||
+ | html.ul( | ||
+ | html.li(" | ||
+ | html.li(" | ||
+ | ), | ||
+ | ) | ||
+ | </ | ||
+ | ==== Esdeveniments ==== | ||
+ | |||
+ | Els elements html també poden rebre esdeveniments, | ||
+ | |||
+ | < | ||
+ | return html.button({" | ||
+ | </ | ||
+ | |||
+ | Tens més exemples a [[https:// | ||
+ | |||
+ | ==== 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:// | ||
+ | |||
+ | Un exemple senzill: | ||
+ | |||
+ | < | ||
+ | choices, set_choices = hooks.use_state([]) | ||
+ | resposta, set_resposta = hooks.use_state("" | ||
+ | </ | ||
+ | |||
+ | |||
+ | Aquí creem dues variable d' | ||
+ | En un mètode que gestioni un esdeveniment podem, per exemple, canviar el seu valor: | ||
+ | |||
+ | |||
+ | < | ||
+ | def handle_choices(event): | ||
+ | | ||
+ | </ | ||
+ | |||
+ | I aquesta variable d' | ||
+ | |||
+ | < | ||
+ | return html.div(resposta) | ||
+ | </ | ||
+ | |||
+ | |||
+ | Cal recordar, que a l' | ||
+ | |||
+ | Finalment indicar que tenim altres hooks, propis de React, com ja he esmentat a l' | ||
+ | |||
+ | Teniu un [[https:// | ||
+ | |||
+ | |||