Blazing-fast-building ReactJS applications with Parse as a backend
For the last few years, react has been one of the most beloved front-end frameworks available. Companies and developers all around the world use it to build various types of applications. Some examples are:
- Netflix – The video-streaming giant has been using react since 2015, as described in this article, published in their tech blog
- Facebook – Facebook is react’s very own creator, and has been massively using it throughout the last years. They even explain how React is a major part of facebook’s current architecture in an article written in their tech blog.
and these are only some of the giant companies using react in production. But what exactly is react, and what are the benefits of using it?
According to its documentation:
Single Page Applications (SPA)
React’s main goal is to simplify the construction of highly interactive applications capable of mimicking native app’s performance and behavior on the web.
This is achieved by creating a Single Page Application. Unlike multiple-page applications, which refresh the page every time it needs new data, single-page applications discreetly request the necessary data through the network and dynamically generate the necessary changes to accommodate the new data, without ever needing to refresh the page.
React is designed to make the programming of user interfaces as efficient as possible, and that is why one of its core pillars is the concept of components.
Components are reusable pieces of code that contain logic, styling, and markup. A component generates a specific structure of your application and expects to receive the information that is going to display
this description sounds too abstract for you? Let’s look at an example:
These are my twitter’s follow suggestions. Notice how similar these 3 suggestions are. The only difference between them is the rendered data, so if you were to reproduce this using react, one possible approach is to create a component responsible for rendering follow suggestions and call it three times, with different data.
This reusability makes your codebase easier to maintain and to keep organized
React is declarative
Being declarative means that you describe how you want your application to behave, instead of being responsible for every needed action. This type of behavior simplifies the construction of highly dynamic interfaces since you don’t have to manually trigger each update on your user interface (UI)
You can tell your components to “pay attention” to a specific piece of data, and then only focus on updating given data, letting react handle the necessary updates.
Using it with Parse Server
Parse Server is an open-source backend framework. Check the video below where Alex will present you the main components and the Parse ecosystem.
Using Parse Server with React js is a very powerful combination since parse is the perfect backend choice to support the high level of interactivity of React applications.
Bootstrapping a Parse Server + ReactJS application
The first thing you have to do is make sure that Node.js is installed on your computer.
After guaranteeing the node’s installation, it’s time to use Create React App to bootstrap our react application
Open a terminal and insert the following command
npx create-react-app parse-and-react
After the project has been created, its structure should look like this
Adding styles to our application
Replace the content of your App.css file with the following:
Adding Parse to our application
npm install parse --save
Then, navigate to the index.js file and add Parse’s initialization code:
Now that you have your keys, we must have a way of using them inside our application. In a CRA created application, this can be done through an env file
at the project’s root folder, create a file called .env with the following content
Now Our keys are available inside our project. Let’s use them! Go back to services/parse.js and replace the placeholders with the key’s path. Once that is done proceed to export Parse from this file. The final result should look like this:
Now that Parse is set up inside our application, you can finally use it.
Go to the App.js file, and replace the default application content with some custom logic. Copy and paste the following code inside your project:
This code enables the creation and listing of users for our application using simple react concepts and Parse’s SDK to create and list users.
Storing data on parse
The Parse data storing implementation is built around
Parse.Object contains key-value pairs of JSON-compatible data. This data is schemaless. In other words, there is no need for defining the properties of your data ahead of time, hence you can define them on the fly
Just like we do in the following snippet of code:
A Parse Object called Employee is created, and afterward using the .save method to set its properties, which in our case are:
Remember, your object’s properties are defined by you, so they can be shaped to fit your needs, whatever they might be.
retrieving data on parse
Inside our data retrieval function (getEmployees):
We retrieve all the created employees and extract their usernames using Parse’s Query method.
Parse.Query offers us a way to retrieve a list of stored objects. We are using it in its most basic form, but it’s also fited for more complex use cases with more sophisticated conditions. Read more about Parse.Query in the its oficial documentation
With this code set up, it’s time to run the project. Open it in a terminal and then type the following command:
npm run start
Then open your browser and navigate to
The final application will look like this:
With this basic application finished, you have the necessary foundations to venture into more complex challenges with this stack
I hope this article has been helpful and wish you a happy coding 🙂