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.

IMG_0371

IMG_0370

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:
    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 http://celikrafarsiv.com/metal-raf.html

  • 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

    CSPO TRAINING ONLINE

    CSPO ONLINE TRAINING

    CSPO TRAINING

css.php