Babel

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


This content originally appeared on Babel Blog and was authored by 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:

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


This content originally appeared on Babel Blog and was authored by James Kyle


Print Share Comment Cite Upload Translate Updates
APA

James Kyle | Sciencx (2015-02-23T10:00:00+00:00) Babel. Retrieved from https://www.scien.cx/2015/02/23/babel-2/

MLA
" » Babel." James Kyle | Sciencx - Monday February 23, 2015, https://www.scien.cx/2015/02/23/babel-2/
HARVARD
James Kyle | Sciencx Monday February 23, 2015 » Babel., viewed ,<https://www.scien.cx/2015/02/23/babel-2/>
VANCOUVER
James Kyle | Sciencx - » Babel. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2015/02/23/babel-2/
CHICAGO
" » Babel." James Kyle | Sciencx - Accessed . https://www.scien.cx/2015/02/23/babel-2/
IEEE
" » Babel." James Kyle | Sciencx [Online]. Available: https://www.scien.cx/2015/02/23/babel-2/. [Accessed: ]
rf:citation
» Babel | James Kyle | Sciencx | https://www.scien.cx/2015/02/23/babel-2/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.