React + Firestore : Get Setup In Five Steps

Firebase and React Logos

One of the biggest barriers to learning React used to be the overwhelming amount of tooling involved. Beginners were forced to make important decisions about things they don’t understand before they could create anything.

React solved this problem in 2016 by releasing something called Create React App. Now there is an official way to create single-page React applications with zero configuration. If you chose to use create-react-app then you don’t have to make any other decisions.

I believe firebase is create-react-app for the backend. It lets you start building full-stack applications without having to get lost in a wormhole of build tools and server-side boilerplate. Using only Firebase and React you can have a full-stack project setup in minutes.

If your firebase console doesn’t look like the example in the screenshot above you can signup for the new console here.

//top of the file
import firebase from 'firebase'
require('firebase/firestore')

//bottom of the file
export const db = firebase.firestore()

atom editopr screenshot

I use atom. If you haven’t decided on a text editor, choose one that’s easy to learn and stick to it.

firestore.png

You will then be asked how you want to set the security up for the store, select test mode to begin with and you are done.

safe mode.png

Make sure you start in test mode otherwise nothing will work. My suggestion would be to learn how to read and write data to the FireStore first. Then learn how to authenticate users. Once you understand the basics of Firestore and you know how to log people in and out of your app then security rules become relevant, which makes them easier to understand.

If you’d like to learn how to read, write and query data from the firestore (and configure your security rules) then I am putting together a course that covers all of this, as well as authentication and how to use firebase storage.

The course will involve building and deploying a web application using Firebase, React 16 and React Router 4. The course is aimed at front-end developers who want to make the jump to building full-stack applications.

You can sign up to be notified when the Firebase + React Course is released at firebasereact.com

 
81
Kudos
 
81
Kudos

Now read this

React setState takes an updater function

If you increment a count in state using a state update function 3 times then the final count will be 3. state = {count: 0} this.setState( previousState => ({count: previousState.count++})) this.setState( previousState => ({count:... Continue →