Using React.js with lightning framework

Question

I have recently shifted from visualforce development to the lightning environment and I am new to lightning as such. I want to know if there is a way to use React.js components and implement for eg. a react datatable inside/alongside Lightning components. How would you do it and Is it recommended.

Answer 1

As a general guideline, I think the Lightning Component Framework should always be the first option to consider because it's tightly integrated with the platform. Here are some examples:

• Streamlined intercomponent communication (events)
• Native data access services (Lightning Data Service or controller class). No impact on API limits.
• Data caching performance benefits (built into Lightning Data Service)
• Better UI integration / No iframe (compared to 3rd party frameworks loaded using Lightning Container Component)

That said, you can also use other frameworks if you so desire or if you have existing code you want to integrate in Lightning. There are two ways you can do it:

• Load the third party component directly in the Lightning Component DOM. In that case, the Lightning component is just a container for your component written using a 3rd party framework. This solution requires your framework to be compliant with the Locker Service.
• Use the Lightning Container Component (dev preview in Spring 17) -- iframe based solution.

See this blog post for more details.

Answer 2

In the Lightning Component Basics trailhead they provide a good answer to this question:

While it’s possible to use third-party JavaScript frameworks with Lightning Components, it’s a bit cumbersome. Lightning Components doesn’t have the notion of an empty page, and has some specific opinions about how, for example, data access is performed, and some rather specific security requirements.

And frankly, the features of Lightning Components and most modern frameworks overlap quite a bit. While the style or specifics might be different, the features provided are conceptually similar enough that you’re effectively running duplicate code. That’s neither efficient nor easy to work with.

Another thing to consider: general-purpose frameworks such as AngularJS are designed to be agnostic about the platform they run on top of, in particular data services. Lightning Components, on the other hand, is designed to connect natively with services provided by Salesforce and the Force.com platform. Which do you think is going to help you build apps faster?

If you still want to use them, take a look at Using External JavaScript Libraries