Tutorial: “Reactjs CRUD Firebase Realtime Database Example”
The Firebase Realtime Database is a cloud-hosted NoSQL database that lets you store and sync data between your users in realtime. In the tutorial, I introduce how to build an “Reactjs CRUD Firebase Realtime Database Example ” project to do CRUD operation: POST/GET/PUT/DELETE requests with step by step coding examples.
– I draw a fullstack overview diagram architecture from Reactjs frontend to Firebase Realtime Database.
– I illustrate details about react-firebase CRUD operations.
– I implement Reactjs application to do CRUD request (Post/Get/Put/Delete) to Firebase Realtime database.
- Overvier Architecture Diagram – Reactjs CRUD Firebase Realtime Database
- Integrative Project Goal between Reactjs CRUD Firebase Realtime Database
- Firebase Realtime Database CRUD Operation
- Implement Reactjs CRUD Firebase Realtime Database
- Overview Reactjs CRUD Application with Firebase Realtime Database
- How to build Reactjs CRUD Firebase Application?
- Setup Reactjs Application with Bootstrap
- Add Firebase configuration to Reactjs environments variable
- Implement Reactjs CRUD Firebase Service: Post/Get/Put/Delete operations
- Implement Reactjs CRUD Components
- Testing
- Sourcecode
Overview Architecture Diagram – Reactjs CRUD Firebase Realtime Database

Reactjs CRUD Application is designed with 2 main layers:
– React.js components let you split the UI into independent, reusable pieces, and think about each piece in isolation.
– Firebase Service is used by above React Components to fetch (Post/Put/Get/Delete) data to Firebase Realtime database.
Reactjs CRUD Application defines 5 components:
Home.js
is used serve as the landing page for your app.AppNavbar.js
is used to establish a common UI feature between components.CustomerList.js
is used to show all customers in the web-pageCustomerEdit.js
is used to modify the existed customerApp.js
uses React Router to navigate between components.
Integrative Project Goal between Reactjs CRUD Firebase Realtime Database
Reactjs Home page:

Reactjs List all data:

Reactjs add data:

Reactjs update data:

Reactjs delete a customer with id=2, check the Customer List after deleting:

Check Firebase Database after do CRUD operations:

Firebase Realtime Database CRUD Operation
Set up the Firebase Project
To setup Firebase Realtime Database project, you can follow the guide at here.

Firebase Realtime database CRUD operations guidelines
We use instance of firebase.database.Reference to read/write data from the Firebase database.
const customerRef = firebase.database().ref('/customers');
Firebase Realtime Database – Read operation
– Read list once using once()
:
customerRef.once('value', (snapshot) => {
let customers = [];
snapshot.forEach( (childSnapshot) => {
var key = childSnapshot.key;
var data = childSnapshot.val();
// ...
customers.push({ key: key, firstname: data.firstname, ...});
});
});
– Read List with listening to the data changes using on()
:
customersRef.on('child_added', (data) => {
// data.key, data.val().firstname, data.val().lastname, ...
});
customersRef.on('child_changed', (data) => {
// data.key, data.val().firstname, data.val().lastname, ...
});
customersRef.on('child_removed', (data) => {
// data.key, data.val().firstname, data.val().lastname, ...
});
– Listening for all value events on a List reference
let onDataChange = customersRef.on('value', (snapshot) => {
snapshot.forEach( (childSnapshot) => {
let childKey = childSnapshot.key;
let childData = childSnapshot.val();
// ...
});
});
– Remove the listener using off()
:
customersRef.off("value", onDataChange);
Firebase Realtime Database Create operation
– Create a new object in List:
customersRef.push({
firstname: "Jack",
lastname: "Smith",
...
});
Firebase Realtime Database Update operation
– Update object in List:
* destructive update using set()
: delete everything currently in place, then save the new value
customersRef.child(key).set({
firstname: "Jack",
lastname: "Smith",
...
});
* non-destructive update using update()
: only updates the specified values
customersRef.child(key).update({
firstname: "Jack",
});
Firebase Realtime Database Delete operation
– Delete an object in List:
customersRef.child(key).remove();
– Delete entire List:
customersRef.remove();
Implement Reactjs CRUD Firebase Realtime Database
Overview Reactjs CRUD Application with Firebase Realtime Database
Reactjs Project structure:

