From b58e09869897657352a5a1c4f54a532aabc05c87 Mon Sep 17 00:00:00 2001
From: jbranchaud <jbranchaud@gmail.com>
Date: Sat, 2 Jan 2016 09:28:42 -0600
Subject: [PATCH] Add Transforming ES6 and JSX with Babel 6 as a javascript
 til.

---
 README.md                                     |  1 +
 .../transforming-es6-and-jsx-with-babel-6.md  | 45 +++++++++++++++++++
 2 files changed, 46 insertions(+)
 create mode 100644 javascript/transforming-es6-and-jsx-with-babel-6.md

diff --git a/README.md b/README.md
index be59a84..3114500 100644
--- a/README.md
+++ b/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
diff --git a/javascript/transforming-es6-and-jsx-with-babel-6.md b/javascript/transforming-es6-and-jsx-with-babel-6.md
new file mode 100644
index 0000000..81aedf7
--- /dev/null
+++ b/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/)