Creating Lightning Components with React

The Lightning Component Framework is a great UI framework for building modern components and applications on the Salesforce platform. If you are already invested in other UI frameworks, like React or Angular, you can also integrate components built with these frameworks inside Lightning Components.

In this post, I’ll share a project that demonstrates how to build a Lightning Component with React, or in other words, how to host a React Component inside a Lightning Component. The example used in this project is a simple Contact Search component fully implemented in React.

The React Component is loaded in your Salesforce Org as a Static Resource, and leverages the Lightning Component’s standard data access infrastructure.

There are two things a React component needs in order to function properly inside a Lightning Component:

  • A reference to the DOM element that serves as the container for the React component
  • A reference to a data service that the React component can call when it needs data

These two parameters are provided to the React Component in the Lightning Component’s reactInit() function that is executed when the Static Resource has been loaded (see the ReactSearch controller implementation below). The data service is just an object containing functions the React component can call when it needs data. These functions use the traditional Lightning Component syntax to access methods in the component’s Apex controller. The approach presented in this project also allows you to test your React components outside Salesforce using a mock data service.

Step 1: Building and Running the React Component Locally

  1. Clone the lightning-react repository which includes the React component and the associated build scripts
  2. Open a command prompt and navigate (cd) to the lightning-react directory
  3. Install the project dependencies:
    npm install
  4. Build the project:
    npm run webpack
    This project uses Babel to transpile ES6 and React’s JSX, and Webpack to implement modules. The transpiled file is available in the build directory.
  5. Test locally. The project includes a mock.js file that simulates a Lightning Component so that you can test your React code locally before deploying it in your Salesforce org. To test the app locally, open index.html in your browser and type a few characters in the search box.

