singulars/funcionalitats/wp-react.md

@@ -102,11 +102,14 @@ Fent ús de les APIs de ReactDOM podem crear nodes arrel per a una aplicació de
 
 ### Transpilació i empaquetament
 
-El frontend de l'oficina virtual de Som Connexió està creat amb l'utilitat [`create-react-app`](https://create-react-app.dev). Aquesta utilitat ens permet crear entorns de desenvolupament autoconfigurats per a aplicacions de React de tipus _single page applications_. Els entorns de desenvolupament generats per aquesta útilitat gestionen la configuració com un paquet extern actualitzable amb el sistema de dependències de npm. D'aquesta forma, els equips de desenvolupament externalitzen la necessitat de gestió i manteniment de la configuració i s'adequen als estandards definits per la utilitat. El resultat és la possibilitat de disposar d'un entorn de desenvolupament llest per ser productiu en questió de segons que implementa els millors estandards a nivell de solucions tecnològiques i sense necessitat de dedicacions destinades al seu manteniment. Com a contrapartida, disposarem d'un entorn de treball que amaga els arxius de configuració i que gestiona de forma externalitzada i no personalitzable les eines de desenvolupament disponibles. Això pot ser problemàtic si no esperes que la teva aplicació de React funcioni com una _single page application_. Aquestes limitacions són les que han portat a la exposició a la web pública dels fluxes de contractació i alta a través de la incrustació via iframe de tota l'aplicació de la oficina virtual sota el subdomini [oficinavirtual.somconnexio.coop](https://oficinavirtual.somconnexio.coop)
+El frontend de l'oficina virtual de Som Connexió està creat amb l'utilitat [`create-react-app`](https://create-react-app.dev). Aquesta utilitat ens permet crear entorns de desenvolupament autoconfigurats per a aplicacions de React de tipus _single page applications_. Els entorns de desenvolupament generats per aquesta útilitat gestionen la configuració com un paquet extern actualitzable amb el sistema de dependències de npm. D'aquesta forma, els equips de desenvolupament externalitzen la necessitat de gestió i manteniment de la configuració i s'adequen als estandards definits per la utilitat. El resultat és la possibilitat de disposar d'un entorn de desenvolupament llest per ser productiu en questió de segons que implementa els millors estandards a nivell de solucions tecnològiques i sense necessitat de dedicacions destinades al seu manteniment. Com a contrapartida, disposarem d'un entorn de treball que amaga els arxius de configuració i que gestiona de forma externalitzada i no personalitzable les eines de desenvolupament disponibles. Això pot ser problemàtic si no esperes que la teva aplicació de React funcioni com una _single page application_. Aquestes limitacions són les que han portat a la exposició a la web pública dels fluxes de contractació i alta a través de la incrustació via iframe de tota l'aplicació de la oficina virtual sota el subdomini [oficinavirtual.somconnexio.coop](https://oficinavirtual.somconnexio.coop). Amb l'ajuda d'un sistema de rutes vinculades a un sistema d'autenticació dels usuaris, l'oficina virtual disposa de rutes públiques i privades. Les públiques són accessibles sense necessitat d'autenticació, les privades no. Les rutes públiques, que funcionen sense necessitat de sessió d'usuari, són les que es mostren al _iframe_ incrustat a WordPress, les rutes privades són les que donen accés als usuaris a la seva oficina virtual.
 
-Al abordar la necessitat de diferents rutines de transpilació i empaquetament del nostre codi per tal de generar diferents distribuibles de complexitat variable ens topem amb la impossibilitat de solucionar el problema amb configuracions personalitzades de les eines de compilació, pel que hem d'optar per solucions que es donguin a nivell de codi (que sí que està sota el nostre domini). 
+Al abordar la necessitat de diferents rutines de transpilació i empaquetament del nostre codi per tal de generar diferents distribuibles de complexitat variable ens topem amb la impossibilitat de solucionar el problema amb configuracions personalitzades de les eines de compilació. Com s'ha comentat, l'entorn de desenvolupament empreat no permet aquest tipus d'aproximació. La solució ha de donar-se, no a nivell de configuració del sistema de transpilació i empaquetament –[Webpack](https://webpack.js.org/)–, sinó a nivell de codi, on si que tenim autonomia, i des d'allà aconseguir modificar el comportament del transpilador. L'estrategia seguida és la de configurar, a nivell de codi, importacions de mòduls condicionals en base al valor de variables d'entorn.
 
-L'estrategia seguida és la de configurar, a nivell de codi, importacions de mòduls condicionals en base al valor de variables d'entorn. Exemple:
+> **Variables d'entorn**<br>Una variable d'entorn és un valor definit per l'usuari que pot afectar el funcionament d'un procés dins d'una computadora. Les variables són part de l'entorn en el qual el procés corre. [Wikipedia](https://en.wikipedia.org/wiki/Environment_variable)
+
+
+#### Exemple d'importació de mòduls condicional en base a variables d'entorn
 
 ```jsx
 import React from "react";
@@ -126,7 +129,7 @@ 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.
+Un cop resolta la necessitat d'importacions condicionals de mòduls, i per tant, de definició de variants de l'arbre de components de React de la nostra aplicació, s'haurà de definir diferents mòduls, o components, d'applicació. Quan parlem de mòduls d'aplicació fem referència al nivell més alt del nostre arbre de components, el nivell global, o _root_. Des d'aquí es configuren les variables i els estats que han de ser visibles des d'arreu de l'aplicació i els sistemes de rutes que gestionen la visibilitat dels diferents components. En una primera iteració es crearan dos mòduls d'aplicació: `App.js` i `Forms.js`. 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