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ó

--- daw_mp06_reactpy [2023/06/26 19:13]
armando_mata_urbaneja
+++ daw_mp06_reactpy [2023/06/27 16:02] (actual)
armando_mata_urbaneja
@@ Línia 5: / Línia 5: @@
 {{ ::reactpy-logo-landscape.svg |50px}}
-React Py és una llibreria que ens permet crear interfaces amb python sense emprar javascript. Empra, com fa ReactJS, components per a construir l'aplicació client. Per a la seva visualització en un navegador compila el codi python a 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'aplicació client. Té l'avantatge d'utilitzar el llenguatge Python. Per a desenvolupadors habituats a treballar amb Django o Flask els hi resultarà molt més còmode que utilitzar Javascript.
+Tot i així, els navegadors no són capaços d'executar codi en Python, i per tant, per a producció o per a proves en un navegador, l'entorn de desenvolupament compila el codi python a javascript
 Trobaràs la seva documentació a [[https://reactpy.dev/docs/index.html|https://reactpy.dev/docs/index.html]].
-Tot i estar força incomplerta podem veure com esw codifiquen molts dels elements típics de ReactJS en ReactPy. Des d'esdeveniments al més pur estil de javascript,  fins a Hooks com [[https://reactpy.dev/docs/reference/hooks-api.html#use-state|useState]], [[https://reactpy.dev/docs/reference/hooks-api.html#use-effect|useEffect]], [[https://reactpy.dev/docs/reference/hooks-api.html#use-context|useContext]], [[https://reactpy.dev/docs/reference/hooks-api.html#use-reducer|useReducer]], [[https://reactpy.dev/docs/reference/hooks-api.html#use-callback|useCallBack]], [[https://reactpy.dev/docs/reference/hooks-api.html#use-memo|useMemo]] i [[https://reactpy.dev/docs/reference/hooks-api.html#use-ref|useRef]]
+Tot i estar força incomplerta podem veure com es codifiquen molts dels elements típics de ReactJS en ReactPy. Des d'esdeveniments al més pur estil de javascript,  fins a Hooks com [[https://reactpy.dev/docs/reference/hooks-api.html#use-state|useState]], [[https://reactpy.dev/docs/reference/hooks-api.html#use-effect|useEffect]], [[https://reactpy.dev/docs/reference/hooks-api.html#use-context|useContext]], [[https://reactpy.dev/docs/reference/hooks-api.html#use-reducer|useReducer]], [[https://reactpy.dev/docs/reference/hooks-api.html#use-callback|useCallBack]], [[https://reactpy.dev/docs/reference/hooks-api.html#use-memo|useMemo]] i [[https://reactpy.dev/docs/reference/hooks-api.html#use-ref|useRef]]
 ===== Un primer exemple =====
@@ Línia 32: / Línia 40: @@
 Després d'això creem un fitxer main.py, on importarem les llibreries
-''
+<code>
 from reactpy import component,html,hooks
 from reactpy.backend.fastapi import  configure
 from fastapi import FastAPI
+#....
+#Al final del codi
 app = FastAPI()
-configure (app, HelloWorld )''
+configure (app, HelloWorld )
+</code>
+I creem el primer component
+<code>
+@component
+def HelloWorld():
+   return html.div("Hello World")
+</code>
+Observa com el retorn es fa emprant l'objecte html, i els elements que hi vulguem visualitzar.
+Pots obtenir més informació a
+[[https://reactpy.dev/docs/guides/creating-interfaces/html-with-reactpy/index.html|HTML With ReactPy]]
+Un altre exemple d'elements renderitzats per html. Observa com creem una estructura d'elements amb més elements i elements fills:
+<code>
+html.div(
+    html.h1("My Todo List"),
+    html.ul(
+        html.li("Build a cool new app"),
+        html.li("Share it with the world!"),
+    ),
+)
+</code>
+==== Esdeveniments ====
+Els elements html també poden rebre esdeveniments, i això ho podem expressar com segueix:
+<code>
+return html.button({"on_click": handle_event}, display_text)
+</code>
+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
+A cotinuació es mostra un fragment del codi
+<code>
+from reactpy import component,html,hooks
+from reactpy.backend.fastapi import  configure
+from fastapi import FastAPI
+import requests
+@component
+def Item(text, initial_done=False):
+    done, set_done = hooks.use_state(initial_done)
+    def handle_click(event):
+      set_done(not done)
+    attr= {"style": {"color": "green"}} if done else {"style": {"color": "red"}}
+    if done:
+       return html.li(attr, text)
+    else:
+       return html.li(
+          html.span(attr, text),
+          html.button({ "on_click": handle_click }," Fet!")
+       )
+@component
+def Todos(items):
+   choices, set_choices = hooks.use_state([])
+   resposta, set_resposta = hooks.use_state("")
+   def handle_choices(event):
+      set_resposta("Gràcies per la teva resposta")
+   def handle_click(event):
+      id = event['target']['value']
+      # obtenim llista de choices
+      choices_API = requests.get('http://localhost:8002/api/get_choices/'+id)
+      resultat = choices_API.json()
+      items_choices= resultat['choices']
+      set_choices( [
+        html.option( { "value":i['id']},i['choice_text'])
+        for i in items_choices
+      ])
+   list_item_elements = [
+      html.option( { "value":i['id']},i['question_text'])
+      for i in items
+   ]
+   return html.div (
+     html.select({"on_change": handle_click },list_item_elements),
+     html.select({"on_change": handle_choices },choices),
+     html.div(resposta)
+   )
+@component
+def HelloWorld():
+    response_API = requests.get('http://localhost:8002/api/get_questions')
+    resultat = response_API.json()
+    questions =  resultat['questions']
+    # for parcial in resultat:
+    #    print(parcial['question_text'])
+    for parcial in questions:
+        print(parcial['question_text'])
+    return html._(
+      html.h1("Llista de tasques ! "),
+      html.div(Todos(questions)),
+      html.ul(
+        Item("Aprendre React amb Python", True),
+        Item("Dominar Django com un pro"),
+        Item("Sobreviure a un projecte amb Laravel")
+      )
+    )
+app = FastAPI()
+configure (app, HelloWorld )
+</code>

bytes.cat

Eines de l'usuari

Eines del lloc

Diferències

Eines de la pàgina