Develop Reference

Why Babel doesnt use javascript class when transpiling to ES2015?

I've recently been trying the online Babel transpiling tool, and I've noticed that when transpiling a class to ES2015, it doesnt use javascript class and creates var _createClass = function () {... boilerplate instead: Demo
Yet, the javascript class keyword has been added in ES2015. Source
The javascript class is used only when ticking ES2016.
Why is that?

I've noticed that when transpiling a class to ES2015, it doesnt use javascript class: https://babeljs.io/repl#?presets=es2015&…
You weren't transpiling to ES2015, you were transpiling from ES2015 to an older version. The ES2015 preset selects all the transformations that generate ES3/5 code for ES2015 stuff.
The javascript class is used only when ticking ES2016.
Yes, it keeps the class syntax and other features from ES2015 when you only transpile the ES2016 (or higher) stuff.

Yet, the javascript class keyword has been added in ES2015
Yes, the keyword was defined on ES2015 and class was already a reserved word before that, but the actual implementation is a different story. As #AshKander mentions in they comment, the point of using babel with a specific target is to get that code to work on all browsers that support such target.
List of reserved keywords (present and future)

Transpiling class based web components with babel

I've a simple web component following the latest web components v1 class syntax, it works great in Chrome and Firefox/Edge (with a polyfill) but I'd like it to run in IE11 so I need to transpile the class. However running it through babel produces code that no longer works in any browser.
Is there any way to generate backwardly compatible web components with the class syntax or is there a preferred way to write web components for maximum compatibility?
Example code -
class TestElement extends HTMLElement {
connectedCallback(){
this.innerHTML = "<div>Testing</div>"
}
}
customElements.define('test-element', TestElement)
Error message when using transpiled code is -
Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.

To compile Custom Element classes with Babel, you can use this plugin from Github.
It will use Reflect.construct() instead of new, which is not permitted with HTMLElement objects.

One solution is to use the native-shim available with this polyfill
https://github.com/webcomponents/custom-elements
It's not perfect though, would like to find a cleaner solution.

Confusion with Reactjs syntax

I'm very new to this, so please bear with me everyone. I have studied React where a component is created like,
var app = React.createClass({ ... });
Just like here.
However, after installing react in my mac, I see that the syntax is a bit different from what I'm used to. i.e.,
class Application extends React.Component { ... }
Just like here.
Now, I did understand the code due my prior knowledge in Java. But I just wanted to know the difference. This is proving to be a problem for me because when I wrote the syntax like React.createClass(), it didn't work.
If you look at the second link in codepen you'll see that Babel is written beside JS. So, does react use Babel by default?
I think you get the picture. Thanks!

Your first example uses the React.createClass() helper function, while the second one uses the ES6 class syntax to define a React component.
Both are valid approaches to defining components. Note however, that you will need to transpile your ES6 code to ES5 before shipping it to make it cross-browser-compatible.
More info on ES6-style component definitions.

How to export objects from within ES6 modules

I am exporting a object as below:
//apiEndpoints.ts
import {CONSTANTS} from './constants';
let remote = CONSTANTS.API_ENDPOINT;
export const ENDPOINT = {
signup: remote + 'auth/signup',
checkusername: remote + 'auth/checkUsername/${username}'
};
Upon importing this module, ENDPOINT is not imported.
see attached error

You are using a transpiler. In the actual output code, there is no variable called ENDPOINT because the transpiler has renamed it. You are getting an error when you type that in the debugger console because it doesn't exist with that name. You can see in the scope inspector in the sidebar, the name you'd actually have to type is
apiEndpoints_1.ENDPOINT
where the name of the object is based off of the filename of the module being imported, and the property is the exported key. The renaming is done in this case to make sure that the code behaves properly to take ES6 live import bindings into account.

This is an Ionic v2 project. Ionic v2 uses the typescript transpiler.
The majority of the features that the transpiler works on are ECMAScript 2015 related.
The error I am referring to is about the module implementation in ECMAScript 2015. To learn more see
http://exploringjs.com/es6/ch_modules.html
Hence, in an ideal world, I should be able to export constants, variables, functions and classes. However for some reason when I attempt to export variables and objects .. it fails.
It does not fail on classes.
#loganfsmyth is right. It is importing the module, but renaming it and hence rendering it unusable.
I had to rethink the implementation and am using a different approach for now until I figure out a solution to this issue.
Thanks all who tried.

How would I got about implementing an instance of react-wavesurfer not using es6?

I'm unfamiliar with es6 and would like to use react-wavesurfer in my project. the documentation is here: https://github.com/mspae/react-wavesurfer but the example use is in es6 and I'm not sure how I would do it in more vanilla js. IE var WaveSurfer = React.createClass etc... any help on how I would embed this in my rails project would be greatly appreciated!!

I've put together an example of how to do this: http://codepen.io/mspae/pen/XdaRZL
(Click on the Settings button on the top right and then on JavaScript to see which javascript files I included. The order is important if you're not using a module loader)
Note that in most React examples these days – apart from the basic es6 transformation (which brings lots of basic language features) – there is also the JSX transformation (Which translates html style tags into calls to React.createElement(...). With the go-to transpiler at the moment – babel – supporting both this is almost always done together, but the two things work independently.
For the difference between the es6 class MyComponent extends React.Component syntax and the es5 (read: non-transpiled javascript) React.createClass({... API this article is quite informative: https://toddmotto.com/react-create-class-versus-component/
And for information how to use React without JSX I recommend this article: https://www.packtpub.com/books/content/using-reactjs-without-jsx