So far in the course, we've managed state in our application with this.state and this.setState. While this allows us to represent our user's data across our components and show updates to our UI in real time, the question we'll tackle today is: how might we use state in a way that is shown to many users visiting our site, instead of just to us?
The answer is in using a server to store the information for us and send requests to fetch and update data as it changes on our front-end code. We've done this before with API's for Twitter, Spotify, and even a connected light bulb (which we notice that you use occasionally). Today, we'll use an API that's just for us.
Firebase is a service by Google that allows us to store data in a way that requires us to write zero "back-end" code — we only need to write the React code we've already been writing.
First, let's sign up for Firebase — it's free for a limited plan. Begin by visiting:
Click Add project to get started. You can name your app whatever you'd like, and make sure to accept the details below:
Click Create project. Once your project loads, click the Web option icon to copy some configuration code that we'll add to our React app.
Click the Web (</>) option
Copy the lines between <script> and </script> — it should look something like the code sample below (with different details). We'll use this later — keep it in your clipboard.
// Initialize Firebase
var config = {
apiKey: "XXXXXXXXXXXXX",
authDomain: "react-decal-project.firebaseapp.com",
databaseURL: "<https://react-decal-project.firebaseio.com>",
projectId: "react-decal-project",
storageBucket: "react-decal-project.appspot.com",
messagingSenderId: "XXXXXXXXXXXX"
};
firebase.initializeApp(config);
Next, click the Develop > Database option in the sidebar. You should see the screen below:
Click Create database to get started with Firebase's database product. Make sure to opt for Start in test mode for your database's security rules (you shouldn't do this for your real apps, but we'll do this for simplicity's sake).
Start by clicking Start a collection and call it posts.
Next, Firebase will ask you to add your first document. This is so that it can figure out what your data is shaped like (i.e., what fields does each post contain?)