If you're reading this, you probably already know that React is a great library for building user interfaces. It was created by Facebook and has been making a big splash in the web development space since its inception. It can be used for creating great, clean experiences for your users.

React is simple to set up in your Exaptive components, and this article will show you how. At the time of writing this article, however, we haven't built in support for JSX. Those of you familiar with React will know that this means all React code must be in pure JavaScript. Fear not, as support for JSX is on the way, and this article will be updated once support has been added! In the meantime, whether you are an experienced React guru or a budding web developer, this article will show you how to include React in your components in the Exaptive platform and how to get around the lack of JSX support.

Also included is a simple "Hello, World" React example that will help you verify that React is, in fact, running correctly in your component.

(When you're ready to start coding on your own, you'll want to have the Javascript Component API reference handy.)

Getting Started

To get started, create a new component from your studio by clicking the "+" button. Make sure "JavaScript" is the selected type and give your component a name. Finally, click the "Create" button.

You should now see the EDIT page of your newly created component. This is where you can edit things like the component's description, it's inputs & outputs, and the actual script it runs. For now, we are interested in the component's specification so click the SPEC tab on the left-hand side of the screen.

The spec is where we can edit things like the name of the component or add tags to help other users find it and use it in their own xaps. Most importantly for this article, we can add dependencies to our component in the "dependencies" section. So go ahead and click EDIT so we can add React as a dependency.

Add React

The spec file is simply a JSON file that describes things about your component. We are interested in the "dependencies" section, but you will notice that there is already and entry here:


"dependencies": {
    "file": [
            "type": "js",
            "path": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js",
            "name": "$"


Every JavaScript component, by default, includes jQuery as a dependency. We will go ahead and leave this in, but we won't be getting into the specifics of working with jQuery.

We can use this as an example on which to base our React dependency. We simply need to follow the same format and only edit the path and the name properties. Thus, our dependencies section now looks like the following:


"dependencies": {
    "file": [
            "type": "js",
            "path": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js",
            "name": "$"
            "type": "js",
            "path": "https://npmcdn.com/react@15.3.1/dist/react.min.js",
            "name": "React"
            "type": "js",
            "path": "https://npmcdn.com/react-dom@15.3.1/dist/react-dom.min.js",
            "name": "ReactDOM"


NOTE: in order to add React, you need to add both the react.js and react-dom.js libraries.

Now all you need to do is click "done" to close the editor and then the "save" button in the top-right corner of the screen and...voilà! You've just added React as a dependency to your component! Your component now has access to one of the best libraries for building user interfaces!

Hello, React!

Now that you've added React as a dependency, let's edit the script and test your component in a xap to make sure that everything is working as expected.

The component we will build to test React is a simple "Hello, World" example. This is just to act as a sanity check to make sure everything is working as it should be. It will take a name as an input and simply print "Hello, <name>" to the screen. Ground breaking I know, but you will soon be on your way to building amazing UIs for your xaps.

First, we need a name input. So go to the INPUTS tab on the left-hand side of the component editor. You will see a default input called doSomething. Click this to expand it so we can change some things around.

Change the name of the input to name, and enter an empty string, (""), for the default value. And because we want to always document our components, change the description to something like, "A string input that represents a name to greet." Click the "save" button to save your changes. Our component won't output anything so we can ignore the OUTPUTS tab for the time being.

Delete all the code from the INNER HTML and CSS tabs as well. Then save your changes.

Now that we've cleared all that up, it's time to dive into the code! Navigate to your component's script via the SCRIPT tab.

From here, delete the doSomething method and add a method called name:


name() {


Within the new name method put the following (don't worry, I'll go over what is going on here in a moment):


let state = this.api.inputState.export();
let name = state.name;

let React = this.api.imports.React;
let ReactDOM = this.api.imports.ReactDOM;

let HelloMessage = React.createClass({
  render: function render() {
    return React.createElement(
      { className: "greeting" },
      `Hello, ${ this.props.name }`

ReactDOM.render(React.createElement(HelloMessage, { name: name }), this.api.layoutElement);


The first two lines are grabbing access to our inputs for us so we can use them in our code. We only have the name input so we only declare a variable for that.

Next up, we get access to the React and ReactDOM libraries. This is mainly so we don't have to write  


all over our code.  

Then, we use React's createClass method to create our own element to use. Every React class needs to implement the render method, and that is what we do here. Again, this is the pure JavaScript way of doing it. Once JSX support has arrived this will be more straight forward and easy to follow.

React.createElement takes 3 arguments: type, props, and children.

We are creating an h1 tag, but this could be any HTML tag or even other React elements you've created in your component. Thus, type is h1.

Typically, this example uses null for props, but I wanted to demonstrate what actually can go here. This is an object that holds the properties of the h1 tag and we want our h1 to have the class, "greeting" so we use: className: "greeting".

NOTE: we used className instead of class because class is a keyword in JavaScript (class is now in ES6).

Next, children represents what goes inside the parent element (the h1 tag we're creating). This can simply be a string (like in our case), or it can be other React elements with their own set of type, props, and children (this is one of the main reasons that JSX makes this so much easier to code and read).

Finally, we call the render method from the ReactDOM library to render our element to the DOM in our xap. We create a React element using our React class that we created and pass the name input we grabbed earlier as the name prop for the element. The section, this.api.layoutElement is where this React element will be rendered on the page, or the "container" for the element. By default, our component has a layout element in the form of a div. So the final form here is essentially the following:


    <h1>Hello, $name</h1>


Where $name is the value in our name input.

As a little bonus, we can easily style this by using our className we assigned while creating the element. In the CSS tab enter:


.greeting {
    font-family: sans-serif;
    color: white;
    background-color: #FF1493;


This CSS will now be applied to the h1 tag in our component when we use it in a xap.

You now have a simple React-based component in your studio! Now let's try it out!

Using Our Component

Time to see our component in action! Go back to your studio and click the "+" button again, but this time select xap. This will bring you directly to the Xap Builder.

From here, click on the "search" button (the button in the top-right with the magnifying glass icon) and type in the name you gave your React component. You should see your component listed. Simply drag and drop it into your xap. This component won't do anything until we send a name input.

Click on the name input port on the component to bring up the port dialog. Now enter some text here (quotations are not required because we set the value type of this input to string so it will interpret your input here as a string already). Now with your mouse over the dialog, you should see a "play" button. Click it to send this input to your component.


Select PREVIEW and you will see your component working in all its glory! The background should be pink (or whatever you set the background color to) and you should see the message "Hello, <whatever name you gave>".

That's it! You've successfully created a React component! Take some time to revel in your victory, because you rock! Now go build some awesome UIs!

Happy building!