Create a rich SaaS website using ReactJS

5 mins

In my recent investigations with React, I’ve done a few different tests and prototypes using both ReactJS (React for inclusions in websites) and ReactNative (React for Mobile).

In this post, I’m going to show you how to simply add a ReactJS application into your Drupal website, and specifically, how to do it when using restrictive platforms such as GovCMS SaaS.

You can skip ahead to the GitHub repository that contains everything we will be going over here, with most of it outlined in the README.md file.

react-in-theme from GitHub.

Setup

This is actually done quite simply, and it follows along the lines of most standard Javascript implementations.

First, you need to include the major libraries.  This can be done in a hack by simply editing your html.html.twig file and including them, or more correctly by doing a PreProcess or block alter or whatever you want to do to ensure it’s always included when it’s needed.

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js" crossorigin></script>

In your theme, make a folder for your App just to keep everything neat and contained, and create two blank files:

  • app.js - Which will hold all our React Javascript
  • app.css - Which is a standard CSS file that we can use to style our form

Then at the bottom of the HTML, we link them:

<script type="text/babel" src="/themes/react/myApp/app.js"></script>
<link rel="stylesheet" href="/themes/react/myApp/app.css" media="all" />

So lastly, we need to add in some HTML that will get re-written into our ReactJS app.

I just added a block, but you can add your HTML however you would like.

In my example, I added:

<div id="myreactapp"></div>

This ensures that you have the Framework loading first, then the HTML and finally our Javascript control that will rewrite the page content.

Proof of Concept

As a very simple Proof of Concept we are going to replace our blank div, with a dynamic custom form.

Open up the app.js file, and add in what will end up doing the basic rendering of our Form:

const e = React.createElement;
const domContainer = document.querySelector('#myreactapp');
ReactDOM.render(e(NameForm), domContainer);

Next, we need to define our element that will render. In the above code it’s looking for something called NameForm.

At the top of the file add in:

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: ''
    };
  }

  render() {
    return (
      <form>
      </form>
    );
  }
}

This creates a component called ‘NameForm’, who has a variable called ‘Name’ in the States array, and when it’s rendered, returns a simple <form>.

If you save, refresh and inspect your website code, you will now see a simple <form></form> inside your Div from earlier.

Congratulations, you have created a ReactJS App in a Drupal website, we are done..............

 

But to show off one simple functionality, we are going to add in a text field, and make it dynamically give us the result back as we type.

In the <form>, let’s add a text input, but it’s going to have a few special properties:

<input
  type="text"
  value={this.state.name}
  onChange={this.handleChange}
/>

This means:

  • That it’s a Text input, just like normal HTML markup
  • The Value is a dynamic value that gets saved to this.state.name
  • onChange we want to run a function called handleChange.

Lastly, we need the handleChange function, and then bind it.

handleChange(event) {
  this.setState({name: event.target.value});
}

And to ensure the App knows about it, inside the constructor(props) add:

this.handleChange = this.handleChange.bind(this);

Very simply, its set’s the state of the Name variable as the event triggers Value field.

What that means is that whenever the field changes (aka, when we type), it’s saving into the State array with the new value.

The easiest way to test this is to simple Output the Name state as text.

Add in the following under the <input> element.

<h3>{this.state.name}</h3>

And BAM, when you type in the input field, it get’s output to the Heading 3!

Yes, you could do that with jQuery, with something like .keyup and .innerHtml or something… But in this case, it’s happening all automatically.

This means, you could have an input form on the left, and the live results on the right that change as you type.

 

Now that you have seen how easy it can be to add a simple text field, you can go and read the full GitHub repo, which includes many many state variables, helper functions, custom elements, reading from a CSV file and more!

 

All the code:

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: ''
    };
    this.handleChange = this.handleChange.bind(this);
  }
  
  handleChange(event) {
    this.setState({name: event.target.value});
  }

  render() {
    return (
      <form>
        <input
          type="text"
          value={this.state.name}
          onChange={this.handleChange}
        />
        <h3>{this.state.name}</h3>
      </form>
    );
  }
}

const e = React.createElement;
const domContainer = document.querySelector('#myreactapp');
ReactDOM.render(e(NameForm), domContainer);
Date posted:
13 November 2018
Authored by :
Toby Wild