<commit_before>@property {Object} System.babelOptions
@parent StealJS.config

Options that will be passed into Babel when compiling ES6 code. The options are the same described [here](https://babeljs.io/docs/usage/options/).

@body

## JSX

JSX is supported by default, so you can use it directly in your code like:

```js
export default <div>Hello <strong>world!</strong></div>;
```<commit_msg>added docs for https://github.com/stealjs/es6-module-loader/pull/4<commit_after>@property {Object} System.babelOptions
@parent StealJS.config

Babel 6 is the default JavaScript compiler in stealJS.
Babel provides some options for transpiling the JavaScript code.
Available options can be found [here](https://babeljs.io/docs/usage/options/))

@body

## Default Babel 6 options
The default options for the Babel 6 transpiler are

#### [Presets](https://babeljs.io/docs/plugins/#presets)

- es2015-no-commonjs
- react
- stage-0
    
#### [Plugins](https://babeljs.io/docs/plugins/#transform-plugins)

- transform-es2015-modules-systemjs

An example of configuration `babelOptions` in your __package.json__
```
"system": {
    "babelOptions": {
        "presets": [
            "es2015-no-commonjs",
            "react",
            "stage-0"
        ],
        "plugins": [
            "transform-es2015-modules-systemjs"
        ]
    }
}
```

Babel options like `optional`, `whitelist` or `blacklist` are __not__ vaild options in Babel 6 anymore.


## Babel 5 options for stealJS < 1.0
If you are using a stealJS version less than 1.0, Babel is not the default transpiler.
See [System.transpiler] how to change the JavaScript compiler.
If you activated Babel as the default transpiler, steal sets the following as default options

#### blacklist
- react

If you want JSX support, pass an empty array for the blacklist option.
An example of configuration `babelOptions` in your __package.json__
```
"system": {
    "babelOptions": {
        "blacklist": []
    }
}
```

## JSX

JSX is supported by default with the Babel 6 compiler, so you can use it directly in your code like:

```js
var hw = <div>Hello <strong>world!</strong></div>;
```

If you would like to import a `.jsx` template to your app like this:
```
import renderer from "my-jsx-template.jsx";
```
have a look at the [steal-react-jsx](https://www.npmjs.com/package/steal-react-jsx) plugin
{'fraction_non_alphanumeric': 0.11802300809544099, 'fraction_numerical': 0.013208351086493396, 'mean_word_length': 3.6772908366533863, 'pattern_counts': {'":': 7, '<': 12, '<?xml version=': 0, '>': 11, 'https://': 6, 'lorem ipsum': 0, 'www.': 1, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2104508', 'n_tokens_mistral': 759, 'n_tokens_neox': 715, 'n_words': 250}