Babel <3 React

February 23, 2015

James Kyle

One of the things that surprises people quite often is that Babel supports JSX out of the box.

Let me show you just how easy it is to switch:

Note: There are tons of ways to use Babel, I'll only list a few of them here. If you'd like to see a more complete list check out our Using Babel page.

In the Browser (docs)

Before:

<script type='text/jsx'></script>

After:

<script type='text/babel'></script>

In Browserify (docs)

Before:

$ browserify -t reactify main.js

After:

$ browserify -t babelify main.js

In Node (docs)

Before:

require('node-jsx').install();

After:

require('babel/register');

In Webpack (docs)

Before:

loaders: [
  { test: /\.js$/, exclude: /node_modules/, loader: 'jsx-loader'}
]

After:

loaders: [
  { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'}
]

In Gulp (docs)

Before:

gulp.src('views/**/*.js')
    .pipe(jsx())
    .pipe(gulp.dest('dist'));

After:

gulp.src('views/**/*.js')
    .pipe(babel())
    .pipe(gulp.dest('dist'));

The list goes on, but you probably get how simple it is by now. If you didn't see the tool you are looking for don't worry we have a full list of them on our Using Babel page.

If you need more help getting setup be sure to read our JSX docs or come ask other Babel users in our support chat.

— The Babel team

Recent Posts