Using Symfony Encore and React: what I'm really writing?

Question

EDITED

Excuse me for the very generic title, but as this is my first attempt to use React, I really have no idea of what I'm doing.

So, I'm using Symfony Encore to use React in my Symfony app.

I've installed all the required dependencies:

npm install babel-preset-react --save
npm install react --save
npm install react-dom --save
npm install prop-types --save

Then I wrote my first React script:

import React from 'react';
import ReactDOM from 'react-dom';

export default class HelloWorld extends React.Component {
    render() {
        return (
            <div>
                Hello World!
            </div>
        )
    }
}

ReactDOM.render(<HelloWorld />, document.getElementById('todo-test'));

In a first attempt I tried to follow this tutorial where is used var HelloWorld = React.createClass({... but it never worked as I received the error

ReactJs CreateClass is not a function.

After some searches, I came to this Stackoverflow answer where is suggested to use import instead of var.

In other answers is suggested also to use module.exports.

Now, as this is really the first time I approach React and Javascript, my question is:

Given the above code, what I wrote?

Is it Javascript? Is it TypeScript? Is it ES6?

I'm a bit confused by all the acronyms and sub-languages and now I don't know what I wrote.

I know it works, but I don't know the internals and I'm trying to understand them...

Do anyone can help me to better understand the code above? Any references on Internet?

Thank you.

EDIT

Following the comment of @Cerad in the comments, I expand my question.

As you can see, the class I posted (and that works!) is different than the one in HelloWorld example from the React documentation:

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

This last one, uses ReactDOM.render instead of

export default class HelloWorld extends React.Component {
    render() {
    ...

Which is the difference?

More, this "official" syntax is also different from the one I found in the linked tutorial that is this:

var HelloWorld = React.createClass({
  render: function(){
    return (
      <div>
        Hello World!
      </div>
    )
  }
});


ReactDOM.render(<HelloWorld />, document.getElementById('app'));

So I have actually 3 different syntaxes to choose from!

Which one should have I to choose? How I do a choice?

In the end, the compiled version of the three syntaxes is the same?

Where can I find the compiled version? Is it useful to read it?