Language Tooling Back

ES2015 with JSX

In-browser JSX Transform

If you like using JSX, Babel 5 provided an in-browser ES2015 and JSX transformer for development called browser.js that can be included from CDNJS.

With that JavaScript file, we can just include a <script type="text/babel"> tag to engage the JSX transformer.

Note:

The in-browser JSX transformer is fairly large and results in extraneous computation client-side that can be avoided. Do not use it in production

Productionizing: Precompiled JSX

If you have npm, you can run:

$ npm install -g babel-cli

This tool will translate files that use JSX syntax to plain JavaScript files that can run directly in the browser. It will also watch directories for you and automatically transform files when they are changed; for example:

$ babel --watch src/ --out-dir lib/.

Beginning with Babel 6, there are no transforms included by default. This means that options must be specified when running the babel command, or a .babelrc must specify options.

Additional packages must also be installed which bundle together a number of transforms, called presets. The most common use when working with React will be to include the es2015 and react presets. More information about the changes to Babel can be found in their blog post announcing Babel 6.

Here is an example of what you will do if using ES2015 syntax and React:

$ npm install babel-preset-es2015 babel-preset-react
$ babel --presets es2015,react --watch src/ --out-dir lib/

Helpful Open-Source Projects

The open-source community has built tools that integrate JSX with several editors and build systems. See JSX integrations for the full list.

Flow

Flow is a JavaScript type checker released by Facebook, and it supports JSX. For more info, checkout the Flow homepage.

TypeScript

TypeScript is a type-checker and transpiler that supports type-checking React and JSX. For more info, check out their guide on getting started with React and Webpack, or learn more about TypeScript's JSX support.

To learn more about TypeScript in general, visit the TypeScript homepage.

Comments Copyright © aleen42 all right reserved, powered by aleen42

Empty Comments

Sign in GitHub

As the plugin is integrated with a code management system like GitLab or GitHub, you may have to auth with your account before leaving comments around this article.

Notice: This plugin has used Cookie to store your token with an expiration.

authorize