Won't you listen 'cos I'm at it again
Lightning striking, and on that you can depend
They say that lightning never strikes the same place twice
Gods of thunder, sit and watch the event
-Ozzy Osbourne Lightning Strikes
"Thinking in React" is essentially the art of breaking down larger user interfaces into several smaller components.
Combined, the two provide an extremely powerful framework for building interactive user interfaces in Salesforce.
Let's use the Lightning Tabs component as an example. After pasting the example code into a Visualforce page, a very nicely formatted navigation menu will appear in the page.
To make this navigation tab interactive, we'll wrap the individual Tab components in React classes. We begin by deconstructing the Tab UI down into smaller classes that can be implemented in React.
A hierarchy of React components representing a Lightning tab navigation:
App (The application container)
Tabs (A collection of tabs)
Tab (A single tab instance)
Content (Content associated with a tab)
ReactJS components "react" to changes in data state. The data we're going to inject into this application is an array of Tabs, defined as follows:
Now this is where the ReactJS framework comes into play. The App class provides the outermost container for the entire application. The state of which tab is currently selected is managed in the App class.
The App.render() method constructs a Tabs class, which is a container for many individual tabs.
The majority of dynamic rendering occurs in the Tab class.
Finally, this snippet of code sets the whole interactive model in motion. It creates an instance of the <App/> class within the document <body> tag.
You'll notice that the Tab onClick event gets bubbled up through the Tabs container, and is ultimately handled by the App class.
Events are handled at the most appropriate scope in an application. In this case, the App class updates the currentTab variable and the entire DOM is automatically updated to reflect the change in state.
Also notice that no dynamic removeClass() or addClass() logic is required to re-render the tabs. This is where the real magic of React is utilized.
React manages a virtual DOM (Document Object Model) and diff engine to automatically determine which components in the hierarchy need to be re-rendered every time there is a change in data state.
The Whole Enchilada
Wrapping Lightning Design Studio components in React classes is a remarkably powerful and efficient combination.
An interactive navigation menu can be implemented in under 100 lines of code without writing any custom CSS or complex JS event handlers. Entire source code for this example is below.
Need a custom Salesforce application or AppExchange product developed using the latest Lightning design studio components? Contact us for details.