Modern web applications are often bloated and complex when they’re implemented as full-blown client-server architectures. There are usually a front-end application, a back-end application with a
database, and an interface that lets both ends communicate with each other. Doing all of this yourself can be a lengthy endeavor though, so if you’re looking for a stop-gap solution, Firebase offers a database, authentication, authorization and hosting by default to replace your entire back-end application tech stack.
Now you don’t need to worry much about a back-end application. Firebase takes care of it while you can spend more time implementing your front-end React application.
If you are proficient with HTML, CSS and JavaScript and you have learned React to build modern web applications, but you haven't learned to create the back-end application, then I would recommend Firebase to connect your React application to a database. It provides a good foundation before you start learning more about the back-end applications and databases.
The main focus here is using Firebase in React for your application. Firebase, bought by Google in 2014, enables Real time databases, extensive authentication and authorization, and even for deployment. You can build real-world applications with React and Firebase without worrying about implementing a back-end application. All the things a back-end application would handle, like authentication and a database, is handled by Firebase.
To start, sign up on the official Firebase website. After you have created a Firebase account, you should be able to create projects and be granted access to the project dashboard. Create a project for your application on their platform and assign a name to it. You can run it on a free pricing plan or you can change the plan if you want to scale your application.
Next, find the project’s configuration in the settings on your project’s dashboard. There, you’ll have access to all the necessary information: secrets, keys, ids and other details to set up your application. Copy these into your React application.
Now that you have completed the Firebase setup, you can return to your application in your IDE/Editor and add the Firebase configuration.
Now install Firebase for your application on your command line:
npm install firebase
Next, you’ll create a new file for the Firebase setup. You will use a JavaScript class to encapsulate all Firebase functionalities, Real time database, and authentication, as a well-defined API for the rest of the application. You need to only instantiate the class once, after which it can use it then to interact with the Firebase API, your custom Firebase interface.
You created a Firebase class, but you are not using it in your React application yet. We need to connect the Firebase with the React world. The simple approach is to create a Firebase instance with the Firebase class, and then import the instance (or class) in every React component where it’s needed. That’s not the best approach though, for two reasons:
1.It is more difficult to test your React components.
2.It is more error prone, because Firebase should only be initialized once in your application and by exposing the Firebase class to every React component, you could end up with multiple Firebase instances.
An alternative way is to use React’s Context API to provide a Firebase instance once at the top-level of your component hierarchy.
What is React's Context API?
When your React component hierarchy grows vertically in size and you want to be able to pass props to child components without bothering components in between, React Context behaves as a very powerful feature.
The createContext() function essentially creates two components. The FirebaseContext.Provider component is used to provide a Firebase instance once at the top-level of your React component tree, and the FirebaseContext.Consumer component is used to retrieve the Firebase instance if it is needed in the React component.
The Firebase Context from the Firebase module is used to provide a Firebase instance to your entire application. You only need to create the Firebase instance with the Firebase class and pass it as value prop to the React’s Context.
Doing it this way, we can be assured that Firebase is only instantiated once and that it is injected via React’s Context API to React’s component tree. Now, every component that is interested in using Firebase has access to the Firebase instance with a FirebaseContext.Consumer component.
Firebase and React are now connected.You have completed the fundamental step to make the layers communicate with each other.
Firebase is an ideal fit for transitioning to full-stack business application development. It comes with features you would otherwise have to implement yourself, and lets you experience how a well-built interface (API) should perform before you implement it yourself for a RESTful or GraphQL server application eventually. Firebase lets you focus on building well-rounded React applications using their APIs.
Thank You!
Top comments (0)