React

Start your React native App using a template

Introduction

In this section you learn how to get started with an React template and get ready to use Back4App in 4 steps.

Prerequisites

To complete this quickstart, you need:

Step 1 - Get the template

  1. Download the template at our GitHub repository, and unzip files in your project folder. You can do that using the following command line:
      $ curl -LOk https://github.com/back4app/react-quickstart-example/archive/master.zip && unzip master.zip
    
  2. Navigate to the extracted folder and install the depedencies using the following command line:
    $ cd react-quickstart-example-master && npm install
    

Step 2 - Open the project template

  1. Open Visual Studio Code.
  2. Click on Open folder.

    Visual Studio Open Screen

  3. Navigate to the project folder and click on OK.

    Visual Studio opening file

  4. Wait for Visual Studio to open.

Step 3 - Set up app’s credentials

Update your strings values to set up the app’s credentials. Parse Javascript SDK uses these settings to connect to the Back4App servers. In order to do that, follow these steps:

  1. Open your home javascript file: .../src/app.js

    Strings.xml File

  2. Go to your App Dashboard at Back4App Website.
  3. Navigate to app’s settings: Click on Server Settings > Core Settings block > SETTINGS.

    Back4app features page

  4. Return to your app.ts file and paste your App Id and JavaScript Key.
  5. Finally, let’s add a new component to save the device installation to our database.

    Back4app features page

See more at our New Parse App guide.

Step 4 - Testing your connection

  1. Run your app on your browser.
$ npm run start
  1. Wait until a new tab opens on your browser.

    Build app

  2. Login at Back4App Website.
  3. Find your app and click on Dashboard.
  4. Click on Core.
  5. Go to Browser.

If everything works properly, you should find a class named Installation as follows:

Installation at Back4App Dashboard

It’s done!

At this point, you have learned how to get started with React apps.