Step 2: Hosting the React Component in a Lightning Component

  1. In the Developer Console, create an Apex Class named ContactController implemented as follows:
    public with sharing class ContactController {
        public static List<Contact> findAll() {
            return [SELECT Id, Name from Contact limit 20];
        public static List<Contact> findByName(String name) {
            String key = '%' + name + '%';
            return [SELECT Id, Name FROM Contact WHERE Name LIKE :key LIMIT 20];

    In a production environment, you should add code to the controller’s methods to enforce CRUD and FLS. More information here.
  2. Create a Static Resource named ReactSearch. Upload the search.bundle.js file available in the build directory.
  3. Install the Lightning Design System: On the downloads page, click v0.12.2 unmanaged package, then click the Install button. This will install the Lightning Design System as a static resource in your org.
    You could also use your own styles, but using the Lightning Design System will ensure UI consistency.
  4. In the Developer Console, create a new Lightning Component (File > New > Lightning Component) named ReactSearch implemented as follows:
    <aura:component controller="ContactController">
        <ltng:require scripts="/resource/ReactSearch"
        <div aura:id="container"/>
  5. Click CONTROLLER (upper right corner) and implement the component’s controller as follows:
        reactInit : function(component, event, helper) {
            var dataService = {
                findAll : $A.getCallback(function(callback) {
                    var action = component.get("c.findAll");
                    action.setCallback(this, function(a) {
                        var contacts = a.getReturnValue();
                    $A.enqueueAction(action, false);
                findByName : $A.getCallback(function(name, callback) {
                    var action = component.get("c.findByName");
                    action.setParams({name: name});
                    action.setCallback(this, function(a) {
                        var contacts = a.getReturnValue();
                    $A.enqueueAction(action, false);
            var container = component.find("container").getElement();
            reactSearch.init(container, dataService);

    The key here is to wrap the data service’s functions in $A.getCallback() which returns a callback that is safe to invoke from outside the Lightning Component lifecycle.
  6. Create a new Lightning Application (File > New > Lightning Component) named ReactSearchApp implemented as follows:
    <aura:application >
        <c:ReactSearch />
  7. Click Preview (upper right corner) to run the app. Enter a few characters in the search box to search contacts by name.


This project is meant as a technical proof of concept. It is not implied that the solution presented in this article would currently pass AppExchange security review. At the time of this writing, the security requirements checklist states that: “Any Lightning package that uses Angular or React or other third party DOM-based templating frameworks will automatically fail the security review until such time as we provide custom lightning components to properly encapsulate these frameworks. This is to avoid template injection attacks resulting from double interpolation. In order to use another framework as part of a package that uses Lightning, please use an iframe or Visualforce container until approved Lightning containers are published.”

28 Responses to Creating Lightning Components with React

  1. Jason February 9, 2016 at 1:11 pm #

    Hi Chris,

    Do you know if we can use React in Lightning Components that are intended to be included in managed package?

    I had read that any Lightning Component that used React (or any other DOM manipulation framework) would fail security review due to “template injection attacks resulting from double interpolation”. Is the lightning-react repo you linked to considered an approved Lightning container for React?


    • Christophe Coenraets February 9, 2016 at 3:55 pm #

      Hi Jason. Thanks for the question. I just added a disclaimer at the bottom of the article. This approach would currently not pass AppExchange security review for the reason mentioned above … “until approved Lightning containers are published”.

  2. Jack February 14, 2016 at 10:43 pm #

    Would this pass for an UnManaged package?

  3. Robert Sussland February 24, 2016 at 4:41 am #

    You are doing DOM modification in the controller, instead of in a renderer. As a result, the lightning component doesn’t know how to render itself, and this creates problems for it when the framework unrenders and then re-renders the component. In those situations, the framework will call a render event (which does nothing) but wont reload the script (which is already in the DOM). The old container element will be put in the trash and a new container element will be generated, but react will still try to work with the old container element, since it hasn’t been told to switch to a new element. The whole react app dissapears.

    For example, suppose your app looked like this:

    Here’s some text!

    Here’s a react component

    with controller.js:

    toggle : function(component, event, helper) {
    component.get(‘v.display’) ? component.set(‘v.display’, false): component.set(‘v.display’, true);


    Now, toggle three times. The react app dissapears. If you had coded this to contract, then it wouldn’t disappear.

    These types of issues are really subtle — you can test your own app as much as you want but you wont know that it fulfills the contract of a component until you know that it is following all the requirements in the developer guide.

    Everything attempt to do DOM modification in the controller so far has been like your example — works really well when tested by the developer and starts to break when they are unrendered, or some event is sent to them, or they are put in a repeat tag, or switched around in tabs, etc. Then things start to break. Stuff like this has real repercussions for the overall stability lightning component consumers.

    Lightning is really magic, because it allows different dev teams who don’t test together to have their code running together simultaneously. In order for that happen, everyone has to code to contracts rather than just code to get their own part working.

    Having said that, you may not care about complying with contracts if you own the entire page. For example, everything is being rendered in a visualforce page with lightning out and you fully control the context in which the component is rendered. Or you are doing development in your own org. In that case, you can strategically break some rules provided you have a deep understanding of the framework and solid testing. But please don’t mistake that for a code-to-contract component that is fully “pluggable” — e.g. can be grabbed by another developer and used as they see fit without knowing the source code.

  4. Robert Sussland February 24, 2016 at 4:47 am #

    Sorry, looks like your comments aren’t encoding less than signs. Here is a gist of the App that higlights the issues. Press toggle 3 times

  5. agario March 8, 2016 at 10:05 pm #

    ess than signs.

  6. Cory Cowgill March 11, 2016 at 8:37 am #

    Can someone speak to when MV* frameworks will be supported? Is this on the roadmap? This is a major blocker to adoption. My engineers are not going to rewrite our SPA’s that live in VF Managed Packages today that use ReactJS into Lightning specific components.

  7. Richard Cook March 25, 2016 at 9:25 am #

    What is the “danger” of doing this now if we don’t plan on publishing in AppExchange and we’re behind our Salesforce logins?

  8. propchill May 17, 2016 at 7:42 am #

    Located an hour from city of Gurgaon, Sohna street has constantly drawn a considerable measure of consideration from individuals living in Gurgaon because of its pleasant settings, hot springs and the way that it is really one of the real tourism destinations inside the locale. Interest has expanded for new activities in Gurgaon, Sohna street, because of property engineers like Unitech setting up a progression of restrictive groups and mid to top of the line land ventures in the zone. Get accurate information on Residential Real estate in Gurgaon. Find and compare Residential Projects and Property in Gurgaon
    Real Estate property in Gurgaon

  9. Kevin Teng August 2, 2016 at 3:37 pm #

    Great read! Looks like with LockerService, you would be able to develop Lightning Components with JS frameworks (

    I was wondering, when you were developing this ReactJS sample app, did you have LockerService on? I’ve turned it on by using the sample of your app, but I’ve been getting errors where some global variables and references are now undefined. Mainly because of what LockerService does in terms of Global Restrictions. I was wondering if you had any thoughts on how to go about this?

    Reference for LockerService:

  10. Butuz GOL May 27, 2017 at 8:41 am #

    Quick Gist with dev mode

  11. Dinesh Kumar June 11, 2018 at 8:57 am #

    Excellent Demonstration.This is very helful topic for us. please visit,Software Company for more new
    ideas, we are thankful for this article.

  12. Shmuel Kamensky July 27, 2018 at 6:40 pm #

    I’m getting the following error:

    On line 49 is a reference to global which was disabled in Summer 16

    Uncaught TypeError: Cannot set property ‘reactSearch’ of undefined
    throws at https://–

    • pintoo jadaun August 9, 2018 at 5:52 am #

      still getting the same issue

    • Alekh Sharma August 10, 2018 at 8:07 am #

      Hi Shmuel, Even after changing to “window”. I am getting the same error.
      Any Suggestion ?

      • Shmuel Kamensky August 12, 2018 at 2:49 pm #

        I’m not sure – sorry! If I ever get back into this maybe I’ll write my own tutorial!

        • Alekh Sharma August 12, 2018 at 3:07 pm #

          Thanks, Shmuel.
          If possible can you share some other links or tutorials if you know? as I am stuck on this part.
          Thanks in advance.

    • Web Development Company September 15, 2018 at 4:01 am #

      Right it does work, I tried. thanks a lot on behalf of team TechnoBrains (

    • Swapna Konuganti September 30, 2018 at 3:48 am #

      Hi, I am also getting same error. I replaced “global” with “window”.. still no luck.

      any solution for this ?

      Cannot set property ‘reactSearch’ of undefined

  13. Web Development Company September 15, 2018 at 4:01 am #

    There are some errors came up but I found a suggestion in comments.

    Thanks on behalf of Team TechnoBrains (

  14. arlojiya September 18, 2018 at 2:44 pm #

    I wold love to create Lightning Components with React in the post.

  15. Lilly Chen February 5, 2019 at 9:14 am #

    Well, but I’ve been getting errors where some global variables and references are now undefined. Mainly because of what LockerService does in terms of Global Restrictions. thanks

  16. Haris Siam April 14, 2019 at 3:30 pm #

    It is the best information i have seen. Microsoft Office 2016 Product Key

  17. used oil recycling plant manuf March 8, 2020 at 7:48 pm #

    Petroyasan CO Is A 30 Year Old Company And One Of Top Iranian Used Oil Recycling Plant Manufacturers , Oil Distillation Plant , Grease , Solvement 402 , Sulfurization ,Waste Engine Oil Distillation Plant Manufacturers And Other

  18. Gemma Noella May 6, 2020 at 5:03 pm #

    This is really great work done by you. Keep doing your best. keygen download

  19. Invincible01 October 19, 2020 at 6:40 am #

    Amazing Article, Really useful information to all So, I hope you will share more information to be check and share here.

    what is devops
    what is devops engineering
    what is devops engineer
    what is devops tools
    azure devops tutorial
    devops tutorial for beginners
    devops tutorial pdf free download
    devops aws
    devops aws tutorial
    devops training

  20. yuvaraj singh December 22, 2020 at 3:12 am #

    Great work
    Leanpitch provides online training in Enterprise agile coaching during this lockdown period everyone can use it wisely.
    Enterprise Agile Coaching

  21. Saket Kumar February 12, 2021 at 6:27 am #

    Informative post. Thanks for posting this