Building Salesforce Apps with React.js

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

You’ll need a Salesforce account to run this application. If you don’t already have one, you can sign up for a free developer environment here.
  1. Install ForceServer. Make sure Node.js is installed on your system, open a command prompt and type:
    npm install -g force-server

    or (Mac):

    sudo npm install -g force-server
  2. Download and unzip the sample app zip file, or clone the sample app repository.
  3. 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.

Code Highlights

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.

Source Code

The source code is available in this repository.

  • Tarif defteri sitemizde yemek tarifleri, tatlı tarifi ve çorba yapma tekniklerinin, pratik ve leziz yollarını bulabilirisiniz.

  • Jeremy

    Part of the reason i quit working at salesforce was React. I absolutely love react and have been working exclusively with it for a few months now. I recently saw a presentation in which remoteObjectModels were used to build a pretty smooth app. This is how all VF should look!

    You need to start pushing react in chatter in org62!!!!!!! :-)

  • Just started at SF and learning to develop platform and VF apps and keep thinking how similar the concepts are to react. Nice to see a SF evangelist paving the way. Also would love to see a react chatter group in org62 :)

  • kalite,fiyat uygunlugu ve imalattan.качество, доступность и цена производства.

  • kariha uruner başarılı metal ürüner burda

  • nice nice to blog

  • CIIT Noida

    This is complete package. You write briefly in this article. These both blog entry totally informative for readers.

    Hadoop Training Institute in Noida

  • CIIT Noida

    You have share the great info. I like your post. Thanks for sharing the good points. I will recommend this info

    Best B.Tech College in Noida

  • Nice blog thanks Christophe Coenrae!

    SEO Uzmanı Seobasari

  • Shree Prakash

    can you explain that how to connect reactjs app with salesforce org

  • yuvaraj singh

    Thanks for sharing this.,
    Leanpitch provides online training in CSPO during this lockdown period everyone can use it wisely.
    Join Leanpitch 2 Days CSPO Certification Workshop in different cities.

    CSPO certification

    CSPO certification online

    Product owner certification

    Certified scrum product owner

    CSPO certification cost