So you started building your React app and you realized that you need someplace to store the data. While you can save the data in the browser using the Web Storage (i.e. localStorage or sessionStorage) or IndexedDB APIs, most React apps store the data on the server or the backend so that it can be loaded on other devices.
If you want to set up a backend for your React app, you have two options.
In most cases, I recommend that you use a BaaS instead of building your own backend. If you are a beginner, this will let you focus on the frontend without adding even more things to your learning plate. For everyone else, it will greatly reduce the development time since a lot of functionality is provided for you.
Using a backend as a service (BaaS) platform
Most web apps send and receive data from a server (CRUD operations) and identify users to determine which data to display (authentication). Since this functionality is so common, many platforms provide this functionality for you without you having to implement it from scratch. These platforms are commonly known as backend as a service (BaaS) and here are a few that I would recommend.
- Firebase
- Proprietary platform by Google
- The most popular BaaS with the widest range of functionality
- Free tier + Pay as you go
- back4app
- Uses Parse which was open-sourced by Facebook
- Free tier + Paid tier with higher limits + Pay as you go
- Supabase
- "Open source Firebase alternative" built by combining several open source tools
- Free tier + Paid tier
All of these platforms provide a Javascript library that you can use to save and retrieve data from a database and handle user authentication. They also have extra functionality such as real-time database updates and cloud functions for running custom logic.
If you are a beginner or you are building a small application, I recommend that you go with Firebase since it offers the most services and is also the most popular.
Building your own backend
Building your own backend is still the best way to familiarize yourself with backend development. In addition, building your own backend gives you complete control over the server hardware and the data structures in the API which is useful when you want to improve performance.
When you build your own backend, you need to design and provide a REST API for the React app to use. You can implement this API with many different languages and frameworks but here are a few approaches with the most popular server-side languages (PHP, NodeJS, Python)
- NodeJS + Express + MongoDB
- The most common approach for Javascript developers since they don't have to learn a different language to use NodeJS
- Commonly abbreviated as MERN (MongoDB, Express, React, Node)
- PHP + Laravel + MySQL
- PHP has the most number of hosting providers, many of whom are very cheap
- A backend built with this stack can be hosted on most Wordpress hosting providers
- While PHP has developed a reputation for being messy, it is more manageable with a framework like Laravel
- Python + Flask
- Good option if you want to learn Python which is used in data analysis and machine learning
- Flask can use Python's built-in support for SQLite databases which means that you don't have to have a separate database engine for small applications
I strongly recommend going with NodeJS because you don't have to learn a separate language. Since it is commonly paired with React, there are also more guides that walk you through how you can implement functionality across both.
