Add Transforming ES6 and JSX with Babel 6 as a javascript til.

README.md

@@ -102,6 +102,7 @@ smart people at [Hashrocket](http://hashrocket.com/).
 - [Create An Array Containing 1 To N](javascript/create-an-array-containing-1-to-n.md)
 - [Splat Arguments To A Function](javascript/splat-arguments-to-a-function.md)
 - [Throttling A Function Call](javascript/throttling-a-function-call.md)
+- [Transforming ES6 and JSX With Babel 6](javascript/transforming-es6-and-jsx-with-babel-6.md)
 - [Truthiness of Integer Arrays](javascript/truthiness-of-integer-arrays.md)
 
 ### linux

javascript/transforming-es6-and-jsx-with-babel-6.md

@@ -0,0 +1,45 @@
+# Transforming ES6 and JSX With Babel 6
+
+With Babel 5, transforming ES6 and JSX into ES5 code was accomplished by
+including the `babel-loader`. This would be configured in
+`webpack.config.js` with something like the following:
+
+```javascript
+module: {
+  loaders: [
+    {
+      test: /\.jsx?$/,
+      exclude: /node_modules/,
+      loader: 'babel-loader',
+    }
+  ],
+},
+```
+
+Now, with Babel 6, the different parts of the loader have been broken out
+into separate plugins. These plugins need to be installed
+
+```
+$ npm install babel-preset-es2015 babel-preset-react --save-dev
+```
+
+and then included as presets
+
+```javascript
+module: {
+  loaders: [
+    {
+      test: /\.jsx?$/,
+      exclude: /node_modules/,
+      loader: 'babel-loader',
+      query: {
+        presets: ['es2015', 'react']
+      },
+    }
+  ],
+},
+```
+
+Alternatively, the presets can be specified in the project's `.babelrc` file.
+
+[Source](http://jamesknelson.com/the-six-things-you-need-to-know-about-babel-6/)