grunt-react
Grunt task for compiling Facebook React's .jsx templates into .js
It also works great with grunt-browserify
!
Getting Started
This plugin requires Grunt ~0.4.0
If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:
npm install grunt-react --save-dev
Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt.loadNpmTasks('grunt-react');
The "react" task
Overview
In your project's Gruntfile, add a section named react
to the data object passed into grunt.initConfig()
.
grunt.initConfig({
react: {
app: {
options: {
extension: 'js' // Default,
ignoreMTime: false // Default
},
files: {
'path/to/output/dir': 'path/to/jsx/templates/dir'
}
},
},
})
Recommended Usage
Writing your applications in CommonJS format will allow you to use Browserify to
concatenate your files. Plus, with grunt-react
, your templates will be converted from JSX to JS automatically!
First, install grunt-browserify
to your project:
npm install grunt-browserify --save-dev
Second, register grunt-browserify
in your Gruntfile:
grunt.loadNpmTasks('grunt-browserify')
Finally, add the following task to your Gruntfile:
browserify: {
options: {
transform: [ require('grunt-react').browserify ]
},
app: {
src: 'path/to/source/main.js',
dest: 'path/to/target/output.js'
}
}
You've successfully concatenated your JSX & JS files into one file!
Options
options.extension
Type: String
Default value: js
Extension of files to search for JSX-syntax & convert to JS.
options.ignoreMTime
Type: Boolean
Default value: false
Speed up compilation of JSX files by skipping files not modified since last pass.
Usage Examples
Recommended Options
I recommend naming your React Components with the .jsx
extension:
/**
* @jsx React.DOM
*/
var MyComponent = React.createClass({
...
render: function() {
return (
<p>Howdy</p>
);
}
});
Then, set your Gruntfile to use:
grunt.initConfig({
react: {
options: {
extension: 'jsx'
},
app: {
files: {
'path/to/output/dir': 'path/to/jsx/templates/dir',
}
}
},
})
This will output the following:
/**
* @jsx React.DOM
*/
var MyComponent = React.createClass({displayName: 'MyComponent',
render: function() {
return (
React.DOM.p(null, "Howdy")
);
}
});
Contributing
In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.
Release History
v0.4.1
- Add logging to make it easier catch errors, thanks to @lorefnon (#5)
v0.4.0
- Update to react-tools ~0.4.0, thanks to @Agent-H (#3)
v0.3.0
- No longer uses
bin/jsx
, thanks to @petehunt (#2) - Add
ignoreMTime
option
v0.2.0
- Add
require('grunt-react').browserify()
andrequire('grunt-react').source()
for compiling within Node
v0.1.0
- Initial release