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 | ||
integracio_de_django_amb_react [2023/07/06 10:12] raquel_alaman_navas |
integracio_de_django_amb_react [2023/07/06 10:25] (actual) raquel_alaman_navas [Integració de Reactjs (FrontEnd)] |
||
---|---|---|---|
Línia 24: | Línia 24: | ||
* **Account**: | * **Account**: | ||
- | --> Proposta implementació Customer i Account# | + | --> Proposta |
<file python models.py> | <file python models.py> | ||
Línia 227: | Línia 227: | ||
</ | </ | ||
- | Si és així, et sortirà una pantalla similar a aquesta: | + | Si és així, et sortirà una pantalla similar a aquesta |
+ | {{ :: | ||
4. Obre el fitxer //App.js// a la carpeta del frontend. Elimina el codi existent i substitueix-lo pel codi següent: | 4. Obre el fitxer //App.js// a la carpeta del frontend. Elimina el codi existent i substitueix-lo pel codi següent: | ||
Línia 434: | Línia 435: | ||
</ | </ | ||
- | 7. Crea una carpeta nova anomenada " | + | 7. Crea una carpeta nova anomenada " |
<file javascript Modal.js> | <file javascript Modal.js> | ||
import React, { Component } from " | import React, { Component } from " | ||
Línia 529: | Línia 530: | ||
export default CustomModal | export default CustomModal | ||
</ | </ | ||
+ | 8. Fes els canvis indicats a continuació al fitxer // | ||
+ | <file javascript index.js> | ||
+ | import React from " | ||
+ | import ReactDOM from " | ||
+ | import " | ||
+ | import App from " | ||
+ | |||
+ | import " | ||
+ | |||
+ | ReactDOM.render( | ||
+ | < | ||
+ | <App /> | ||
+ | </ | ||
+ | document.getElementById(" | ||
+ | ); | ||
+ | </ | ||
+ | 9. Per fer les peticions als endpoints de l'API al servidor del framework de Django, necessitarem instal·lar l' | ||
+ | < | ||
+ | npm install axios | ||
+ | </ | ||
+ | |||
+ | I, amb aquest pas, ja tenim una aplicació Fullstack Django-React utilitzant el framework REST Django per establir la comunicació entre el frontend i el backend. | ||
+ | |||
+ | <WRAP todo> | ||
+ | **Exercici: | ||
+ | Aplica la serialització de manera que es puguin gestionar els comptes associats als clients. | ||
+ | </ | ||
+ | |||
+ | \\ | ||
+ |