Quickstart

10 min

quickstart introduction in this section, you will learn how to get started with back4app using an existing or new project using react you will install the \parse sdk\ , initialize parse using your \app keys\ , and make your first api call saving and reading data objects from back4app prerequisites to complete this tutorial, you will need an app created https //www back4app com/docs/get started/new parse app on back4app; a recent version of node js https //nodejs org/ , including \yarn \ and \npx\ 1 creating a react project if you already have a working react project, you can skip to the next step run the following command on the directory in which you would want to store the project, informing its name as well, in this case, \back4app guide react\ npx create react app back4app guide react if \node js\ is properly configured, you should see the project being created in your terminal prompt after completion, you will see a message informing you that the process was successful open the project in your favorite code editor and let’s start integrating parse 2 install dependencies let’s now install the only needed dependency, \parse javascript sdk\ , to integrate your app with back4app servers run the following command on your project root directory yarn add parse 3 get your app keys after creating your app on back4app, go to your app’s dashboard and get your app keys under \app settings \>security \& keys\ (check the image below) note that you will always need two keys to connect with back4app, the \application id\ and \javascript key\ 4 initialize parse and connect to back4app go to your \app js\ and initialize the \parse sdk \ using both the \application id\ and the \javascript key\ (check the previous step) 1 // import parse minified version 2 import parse from 'parse/dist/parse min js'; 3 4 // your parse initialization configuration goes here 5 const parse application id = 'your application id here'; 6 const parse host url = 'https //parseapi back4app com/'; 7 const parse javascript key = 'your javascript key here'; 8 parse initialize(parse application id, parse javascript key); 9 parse serverurl = parse host url; 5 save and read a simple data object your app is initialized and can securely connect to back4app cloud services let’s now create a component containing two simple functions inside to save and retrieve data from your back4app database create a new file named \personcomponent js\ in your \src\ directory and add the following code 1 import react, { usestate } from 'react'; 2 import parse from 'parse/dist/parse min js'; 3 4 export const personcomponent = () => { 5 // state variables 6 const \[person, setperson] = usestate(null); 7 8 async function addperson() { 9 try { 10 // create a new parse object instance 11 const person = new parse object('person'); 12 // define the attributes you want for your object 13 person set('name', 'john'); 14 person set('email', 'john\@back4app com'); 15 // save it on back4app data store 16 await person save(); 17 alert('person saved!'); 18 } catch (error) { 19 console log('error saving new person ', error); 20 } 21 } 22 23 async function fetchperson() { 24 // create your parse query using the person class you've created 25 const query = new parse query('person'); 26 // use the equalto filter to look for user which the name is john this filter can be used in any data type 27 query equalto('name', 'john'); 28 // run the query 29 const person = await query first(); 30 // access the parse object attributes 31 console log('person name ', person get('name')); 32 console log('person email ', person get('email')); 33 console log('person id ', person id); 34 setperson(person); 35 } 36 37 return ( 38 \<div> 39 \<button onclick={addperson}>add person\</button> 40 \<button onclick={fetchperson}>fetch person\</button> 41 {person !== null && ( 42 \<div> 43 \{`name ${person get('name')}`}\ 44 \{`email ${person get('email')}`}\ 45 \</div> 46 )} 47 \</div> 48 ); 49 }; the \addperson \ method creates a new \parse object\ representing a \person \ class, sets its properties then saves it on the back4app cloud data store the method \fetchperson \ retrieves a \parse object\ which has the attribute \name \ equals to \john\ when the query resolves, you will be able to access the person’s attributes using the \get \ method note also the interface elements in this component, they consist of two buttons calling the methods and also two paragraphs retrieving the fetched \person \ through a state variable we now need to import and use this component in your main \app js\ file your \app js\ file should look something like this, after removing most of the placeholder code in it 1 import ' /app css'; 2 import parse from 'parse/dist/parse min js'; 3 import { personcomponent } from ' /personcomponent'; 4 5 // your parse initialization configuration goes here 6 const parse application id = 'your parse application id'; 7 const parse host url = 'https //parseapi back4app com/'; 8 const parse javascript key = 'your parse javascript key'; 9 parse initialize(parse application id, parse javascript key); 10 parse serverurl = parse host url; 11 12 function app() { 13 return ( 14 \<div classname="app"> 15 \<header classname="app header"> 16 \<personcomponent /> 17 \</header> 18 \</div> 19 ); 20 } 21 22 export default app; 6 test your app open your project’s terminal run \yarn start\ your browser should open after building with the app running click the button to add a new \person \ first, then click to fetch the same \person\ you’ve saved and retrieved a data object from back4app you can also check the data on your app dashboard https //parse dashboard back4app com/apps/ and clicking on person class what to do next as you have seen, the easiest way to integrate back4app into your react project is through the parse javascript sdk https //www npmjs com/package/parse the parse sdk delivers an excellent development experience through a lightweight and easy to use layer that provides minimal configuration and code re usability