singulars/funcionalitats/wp-react.md

@@ -25,7 +25,7 @@ WP React farà ús de les APIs `react-dom/client` per tal de renderitzar els com
 
 ### createRoot
 
-La funció `createRoot` del mòdil `react-dom/client` ens permet crear un node arrel d'on fer penjar els teus components de React dins d'un node DOM. React prendrà el control del DOM descendent del node arrel. Sovint, quan treballem amb React, treballem fent aplicacions gestionades totalment per la llibreria vinculades a un arxiu HTML amb un sol node que ens servira com a arrel per al nostre arbre de components de React, però també és possible delegar en React parts parcials del nostre DOM i fer ús de la funció `createRoot` múltiples cops en una mateixa pàgina per mostrar components de react.
+La funció `createRoot` del mòdul `react-dom/client` ens permet crear un node arrel d'on fer penjar els teus components de React dins d'un node DOM. React prendrà el control del DOM descendent del node arrel. Sovint, quan treballem amb React, treballem fent aplicacions gestionades totalment per la llibreria vinculades a un arxiu HTML amb un sol node que ens servira com a arrel per al nostre arbre de components de React, però també és possible delegar en React parts parcials del nostre DOM i fer ús de la funció `createRoot` múltiples cops en una mateixa pàgina per mostrar components de react.
 
 A continuació es mostra un exemple de com podem utilitzar React per gestionar dos parts diferents del DOM, la nevagació i els comentaris, sense que React prengui el control de tot el DOM de la pàgina.
 
@@ -126,6 +126,8 @@ Seguint aquesta estratègia i via variables d'entorn podem generar variants de l
 
 > **CJS vs ESM**<br/>[CJS](https://nodejs.org/api/modules.html#modules-commonjs-modules), o CommonJS, és el sistema de mòduls propi de node.js. [ESM](https://tc39.es/ecma262/#sec-modules), o ECMAScript Module, és el sistema de mòduls definit per l'especificiació oficial de JavaScript. CJS és anterior a ESM i apareix en el context de node.js per resoldre la necessitat de treballar en un entorn de terminal amb javascript. ESM neix amb una evolució de les especificacions d'ECMAScript per resoldre la necessitat d'incloure un sistema de mòduls definit de forma estàndard per a tots els entorns de JavaScript.
 
+En conjunt amb aquest sistema d'importacions condicionals de mòduls, s'haurà de definir diferents mòduls d'applicació (App.js i Forms.js) que defineixin un arbre de dependències específic per a cada cas d'ús. El mòdul `App.js` contindrà tot l'arbre de components de l'aplicació de l'oficina virtual. El mòdul `Forms.js` importarà només els components necessàris per a resoldre els fluxes de contractació. Cadascuna d'aquestes sub-aplicacions configurarà el seu propi _router_ amb les rutes i vistes així com els diferents mòduls de la _Store_ que necessiti.
+
 ### React Router
 
 **El frontend de l'oficina virtual de Som Connexió fa ús del paquet [React Router](https://reactrouter.com/en/main) per gestionar l'estat de visibilitat dels seus components. Aquest és un aspecte a controlar quan executem l'aplicació en l'entorn de WordPress ja que la gestio de URLs de WordPress colisiona amb la gestió que fa React**. Per tal de resoldre això, les versions empaquetades per a ser executades en l'entorn WP hauran de fer ús de la variant [HashRouter](https://reactrouter.com/en/main/router-components/hash-router). Aquesta modalitat de router treballa prenen el control sobre el compononent _hash_ de la URL. Una URL es pot dividir en 5 components:
@@ -135,9 +137,18 @@ Seguint aquesta estratègia i via variables d'entorn podem generar variants de l
     
 El sistema d'enrutament de WordPress treballa sobre els components _pathname_ i _search_, però no utilitza el _hash_. Per tal d'aconseguir que els sistema d'enrutament de WordPress i de React convisquin en un mateix context, s'ha de configurar React per treballar sobre el _hash_.
 
+El resultat final serà que de les dues versions distribuibles, la pròpia de la oficina virtual configurarà el seu _router_ com un router de URL amb la totalitat de les rutes disponbiles a l'oficina virtual activades, i la versió per a incrustar a WP configurarà el _router_ com un ruter de hash sense rutes privades ni sistema d'autenticació.
+
 ### Configuració HTTP CORS de la API
 
-Configuració de Django perquè identifiqui el domini somconnexio.coop com a vàlid.
+L'oficina virtual utilitza les comunicacións [ajax]() per alimentar de dades el _frontend_. Aquesta comunicació apunta a la REST API de l'oficina virtual implementada amb Djang, un framework de python. La API està exposada sota el domini [oficinavirtual.somconnexio.coop](https://oficinavirtual.somconnexio.coop), el mateix entorn on està exposat el codi frontend de la oficina virtual.
+
+Quan la nostra aplicació s'executi en el context de WP el nostre codi de React s'estarà executant sota el domini de la pàgina web de SomConnexio, [somconnexio.coop](https://somconnexio.coop). D'això se'n deriven dos problemàtiques a tenir en conta:
+
+1. Configuració de React: En el procés de compilació de React s'injecten, via variables d'entorn, els valors de les URL de les que ha de disposar l'aplicació per accedir a les diferents APIs via connexions http així com gestionar redireccions entre pàgines. Per evitar problemes de links trencats quan l'aplicació s'executi en fora del seu context natural, s'ha de controlar que aquestes variables d'entorn estiguin definides de forma condicional en funció de l'entorn per al qual s'està transpilant el codi.
+2. Configuració de Django: Django disposa d'un arxiu de configuració on s'indica el domini al qual la nostra aplicació a de servir. Per defecte, qualsevol petició que no s'origini des d'aquest domini i arribi al procés de python és descartada. Haurem de fer alguns canvis en la configuració de Django perquè l'aplicació reconegui el domini [somconnexio.coop](https://somconnexio.coop) com un domini vàlid i permeti a React accedir a la REST API des d'aquest domini sense generar problemes de CORS (Cros Origin Resource Scripting).
+
+
 
 ### Desplegament