Reactjs architecture diagram:

For more details, we go back to the session: Overvier Architecture Diagram – Reactjs CRUD Firebase Realtime Database
How to build Reactjs CRUD Firebase Application?
We build a Reactjs Application to fetch data from Firebase Realtime Database with 5 UI components and a service. Step to do:
– Setup Reactjs Application
– Add Firebase configuration to Reactjs environments
– Implement Reactjs CRUD Firebase Service
– Build Reactjs Navigation Bar component
– Build Reactjs Home page component
– Build Reactjs CustomerList Component
– Build Reactjs CustomerEdit Component
– Update Reactjs App.js Component with Router
Setup Reactjs Application with firebase
Create React App is a command line utility that generates React projects for you. It’s a convenient tool because it also offers commands that will build and optimize your project for production.
The create-react-app
will set up everything you need to run a React application.
– Create a new project in the app directory with Yarn.
yarn create react-app app
After the app creation process completes, navigate into the app directory and install Bootstrap, cookie support for React, React Router, and Reactstrap.
– Reactstrap: This library contains React Bootstrap 4 components that favor composition and control. The library does not depend on jQuery or Bootstrap javascript.
– React Router: Components are the heart of React’s powerful, declarative programming model. React Router is a collection of navigational components that compose declaratively with your application.
cd app
yarn add bootstrap@4.1.3 react-cookie@3.0.4 react-router-dom@4.3.1 reactstrap@6.5.0
Import, we install firebase to reactjs project by cmd:
$npm i firebase
Add Firebase configuration to Reactjs environments variable
– Create a file ./src/util/firebase.js
to add firebase configuration as below content:
import firebase from "firebase";
let firebaseConfig = {
apiKey: "AIzaSyBVm7nQJqpJxXMr63spZydivMPgoECs_R0",
authDomain: "loizenjava-reactjs-crud-db.firebaseapp.com",
projectId: "loizenjava-reactjs-crud-db",
storageBucket: "loizenjava-reactjs-crud-db.appspot.com",
messagingSenderId: "610864533391",
appId: "1:610864533391:web:c3adddd2aa1ac818fe45fa",
measurementId: "G-LD2JGWF657"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
export default firebase.database();

Implement Reactjs CRUD Firebase Service: Post/Get/Put/Delete operations
Implement a FirebaseService
in file ./src/services/FirebaseService.js
as below:
import firebase from '../util/firebase';
const db = firebase.ref('/customers');
let customers = [];
class FirebaseService {
addCustomer = (customer) => {
db.push(customer);
};
getAll() {
return db;
}
get(key) {
return db.child(key);
}
update(key, value) {
return db.child(key).update(value);
}
delete(key) {
return db.child(key).remove();
}
}
export default new FirebaseService();
Implement Reactjs CRUD Components
Build Application Navigation Bar Component
import React, { Component } from 'react';
import { Collapse, Nav, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink } from 'reactstrap';
import { Link } from 'react-router-dom';
export default class AppNavbar extends Component {
constructor(props) {
super(props);
this.state = {isOpen: false};
this.toggle = this.toggle.bind(this);
}
toggle() {
this.setState({
isOpen: !this.state.isOpen
});
}
render() {
return <Navbar color="dark" dark expand="md">
<NavbarBrand tag={Link} to="/">Home</NavbarBrand>
<NavbarToggler onClick={this.toggle}/>
<Collapse isOpen={this.state.isOpen} navbar>
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink
href="https://loizenjava.com">loizenjava.com</NavLink>
</NavItem>
<NavItem>
<NavLink href="https://github.com/loizenjava">GitHub</NavLink>
</NavItem>
</Nav>
</Collapse>
</Navbar>;
}
}
Create Reactjs Home Page Component

import React, { Component } from 'react';
import './App.css';
import AppNavbar from './AppNavbar';
import { Link } from 'react-router-dom';
import { Button, Container } from 'reactstrap';
class Home extends Component {
render() {
return (
<div>
<AppNavbar/>
<Container fluid>
<Button color="link"><Link to="/customers">Manage Customer List</Link></Button>
</Container>
</div>
);
}
}
export default Home;
Build Reactjs CustomerList Component

– CustomerList Component will fetch a list of customers from Firebase Realtime database and then shows all of them on a Bootstrap table.
– The CustomerList has 3 buttons:
- Add Customer & Edit are used to link to a url
/customers/new
that will map withCustomerEdit
component - Delete button is used to remove a Customer entity from Firebase Realtime Database based on a given
key
through an async functionremove(key)
that will do a request with DELETE method to Firebase.
Detail coding:
import React, { Component } from 'react';
import { Button, ButtonGroup, Container, Table } from 'reactstrap';
import AppNavbar from './AppNavbar';
import { Link } from 'react-router-dom';
import FirebaseService from '../services/FirebaseService';
class CustomerList extends Component {
constructor(props) {
super(props);
this.state = {customers: [], isLoading: true};
this.remove = this.remove.bind(this);
}
componentDidMount = () => {
FirebaseService.getAll().on("value", this.onDataChange);
}
componentWillUnmount = () => {
FirebaseService.getAll().off("value", this.onDataChange);
}
onDataChange = (items) => {
console.log(items);
let customers = [];
items.forEach(item => {
let data = item.val();
customers.push({
key: item.key,
firstname: data.firstname,
lastname: data.lastname,
address: data.address,
age: data.age,
copyrightby: "https://loizenjava.com"
});
});
this.setState({
customers: customers,
isLoading: false
});
}
async remove(key) {
FirebaseService.delete(key)
.then(() => {
let updatedCustomers = [...this.state.customers].filter(i => i.key !== key);
this.setState({customers: updatedCustomers});
});
}
render() {
const {customers, isLoading} = this.state;
if (isLoading) {
return <p>Loading...</p>;
}
const customerList = customers.map(customer => {
return <tr key={customer.key}>
<td style={{whiteSpace: 'nowrap'}}>{customer.firstname}</td>
<td>{customer.lastname}</td>
<td>{customer.age}</td>
<td>{customer.address}</td>
<td><a href={customer.copyrightby}>{customer.copyrightby}</a></td>
<td>
<ButtonGroup>
<Button size="sm" color="primary" tag={Link} to={"/customers/" + customer.key}>Edit</Button>
<Button size="sm" color="danger" onClick={() => this.remove(customer.key)}>Delete</Button>
</ButtonGroup>
</td>
</tr>
});
return (
<div>
<AppNavbar/>
<Container fluid>
<div className="float-right">
<Button color="success" tag={Link} to="/customers/new">Add Customer</Button>
</div>
<h3>Customer List</h3>
<Table className="mt-4">
<thead>
<tr>
<th width="20%">Firstname</th>
<th width="20%">Lastname</th>
<th width="10%">Age</th>
<th>Address</th>
<th>Copyrightby</th>
<th width="10%">Actions</th>
</tr>
</thead>
<tbody>
{customerList}
</tbody>
</Table>
</Container>
</div>
);
}
}
export default CustomerList;
Build Reactjs CustomerEdit Component

import React, { Component } from 'react';
import { Link, withRouter } from 'react-router-dom';
import { Button, Container, Form, FormGroup, Input, Label } from 'reactstrap';
import AppNavbar from './AppNavbar';
import FirebaseService from '../services/FirebaseService';
class CustomerEdit extends Component {
emptyCustomer = {
key: '',
firstname: '',
lastname: '',
age: "",
address: '',
copyrigtby: 'https://loizenjava.com'
};
constructor(props) {
super(props);
this.state = {
item: this.emptyCustomer
};
}
componentDidMount = () => {
let key = this.props.match.params.key
if (key !== 'new') {
FirebaseService.get(key).on("value", this.onDataChange);
}
}
componentWillUnmount = () => {
FirebaseService.getAll().off("value", this.onDataChange);
}
onDataChange = (item) => {
let data = item.val();
let customer = {
key: item.key,
firstname: data.firstname,
lastname: data.lastname,
age: data.age,
address: data.address,
copyrightby: 'https://loizenjava.com'
};
this.setState({
item: customer,
});
}
handleChange = (e) => {
const target = e.target;
const value = target.value;
const name = target.name;
let item = {...this.state.item};
item[name] = value;
this.setState({item});
};
handleSubmit = (e) => {
e.preventDefault();
const {item} = this.state;
let key = this.props.match.params.key
if (key !== 'new') {
FirebaseService.update(key, item);
} else {
FirebaseService.addCustomer(item);
}
this.props.history.push('/customers');
};
render = () => {
const {item} = this.state;
const title = <h2>{item.key ? 'Edit Customer' : 'Add Customer'}</h2>;
return <div>
<AppNavbar/>
<Container>
{title}
<Form onSubmit={this.handleSubmit}>
<FormGroup>
<Label for="firstname">Firstname</Label>
<Input type="text" name="firstname" id="firstname" value={item.firstname || ''}
onChange={this.handleChange} autoComplete="firstname"/>
</FormGroup>
<FormGroup>
<Label for="lastname">Lastname</Label>
<Input type="text" name="lastname" id="lastname" value={item.lastname || ''}
onChange={this.handleChange} autoComplete="lastname"/>
</FormGroup>
<FormGroup>
<Label for="age">Age</Label>
<Input type="text" name="age" id="age" value={item.age || ''}
onChange={this.handleChange} autoComplete="age"/>
</FormGroup>
<FormGroup>
<Label for="address">Address</Label>
<Input type="text" name="address" id="address" value={item.address || ''}
onChange={this.handleChange} autoComplete="address"/>
</FormGroup>
<FormGroup>
<Button color="primary" type="submit">Save</Button>{' '}
<Button color="secondary" tag={Link} to="/customers">Cancel</Button>
</FormGroup>
</Form>
</Container>
</div>
}
}
export default withRouter(CustomerEdit);
Edit Reactjs App.js Component
App.js
uses React Router to navigate between components.
- path “/” is mapped with Home component
- path “/customers” is mapped with CustomerList component
- path “customers/:id” is mapped with CustomerEdit component
import React, { Component } from 'react';
import './App.css';
import Home from './Home';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import CustomerList from './CustomerList';
import CustomerEdit from './CustomerEdit';
class App extends Component {
render() {
return (
<Router>
<Switch>
<Route path='/' exact={true} component={Home}/>
<Route path='/customers' exact={true} component={CustomerList}/>
<Route path='/customers/:key' component={CustomerEdit}/>
</Switch>
</Router>
)
}
}
export default App;
Testing
– Start Reactjs Application by cmd: yarn start
.

Testcase 1: Reactjs Post data to Firebase Realtime database


Testcase 2: Reactjs Get all data from Firebase Realtime database

Testcase 3: Reactjs Put data to Firebase Realtime database


Testcase 4: Reactjs Delete data from Firebase Realtime database


Sourcecode
reactjs-firebase-realtime-database
– Github:
Perfect! Save my life man
Excellent post. Keep posting such kind of information on your site. Zilvia Godfrey Shadow
Love you! save my life
Good job man!
I’m extremely pleased to discover this website. I wanted to thank you for ones time just for this fantastic read!! I absolutely enjoyed every part of it and i also have you bookmarked to see new stuff in your site.
Thanks for the suggestions you have shared here.
Great man!
I got what you intend,bookmarked, very decent website.
Good Job ! Thanks pro
thanks for posting.
Best Tut! Love Pro
Very nice man! Should do more thanks for nice Reactjs Firebase
Really nice design and good subject material. Thanks PRO
Thank you!