Exemple de base de dades en temps real de Reactjs CRUD Firebase - loizenai.com

Bloc

Exemple de base de dades en temps real de Reactjs CRUD Firebase - loizenai.com

https://loizenai.com/reactjs-crud-firebase-realtime-database/



La base de dades en temps real de Firebase és una base de dades NoSQL allotjada al núvol que us permet emmagatzemar i sincronitzar dades entre els vostres usuaris en temps real. Al tutorial, us presento com construir un projecte d'exemple de base de dades en temps real de Reactjs CRUD Firebase per fer una operació CRUD: sol·licituds POST / GET / PUT / DELETE amb exemples de codificació pas a pas.



- Dibuixo una arquitectura de diagrames de visió general de fullstack de Reactjs frontend a Firebase Realtime Database.
- Il·lustro detalls sobre les operacions CRUD react-firebase.
- Implemento l'aplicació Reactjs per fer una sol·licitud CRUD (Post / Get / Put / Delete) a la base de dades en temps real de Firebase.

Diagrama de l'arquitectura general: base de dades en temps real de Reactjs CRUD Firebase



L’aplicació Reactjs CRUD està dissenyada amb 2 capes principals:

- Els components React.js us permeten dividir la interfície d’usuari en peces independents i reutilitzables i pensar cada peça de forma aïllada.
- El servei Firebase és utilitzat pels components React anteriors per obtenir dades (publicar / publicar / obtenir / eliminar) a la base de dades en temps real de Firebase.

L’aplicació Reactjs CRUD defineix 5 components:

  • S'utilitza Home.js com a pàgina de destinació de la vostra aplicació.
  • AppNavbar.js s’utilitza per establir una característica d’interfície d’usuari comuna entre components.
  • CustomerList.js s’utilitza per mostrar tots els clients a la pàgina web
  • CustomerEdit.js s’utilitza per modificar el client existent
  • App.js utilitza React Router per navegar entre components.

Objectiu del projecte integrador entre la base de dades en temps real de Reactjs CRUD Firebase

Pàgina inicial de Reactjs:

Reactjs Llista totes les dades:

Reactjs afegeixen dades:

Dades d'actualització de Reactjs:

Reactjs elimina un client amb id = 2, comproveu la llista de clients després de suprimir:

Comproveu la base de dades de Firebase després de fer les operacions CRUD:

Publicació relacionada:

Exemple de Reactjs Node.js MySQL CRUD
Exemple d’autenticació del testimoni SpringBoot de Reactjs Jwt - Inici de sessió de seguretat de Spring React.js
Reactjs Nodejs MongoDB CRUD Exemple: aplicació MERN Stack

#reactjs #crud #firebase

loizenai.com

Exemple de base de dades en temps real de Reactjs CRUD Firebase - loizenai.com

Al tutorial, us presento com implementar una aplicació: 'Reactjs CRUD Firebase Realtime Database Example' amb un codi font en execució al 100%.