Tooling Integration

Every project uses a different system for building and deploying JavaScript. We've tried to make React as environment-agnostic as possible.

React #

CDN-hosted React #

We provide CDN-hosted versions of React on our download page. These prebuilt files use the UMD module format. Dropping them in with a simple <script> tag will inject a React global into your environment. It should also work out-of-the-box in CommonJS and AMD environments.

Using master #

We have instructions for building from master in our GitHub repository. We build a tree of CommonJS modules under build/modules which you can drop into any environment or packaging tool that supports CommonJS.

JSX #

In-browser JSX Transform #

If you like using JSX, we provide an in-browser JSX transformer for development on our download page. Simply include a <script type="text/jsx"> tag to engage the JSX transformer. Be sure to include the /** @jsx React.DOM */ comment as well, otherwise the transformer will not run the transforms.

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 — see the next section.

Productionizing: Precompiled JSX #

If you have npm, you can simply run npm install -g react-tools to install our command-line jsx tool. 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: jsx --watch src/ build/. Run jsx --help for more information on how to use this tool.

Helpful Open-Source Projects #

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

Syntax Highlighting & Linting #

• Many editors already include reasonable support for JSX (Vim, Emacs js2-mode).
  • JSX syntax highlighting is available for Sublime Text and other editors that support *.tmLanguage.
  • web-mode.el is an autonomous emacs major mode that indents and highlights JSX
• Linting provides accurate line numbers after compiling without sourcemaps.
• Elements use standard scoping so linters can find usage of out-of-scope components.

Debugging #

React Developer Tools is a Chrome extension that allows you to inspect the React component hierarchy in the Chrome Developer Tools.