Babel <3 React

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:

Shell

$ browserify -t reactify main.js

After:

Shell

$ browserify -t babelify main.js

In Node (docs)

Before:

JavaScript

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

After:

JavaScript

require('babel/register');

In Webpack (docs)

Before:

JavaScript

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

After:

JavaScript

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

In Gulp (docs)

Before:

JavaScript

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

After:

JavaScript

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