React JSX to JS (ES5 and ES6) Transpilation Examples

1_react_es6.jsx

let styles = {
  backgroundColor: '#fefefe',
  color: '#ff0000'
}

class App extends React.Component {
  render() {
    return (
      <div style={styles}>
        <form action="/somewhere" method="post">

          <table>
            <thead>
              <tr>
                <th>ID</th>
                <th>Name</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>John</td>
              </tr>
              <tr>
                <td>2</td>
                <td>Doe</td>
              </tr>
            </tbody>
          </table>

        </form>
      </div>
    );
  }
}

2_react_es6.jsx

let styles = {
  backgroundColor: '#fefefe',
  color: '#ff0000'
};

class App extends React.Component {
  render() {
    return React.createElement(
      'div',
      { style: styles },
      React.createElement(
        'form',
        { action: '/somewhere', method: 'post' },
        React.createElement(
          'table',
          null,
          React.createElement(
            'thead',
            null,
            React.createElement(
              'tr',
              null,
              React.createElement(
                'th',
                null,
                'ID'
              ),
              React.createElement(
                'th',
                null,
                'Name'
              )
            )
          ),
          React.createElement(
            'tbody',
            null,
            React.createElement(
              'tr',
              null,
              React.createElement(
                'td',
                null,
                '1'
              ),
              React.createElement(
                'td',
                null,
                'John'
              )
            ),
            React.createElement(
              'tr',
              null,
              React.createElement(
                'td',
                null,
                '2'
              ),
              React.createElement(
                'td',
                null,
                'Doe'
              )
            )
          )
        )
      )
    );
  }
}

3_react_es5.jsx

let styles = {
  backgroundColor: '#fefefe',
  color: '#ff0000'
}

let App = React.createClass({
  render: function () {
    return (
      <div>
        <form action="/somewhere" method="post">

          <table>
            <thead>
              <tr>
                <th>ID</th>
                <th>Name</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>John</td>
              </tr>
              <tr>
                <td>2</td>
                <td>Doe</td>
              </tr>
            </tbody>
          </table>

        </form>
      </div>
    );
  }
});

4_react_es5.js

let styles = {
  backgroundColor: '#fefefe',
  color: '#ff0000'
};

let App = React.createClass({
  displayName: 'App',

  render: function () {
    return React.createElement(
      'div',
      null,
      React.createElement(
        'form',
        { action: '/somewhere', method: 'post' },
        React.createElement(
          'table',
          null,
          React.createElement(
            'thead',
            null,
            React.createElement(
              'tr',
              null,
              React.createElement(
                'th',
                null,
                'ID'
              ),
              React.createElement(
                'th',
                null,
                'Name'
              )
            )
          ),
          React.createElement(
            'tbody',
            null,
            React.createElement(
              'tr',
              null,
              React.createElement(
                'td',
                null,
                '1'
              ),
              React.createElement(
                'td',
                null,
                'John'
              )
            ),
            React.createElement(
              'tr',
              null,
              React.createElement(
                'td',
                null,
                '2'
              ),
              React.createElement(
                'td',
                null,
                'Doe'
              )
            )
          )
        )
      )
    );
  }
});