re-base
React makes it easy for components to manage their own state. Firebase makes it easy to set up a database quickly. Since Firebase uses web sockets, it's easy to implement a database that two-way binds with React's state. This means changes to the React component will sync with the Firebase database and changes to the Firebase database will sync with the React component (without the need to refresh).
re-base is a library that makes syncing data between React and Firebase easier. There are many other React libraries that work with Firebase. Feel free to explore others.
Getting Started with Firebase and re-base in your React Application
To get started with re-base, carefully follow the instructions below:
- Go to the Firebase website.
- Click the Get Started button.
- Click the Add Project button and submit the relevant information.
- Click Database on the left sidebar.
- Click Rules on the top navbar. Set both read and write properties to
true. - Click back to Overview in the left sidebar.
- Click the Add Firebase to your web app button and keep the modal open for reference for the ninth step.
- Install
re-basewith:npm install re-base --save - Create a new file in your React app's
srcfolder namedrebase.js. Using the modal opened in step seven, copy and paste the appropriate information:src/rebase.js
import Rebase from 're-base';
import firebase from 'firebase/app';
import database from 'firebase/database';
// this variable's information should not be copy and pasted
// refer to your application's metadata
const app = firebase.initializeApp({
apiKey: "AIzaSyinSeRtCraZYAPi-KeyHeREsahX7JU-zXc",
authDomain: "this-is-my-project-id.firebaseapp.com",
databaseURL: "https://this-is-my-project-id.firebaseio.com",
projectId: "this-is-my-project-id"
});
const db = database(app);
const base = Rebase.createClass(db);
export default base;
You are ready to get started with Firebase in React!