In this article, we are going to continue developing our ReactJS web application using Backendless for the backend. This is part 4 of our series, so be sure you’ve read through parts 1-3, linked below:
- Basic project setup and render Persons List
- Create, update and delete Persons
- Enable Real-Time database
If you have already read those then read on. Otherwise, we recommend you either read read all of the previous articles and build the app step-by-step, or you can clone the app from this github repository and use this commit as a starting point. Today we will build our app for the first time and deploy it to Backendless Files.
This is the third part of our series on using Backendless with a ReactJS frontend app. You can catch up on the previous articles here: Part 1 and Part 2. If you’d like to jump in now, you can simply create a new Backendless app, clone our previous progress from our Github.com repository, and use this commit as an entry point for today’s article.
Our goal for today is to showcase integration with our Real-Time (we call it RT) database for delivering changes in your data table from the server to the client. We have previously written about implementation of RT in an Angular app (“How to Use the Backendless Real-Time Database in Your Angular App”). If you’re interested in Angular or you just want to see difference between the usage of RT with React and Angular, we’d recommend you give that article a read.
In the previous article in this series, we started working on a single-page application which is based on combination of ReactJS and Redux, with Backendless for the backend. If you missed that article, we recommend you to start there. If you already have a Backendless account and you are already familiar with a React/Redux stack, you can just clone our previous progress from this commit, create a new Backendless app and use it as an entry point for today’s article. Let me describe the main goal for this article and what we plan to cover:
- Create a separate component for our persons list,
- Add a PersonsEditor for creating and updating persons,
- And add an ability to delete Persons.
The lion’s share of JavaScript developers prefer to use TypeScript in their projects as it helps avoid some problems at the assembly stage while still including many valuable features. Today we are going to share with you how to use the Backendless JS-SDK in conjunction with TypeScript in a project with a Node.js backend. Backendless JS-SDK is a fully isomorphic library and it can be used in both a browser environment and a NodeJS backend environment and in most cases it also works well in other environments like React Native, Appcelerator, etc. The JS-SDK has been designed as a plain JavaScript library, but a few years ago we added types definitions for all methods and classes, so you can use the JS-SDK in your TypeScript projects without additional settings.
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.
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:
- How to create a Web App using Angular and Backendless
- How to use the Backendless real-time database in your Angular app
- How to monitor real-time connections in an Angular app
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!
Some Backendless users choose to use REST APIs in their JavaScript projects. While many can simply use our pre-packaged JS-SDK, that SDK may not always be able to achieve the result the user is seeking. Today we’re going to show you how to build a custom and very light API client library for working with Backendless API. Some time ago, we created a simple NPM module named “backendless-request” for sending CRUD requests to the server. That package is used in all our services such as DevConsole, JSCodeRunner, JS-SDK, etc.. If you would like to see the sources of the package, you can find it on Github.
React Native helps you build a real native mobile application using JavaScript (for more information about React Native, you can check out the documentation on Github here). The Backendless JavaScript SDK (JS-SDK) already has full compatibility with React Native – just install it from NPM, require in your code, and go. But since the release of Backendless 5.2.x, having only the JS-SDK is not enough to access all the Backendless features; in some cases, we need to have access to native modules for working with certain features such as Push Notifications. We’ve therefore decided to create another module on JS for using exactly in a React Native environment. It’s a patch of sorts for JS-SDK.
In this article series, I’m going to show you how to use this additional JS module. There are will be a total of 3 articles:
- How to enable Push Notifications using Backendless in a React Native App (Android)
- How to enable Push Notifications using Backendless in a React Native App (iOS) (coming soon)
- How to customize Push Notifications using Backendless (coming soon)
Today, we get started with creating a simple Android application on React Native for receiving Push Notifications. Alright, let’s do it.
One of the most powerful features that Backendless 5 has available is the capability for you to implement your own License Manager for creating and checking licenses for your product/customers. In this article, we will touch on some Backendless services such as data management and Business Logic and we will use one of the Backendless Client SDKs.
This is Part 2 of a series of articles where you and I build a mobile app without any coding. The app we are working on is a ToDo app. In the previous post you did the following:
- Set up your Backendless (backend) account.
- Set up your Dropsource (frontend) account.
- Implemented (without any coding of course) application lifecycle.
- Implement the landing page for the mobile app.
In this part of the series, you will implement the following:
- The Login Page of the app.
- A page which lists all the to do tasks (the Listing page).
- Implement routing between the Login and the Listing pages.
By the end of this part of the development process, you will be able to run the application as shown in the animation below:
Let’s get started (or technically continue, since we started in the previous post).
Development of mobile applications generally requires two parts: the Backend and the Frontend. Of course, you could limit it only to the client-side, but if there is some data which must be stored on the server, there is no way to get around having a backend. In this series of articles, you will create a native mobile client-server application – a basic ToDo app. Backendless will take care of the backend, it gives you everything you might expecting from the server-side (user management, data persistence and scalability to name a few). And for the client side you will use the Dropsource service. In case if you are not familiar with this service, you can learn more about that from their website, but in short, it is an awesome service which lets you build native mobile apps without any coding. At the end of this series, your will have a native mobile application with the User Registration/Login screen, a screen with a listing of the ToDo items and a screen to create a new ToDo Item. Here’s a brief preview of the app along with real-time changes in the Backendless database:
Let’s go!
