React

Install SDK on your React native project

Introduction

In this section you learn how to install Parse JavaScript SDK into your React project.

See more about Parse SDK at Parse JavaScript SDK API Reference and Parse open source documentation for JavaScript SDK.

Prerequisites

To complete this tutorial, you will need:

  • An app created at Back4App.
  • A React project started.

Step 1 - Install SDK

Since React packages are managed by npm, all you have to do is to run the following command at your project root level:

$ npm install parse

Step 2 - Connect your Parse App

Initialize your Parse app

Import Parse in App.js or in the page you want to make use of:

App.js

1
import Parse from 'parse';

Use Parse.serverURL atrribute to set up the url for Back4app parse server.

App.js

1
Parse.serverURL = 'https://parseapi.back4app.com/';

Use Parse.initialize method to set up the authentication token, connecting your page with Back4App servers.

App.js

1
Parse.initialize("YOUR-APP-ID", "YOUR-JS-KEY");

Find your Application ID and your Client Key

  1. Go to your App Dashboard at Back4App website.
  2. Navigate to app’s settings: Click on Server Settings > Core Settings block > Settings.
  3. Return to your Parse.Initialize function and paste your applicationId and javaScriptKey.

Step 3 - Test your conection

Create a test code

Test your initial setup with the following code which creates an Installation object.

First, go ahead and create a folder for our components at ./src/components and create a new file called Home.js inside of it.

Now let’s create a state variable to store the request result in our constructor.

home.js

1
2
3
this.state = {
  result: ''
};

Next, let’s display the result in our Home view by adding it to the render() return of our Home component.

home.js

1
2
3
4
5
render() {
  return (
    <h1>{this.state.result}</h1>
  )
}

Finally, add the code that instantiates an Installation object and saves it to the constructor.

home.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let install = new Parse.Installation();
install.set("deviceType", navigator.userAgent);

install.save().then((resp) => {
  console.log('Created install object', resp);

  this.setState({
    result: 'New object created with objectId: ' + resp.id
  })
}, err => {
  console.log('Error creating install object', err);

  this.setState({
    result: 'Failed to create new object, with error code: ' + err.message
  })
})

All we have to do now is import and add our Home component to our App.js render method.

App.js

1
2
3
4
5
6
7
8
9
10
render() {
  return (
    <div className="App">
      <header className="App-header">
        <h1 className="App-title">Back4App Tutorial</h1>
      </header>
      <Home/>
    </div>
  );
}
  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.