JavaScript

Start your React project using a pre built template

Introduction

In this section you will learn how to get started with a React.js template and how to connect it to Back4App in 5 easy steps.

At any time, you can test the app built with this tutorial by clicking here.

This is how it will look like:

Prerequisites

To complete this tutorial, you will need:

Step 1 - Get the template

Download the template at our GitHub repository. You can do that using the following command line:

$ curl -LOk https://github.com/igor-ribeiiro/React-Parse-Template/archive/master.zip && unzip master.zip

Step 2 - Download app’s dependencies

  1. Install npm in your system.

    Look at the get npm guide for more info.

  2. Run npm install in the project directory to install required react dependencies.
  3. Run npm start in the project directory to compile and enable automatic re-compiles to your app.

Step 3 - Set up app’s credentials

Update strings values for app ID and JavaScript Key to set up the app’s credentials. Parse JavaScript SDK uses these settings to connect your app to Back4App servers.

  1. Open your React file at: js/index.js.
  2. Go to your app Dashboard at Back4App Website and click on Server Settings.
  3. Find the “Core Settings” block and click on Settings. The “Core Settings” block looks like this:

    Back4app features page

  4. Return to your index.js file and paste your App Id and Javascript Key on it, using the following code:
    1
    2
    3
    // don't forget to change the line below with you Back4App App ID and your JavaScript Key
    Parse.initialize("YOUR_APP_ID", "YOUR_JS_KEY");
    Parse.serverURL = "https://parseapi.back4app.com/";
    

Step 4 - Test your connection

  1. Access your index.html by opening it in your browser.

    Look at How to Run a HTML File for more info.

  2. Wait until the sign up screen appears.
  3. Create an example user by filling the Email address and Password fields and clicking on the Sign up button.
  4. Login on Back4App Website, find your app and click on Dashboard > Core > Browser > User. If everything works properly, you should find an user at the User class in your Parse Dashboard as follows:

    User at Back4App Dashboard

  • The Error 209 invalid season token is also likely to occur when your browser cookies conflict with your Parse’s Current Session. To bypass that, clear your browser cookies or open the incognito mode of your browser.

Step 5 - Upload your code to Back4App server

To deploy your app with Back4App, you need to upload your code to Cloud Code. In order to do that, choose one of the following:

  • Upload through Back4App Command Line Interface.

    Learn how to do that by clicking here.

  • Upload through Back4App visual interface.

    To do that, follow these steps:

    1. Go to your App at Back4App website and click on Server Settings.
    2. Find the “Cloud Code” block and click on SETTINGS. The “Cloud Code” block looks like this:

      Cloud Code block

    3. Click on Choose Files and select all the files imported by index.html. Move them to public, then click SAVE, as shown here:

      Verification emails block

    4. Your files will look like this:

      Verification emails block

Finally, to deploy your app, see the Back4App Web Hosting Tutorial.

It’s done!

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