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

css.php