Message:

Subscribe rss
Blog categories
All | Backendless features
How to use Backendless with ReactJS
March 21, 2019 by Vladimir Upirov

ReactJS is one of the best and most popular frontend frameworks available for app builders. The barriers to entry in terms of understanding how to develop an app with ReactJS are very low, which is why many JavaScript developers choose the ReactJS library for web or mobile applications. It also works very well with a large number of data providers. Therefore, today we are beginning a series of articles about “How to use Backendless with ReactJS”. In this series, we will familiarize you with a number of Backendless features, show you how to use our real-time database with React-Redux store, show you how to deploy your app to Backendless File Storage, and demonstrate how to easily inject the JS-SDK into your ReactJS application.

Create a Web App Using React and Backendless

If you have experience with AngularJS and would like to learn how to build an app with Backendless using that language, you can check out our previous series of articles:

In this article, as was the case with our Angular series, we will start by creating a new Backendless App and building a simple React app. Our demo app will be an Address Book app, so to get started we will show how to load and display some data from the server. In the future, we will modernize the application by adding more functionality.

Let’s get started!

Setup Backendless

Continuing our old tradition, before we get going let’s make sure you have a Backendless account. If you don’t have on already, just register for new free account at https://develop.backendless.com.

Register for Backendless Developer Account

Now let’s create a new Backendless App. I will call my app “ReactArticle”, but you can choose any name you wish.

Create React App

As an entry point for creating a new app we will use this post from the official ReactJS site. I’ve highlighted the most important steps for our app:

  • Create a new React App using create-react-app with the following command in your terminal:

  • Go to the directory and run you app:

Once the application is generated, it will automatically open a new page in your browser with the url http://localhost:3000:

Preview web app with ReactJS

That’s it, very easy, right?

Add Styles

For styling in our app, we will use the Bootstrap framework. This will give us a high-quality and modern “look and feel” and it can be injected into the app very quickly.

Just add one line into ./public/index.html :

Let’s change the render method in the  App.js  file; just replace the returned JSX with the following one:

Also, you can remove the  App.css  file as we don’t need it anymore.

Setup Data Store

Right now our app is very primitive, but in future it will be more complex so it’s time to add a central storage for sharing data between app components. To do this, we will use React-Redux.

Install the module with the following command:

Let’s also install redux-logger  for logging all changes in the store as a dev dependency:

Here are a few important things you should be aware of when your app is based on redux store:

  • Immutable store – Store is just a plain object and passes complex values by link, so be careful not to modify store values directly in components. Instead, always do it with calling actions.
  • Actions – Actions are commands for store modification. Each action has a unique type and may have some additional data, and according to action type and action data reducer, may change the current state of store or do nothing. It depends on your code in your reducers, which we’ll discuss more later.
  • Reducers – Reducers are functions that are called each time you fire a store action. Reducers accept the current state of the store and action object and return a new state object or may just return the current state without any changes.
  • Selectors – Selectors are functions-shortcuts that help you get needed data from store. Selectors are very helpful when you’ve got a big store with a complex structure.

As you recall, we are developing a simple Address Book app, so let’s prepare basic store actions/reducers/selectors. To do so, we have to create several files:

Create store actions, reducers, and selectors

Now we are going to copy/paste some code. We will explain why each folder/file is needed as we go.

./store/index.js

This is the re-export actions/selectors and createStore function.

./store/create-store.js

Here we will configure app store and, as you may have noticed, there is some apiCall middleware which is needed for processing async actions. We will come back to the middleware a little bit later.

./store/action-types.js

In this file, we will keep all of the action types and, to make it cleaner, we have mirrorKeys function. With the mirrorKeys function, we don’t need to duplicate the action type value as the function does it for us.

At the end the file, we will export an object where key and value are equal.

./store/actions/index.js

This will re-export all of the actions for quick access in components.

./store/actions/persons.js

In this file, we will keep all of the actions related to the Persons data. For now, we only have actions.

As you can see here, are three action types:

  • LOAD_PERSONS   – start loading persons
  • LOAD_PERSONS_SUCCESS   – persons has been loaded
  • LOAD_PERSONS_FAILs   – could not load persons

This is because we will load our persons from the server, which means we will have an async function and that should cover all states. This is possible because of the  apiCall store middleware  that we have in the   ./store/create-store.js  file.

./store/reducers/index.js

Here we combine the app root reducer and define store selectors for quick access to store data. Some may recommend locating store selectors in a separate file/directory, but I prefer to have them with the reducers.

./store/reducers/persons.js

Here is the actual persons reducer. Thanks to both reduceReducers  and loadReducer  helpers, the reducer is as small as it is. In short what is happening here is that each time we load persons, the “list” array will be replaced with a new one from the server.

And finally in the ./store/reducers/helpers directory, we add helper functions for reducers. These help us keep our reducers more compact and readable, as you may have noticed in the persons reducer.

./store/reducers/helpers/index.js

./store/reducers/helpers/load-reducer.js

./store/reducers/helpers/reduce-reducers.js

./store/reducers/helpers/reducers-map.js

Good, now let’s inject redux store into our app. For that, we need to modify our index.js  file; when complete, the file will look like this:

Now, we can connect store to any components we create and use any data that we need. So, let’s change the App.js  file to display dummy persons:

Moment of truth! If you can see the same as me, we are synced! =)

Address book React web app in progress

Use Backendless Data

As you likely noticed, we have used mock data in the  loadPersons  action. Now it’s time to use real data from our Backendless Server. Let’s put our dummy persons list into Backendless. First, we need to create a new table on the Backendless -> Data screen:

Add new table in Backendless

Next we are going to import all the dummy persons into the table. Backendless’ REST Console will help us with that:

Import data into a table in Backendless

// Request body

Let’s check our work in the Data Browser:

Review imported data in table

As you can see, we didn’t do any additional steps to setup schema for the Person table, but there are two columns “name” and “address” automatically. That’s because we have enabled dynamic schema definition by default, so when we saved our dummy person objects in the REST Console, the server automatically created the two columns for us. It’s a great feature for development, but for production we recommend switching off the option so your tables don’t get modified unintentionally.

Data Configuration - ReactArticle - Backendless

Alright, let’s add code for retrieving the persons objects within our app. We will use the Backendless JS-SDK, so let’s install it from npm with the following command:

Initialize the Backendless app in our index.js file. To do so, just import the backendless  module and call Backendless.initApp(APP_ID, API_KEY) :

You can find your App ID and API Key in the Backendless Console on the Dashboard page:

App ID and API Key in Backendless Console

Now go to ./store/actions/persons.js  and replace the dummy request with a real one:

Did you catch it? I made a typo while writing Backendless.Data.of('Person').find() : instead of “Person” I wrote “Persons”,  but since there is no table with name “Persons”, we see an error in our browser where our app is open. Error handling works perfectly! That’s cool, isn’t it?

React web app error handling

Summary

This is where we will break for today. In this first part, we got a good foundation for our app, built basic app structure, setup application store, and now we know how to load data from Backendless and display it in our React app. In the coming articles in this series, we will add more functionality and we’ll use the real-time database functionality of Backendless.

Thank you for reading and see you soon!

Share this post
Tweet about this on TwitterShare on FacebookGoogle+