React in a WordPress page

If you are creating things with ReactJS, it’s sometimes nice to use it in WordPress. I will describe how to use it in a page, but this should also work for just a post.

You can do this pretty easily with a couple plugins:

“Scripts N Styles” - this plugin will allow you to add JavaScript to your Page.

“Per Page Add to Head” - this will allow you to add the necessary JavaScript libraries to the head portion of the WordPress page. This is how React is actually loaded.

Once those plugins are installed and activated, create a new WordPress page/post like normal.

You will see the plugins add two new text boxes to your edit window.

In the “Add to head” box, put the libraries you need in (as of this writing I used these):

<script src="https://fb.me/react-15.0.1.min.js"></script>
<script src="https://fb.me/react-dom-15.0.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

The next section is where you actual React code will go in. The only hiccup is you cannot use JSX here, so we need to convert that into React code (with React.createElement). Once you have that generated, then paste it into the “Scripts n Styles” section, under Scripts, then under the body area (it will be the second textarea box with tag. under the box).

The Box:

The Code, there are plenty of tutorials online on how to convert JSX into vanilla React/JavaScript code.

//Useless react code:

MyThings = React.createClass({
    displayName: "Does Stuff",

    getInitialState() {
        "use strict";

        return {
            aThing: 'one'
        };
    },

    render() {
    return React.createElement(
            "div",
            null,
            React.createElement(
                "h1",
                null,
                "My React Thing"
            )
        );
    }
});

ReactDOM.render(React.createElement(MyThings, null), document.getElementById('reactapp'));

Then for the HTML portion, the only thing you need in the WordPress page text is (make sure you edit this in the “Text” tab):

<div id="reactapp"></div>

• Programming
• React