In my previous posts, I shared several examples built with the React framework: I demonstrated how to build a React application in 7 steps, how to implement animated page transitions for mobile apps, and how to build a React application with a Node.js back-end.
In this post, I’ll share a sample React application that accesses Salesforce data (your list of contacts) using the Salesforce REST APIs.
Installing the Sample App
- Install ForceServer. Make sure Node.js is installed on your system, open a command prompt and type:
npm install -g force-server
sudo npm install -g force-server
- Download and unzip the sample app zip file, or clone the sample app repository.
- Open a command prompt, navigate to the salesforce-contacts-react directory, and start force-server:
This command will start the server on port 8200, and automatically load the app (http://localhost:8200) in a browser window. You’ll see the Salesforce OAuth login window (make sure you enable the popup window), and the app will appear after you log in. Type in a few characters in the search box to search contacts by name, and click a contact to see the details.
The React code is similar to the employee directory application explained here.
The Salesforce data access logic is encapsulated in the contact-service.js file and uses the ForceJS library to invoke Salesforce REST services.
The source code is available in this repository.