In this tutorial, you will learn how to integrate Qubit within your React.js application. Qubit is an a/b testing tool that you can use to try to dynamically inject CSS and JS into your application. The reason why organizations use Qubit is usually to try and improve conversion rates. As a developer who has worked with A/B tools for many years, speaking from first-hand experience, it can also be used to do in-production hacks when things go wrong.

Qubit and React

When it comes to React and Qubit, you will need to wrap the Qubit integration wrapper around one or more components on your page. One application would be to wrap your application start tag within the Qubit wrapper. This means within Qubit you would be able to target the whole page. If you want to restrict what people can access in Qubit you may want to be more specific where you add the Qubit wrapper and only wrap certain parts. From my experience with working with Qubit and React.js, adding multiple wrappers into a page severely affects your application's performance and page load times can be reduced to a crawl.

Installing Qubit React

Enabling Qubit is pretty easy. Provided you have a Qubit account. First, within your application, you will need to install Qubit React. This can be done like so:

yarn add qubit-react;
```

The second part is ensuring you've added the Qubit Smartserve script within your application. In most companies this place is usually Google tag manager, but, it is up to you. To the Smartserve script log into Qubit and go the settings page.

  • Github page can be found here
  • NPM page can be found here
import React, { PureComponent, Fragment } from 'react';
import QubitReact from 'qubit-react/wrapper';

class MyComponent extends PureComponent {

    render() {
        return (
            <QubitReact id="my-custom-qubit-id" {...this.props}>
                <>
                    // Do Stuff
                </>
            </QubitReact>
        );
    }
}

export default MyComponent;

Code-wise, this is all you need to do within your React app. The next step is to create an experiment within the React portal. ## How To Create An Experiment Within Qubit

I won't go into too much detail on how to create an experience within Qubit but will share some code that will inject a new component into the code.

module.exports = function variation (options) {
  const React = options.state.get('React')
  const slots = options.state.get('slots')

  class QubitInjectedComponent extends React.Component {
    render () {
      return <div>Test</div>
    }
  }

  slots.render('my-custom-qubit-id', (props) => {
    return <QubitInjectedComponent />
  })

  return {
    remove: () => {
      slots.release()
    }
  }
}

To connect our Qubit wrapped component within the Qubit portal, we pass our custom qubit ID - created within the React application - within slots.render().