Q:

Rendering old ReactJS components with new ReactJS

I'm currently porting a very old ReactJS application to ReactJS 16 however I'm struggling on how the render function works since I don't have a React.DOM anymore.
On the old component I've got the following (I've removed unnecessary code from example):
define([
    'react'
], function(
    React
){

    var D = React.DOM;

    return React.createClass({
        render: function() {

            //If the Engine is not connected or the game is starting
            if(this.state.engine.connectionState !== 'JOINED' || this.state.engine.gameState === 'STARTING')
             return D.div({ className: 'bet-bar-starting' });

            var betPercentages = calculatePlayingPercentages(this.state.engine);

            var playingLostClass, cashedWonClass, mePlayingClass;
            if(this.state.engine.gameState === 'ENDED') {
                playingLostClass = 'bet-bar-lost';
                cashedWonClass = 'bet-bar-won';
                mePlayingClass = StateLib.currentlyPlaying(this.state.engine)?  'bet-bar-me-lost': 'bet-bar-me-won';
            } else {
                playingLostClass = 'bet-bar-playing';
                cashedWonClass = 'bet-bar-cashed';
                mePlayingClass = StateLib.currentlyPlaying(this.state.engine)?  'bet-bar-me-playing': 'bet-bar-me-cashed';
            }

            return D.div({ className: 'bet-bar-container' },
                D.div({ className: cashedWonClass, style: { width: betPercentages.cashedWon + '%' } }),
                D.div({ className: mePlayingClass, style: { width: betPercentages.me + '%' } }),
                D.div({ className: cashedWonClass, style: { width: betPercentages.cashedWonAfter + '%' } }),
                D.div({ className: playingLostClass, style: { width: betPercentages.playingLost + '%' } })
            );
        }
    });

});

However I'm struggling to understand how to rewrite the render() function to the latest ReactJS version? I've managed to do the following, but I don't understand how to do the multidimensional calls to the DOM.
    class BetBar extends React.Component {

        render() {
            if(this.state.engine.connectionState !== 'JOINED' || this.state.engine.gameState === 'STARTING')
                return (<div class='bet-bar-starting'/>);

            let betPercentages = calculatePlayingPercentages(this.state.engine);
            let playingLostClass, cashedWonClass, mePlayingClass;

            if(this.state.engine.gameState === 'ENDED') {
                playingLostClass = 'bet-bar-lost';
                cashedWonClass = 'bet-bar-won';
                mePlayingClass = StateLib.currentlyPlaying(this.state.engine)?  'bet-bar-me-lost': 'bet-bar-me-won';
            } else {
                playingLostClass = 'bet-bar-playing';
                cashedWonClass = 'bet-bar-cashed';
                mePlayingClass = StateLib.currentlyPlaying(this.state.engine)?  'bet-bar-me-playing': 'bet-bar-me-cashed';
            }

            //I don't understand how to do the D.div functions...

        }

    }

    ReactDOM.render(<BetBar />);

A:

The code you are looking at is from before JSX. JSX introduced a syntax which allows you to create elements without calling functions. This results in a much more declarative style, similar to HTML, which allow you to describe your components.
To translate old code -- pre JSX -- to modern day React, all you need to do is understand the function call.
D.div({ className: 'bet-bar-container' })

This creates a div with the className "bet-bar-container", in React is takes the HTML attributes as arguments and applies them to the desired DOM element for you.
<div className="bet-bar-container"></div>

So, for example with the code you have, it would roughly translate to something like this:
<div className="bet-bar-container">
    <div className="cashedWonClass", style={{ width: betPercentages.cashedWon + '%' }}></div>
    <div className="mePlayingClass", style={{ width: betPercentages.me + '%' }}></div>
    <div className="cashedWonClass", style={{ width: betPercentages.cashedWonAfter + '%' }}></div>
    <div className="playingLostClass", style={{ width: betPercentages.playingLost + '%' }}></div>
</div>

