Add custom babel transformation plugin

Question

https://github.com/nkbt/esnext-quickstart/issues/3

I'm having trouble getting this library https://github.com/valtech-au/jsx-control-statements to work with this code. Would you mind pointing me in the right direction?

Solution:

Update webpack.config.js with babel plugin. Both in development and production:

test: /\.js$/, loaders: ['babel?plugins=jsx-control-statements/babel', 'react-hot'],

Secondly, you will need to add those globals to src/.eslintrc, otherwise build will fail linting:

"globals": {
  // Exposed by jsx-control-statements
  "If": true,
  "Else": true,
  "For": true,
  // etc
}

Full diff

Index: src/.eslintrc
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- src/.eslintrc	(revision Local version)
+++ src/.eslintrc	(revision Shelved version)
@@ -238,5 +238,11 @@
     "react/react-in-jsx-scope": 2, // Prevent missing React when using JSX
     "react/self-closing-comp": 2, // Prevent extra closing tags for components without children
     "react/wrap-multilines": 2, // Prevent missing parentheses around multilines JSX
+  },
+  "globals": {
+    // jsx-control-statements
+    "If": true,
+    "Else": true,
+    "For": true
   }
 }
Index: webpack.config.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- webpack.config.js	(revision Local version)
+++ webpack.config.js	(revision Shelved version)
@@ -51,7 +51,10 @@
   module: {
     loaders: [].concat(
       assetsLoaders,
-      {test: /\.js$/, loaders: ['babel'], include: [path.join(__dirname, 'src')]}
+      {
+        test: /\.js$/, loaders: ['babel?plugins=jsx-control-statements/babel'],
+        include: [path.join(__dirname, 'src')]
+      }
     ),
     preLoaders: [].concat(eslintLoader)
   },
@@ -90,7 +93,10 @@
   module: {
     loaders: [].concat(
       assetsLoaders,
-      {test: /\.js$/, loaders: ['babel', 'react-hot'], include: [path.join(__dirname, 'src')]}
+      {
+        test: /\.js$/, loaders: ['babel?plugins=jsx-control-statements/babel', 'react-hot'],
+        include: [path.join(__dirname, 'src')]
+      }
     ),
     preLoaders: [].concat(eslintLoader)
   },
Index: src/app/Content.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- src/app/Content.js	(revision Local version)
+++ src/app/Content.js	(revision Shelved version)
@@ -1,14 +1,20 @@
 'use strict';
 
+
 const React = require('react');
 
 
 const Content = React.createClass({
 
   render() {
+    const isOk = true;
+
     return (
       <section>
         <h1>Hello, CampJS!</h1>
+        <If condition={isOk}>
+          <div>Is OK!</div>
+        </If>
       </section>
     );
   }
Index: package.json
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- package.json	(revision Local version)
+++ package.json	(revision Shelved version)
@@ -30,6 +30,7 @@
     "file-loader": "^0.8.4",
     "istanbul-instrumenter-loader": "^0.1.3",
     "jasmine": "^2.3.1",
+    "jsx-control-statements": "^1.0.4",
     "karma": "^0.12.33",
     "karma-chrome-launcher": "^0.1.12",
     "karma-coverage": "^0.3.1",