In this example, we'll use React JSX syntax in a mod.

1. Set your mod to React JSX mode

Select React JSX from the JS panel dropdown:

TIP

It's a good idea to also set the HTML panel to Plain instead of Handlebars whenever using JSX or HTML that has curly braces ({}).

2. Add React and ReactDOM scripts

Click the settings gear in the JavaScript panel. From the dropdown menu, click React to add it first, followed by React DOM second.

TIP

If you're using a bundle build of React, you can add the URL to your bundle instead of the React & ReactDOM scripts used here.

3. Add some JSX

Add the JSX below to your mod. A few features of React JSX highlighted here are:

  • Lines 12 & 14: Return HTML elements directly. In line 12, call a function inside of curly braces ({formatName(user)}) and insert the result into the element.
  • Line 17: Define an element by calling a function with different inputs.
  • Line 24: Render the element variable into the DOM, located at the mod element (mod.el).











 

 


 
 
 
 
 
 

 

const user = {
  firstName: 'Juliet',
  lastName: 'Capulet'
}

function formatName(user) {
  return user.firstName + ' ' + user.lastName
}

function getGreeting(user) {
  if (user) {
    return <p>Hello, {formatName(user)}!</p>
  }
  return <p>Hello, Stranger.</p>
}

const element = (
  <div>
    {getGreeting(user)}
    {getGreeting()}
  </div>
)

ReactDOM.render(element, mod.el)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

4. Result

Saving the mod will reload its preview, which should look like:

Hello, Juliet Capulet!

Hello, Stranger.

The above JSX is pre-compiled into "regular" ES5 JavaScript as shown below, and this JavaScript is what ultimately runs in the browser when the mod is loaded:

"use strict";
var user = {
  firstName: "Juliet",
  lastName: "Capulet"
};

function formatName(user) {
  return user.firstName + " " + user.lastName
}

function getGreeting(user) {
  if (user) {
    return React.createElement("p", null, "Hello, ", formatName(user), "!")
  }
  return React.createElement("p", null, "Hello, Stranger.")
}

var element = React.createElement("div", null, getGreeting(user), getGreeting());

ReactDOM.render(element, mod.el);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

In this way, you can use React JSX in mods while still maintaining backwards compatibility with older browsers.

Last Updated: 8/22/2018, 2:47:45 AM