Salesforce development with React, flux, bootstrap

Salesforce is a pretty decent stack when you want to get something up and running quickly. You can quickly create the model of your data using Custom Objects. Its then easy to create basic pages to list and edit these. In fact, you get this for free without coding at all.

Of course, likely you’ll want to customize the feel far more than what is possible with their built-in views. For this, you can use VisualForce and HTML to easily create web forms. This will get you pretty far. But if you want to create a web-app with a custom feel, you’ll want to modify the standard VisualForce CSS. If you want to get fancy with your pages, and move away from a simple form, you’ll also want to look for tools outside of just VisualForce.

By adding a few technologies to the stack, you can take your webpage to the next level. Add bootstrap to your page and you can fairly easily make your app a bit more modern (and possibly a bit standard, as many sites out there leverage bootstrap). There is a trick that is required in order to properly use bootstrap within Salesforce. Since many classes and ids are common across bootstrap and VisualForce, it is necessary for you to distinguish the two somehow. This is fairly easy, and can be done by namespacing, as described here.

The next trick to make Bootstrap far more powerful is by leveraging the power of React and Flux. Another caveat, this time with React, is that you need to write standard javascript, without the use of jsx. You can import React and create a hook as follows (Remove the … and replace with any other code you wish:

    <div id=”anchor”>Welcome to Salesforce React</div>
    <script src=””></script>
    <script src=””></script>
Now, your javascript might look something like:
var CommentBox = React.createClass({
    render: function() {
   return React.createElement(“div”, null, “Hello world! Im a comment box”);
Finally, you can incorporate Flux to simplify management of data in your application. Flux basically makes all data flow in one direction, and helps make sure there is only one source of truth. This is powerful when leveraged with React where different parts of your Salesforce application can be reflect the same data in different formats without the complexity of keeping them in sync.
I hope this is enough to get you started. Hopefully later I can give a solid example of how to do this.

2 thoughts on “Salesforce development with React, flux, bootstrap

  1. I have been browsing on-line greater than three hours these days, but I by no means found any interesting article like yours.
    It’s lovely worth enough for me. In my view, if all web owners and bloggers made just right content
    material as you probably did, the web shall be much more helpful than ever before.

Leave a Reply

Your email address will not be published. Required fields are marked *