https://github.com/andreypopp/reactify

[DEPRECATED] Browserify transform for JSX (superset of JavaScript used in React library by Facebook)
https://github.com/andreypopp/reactify

Last synced: 24 days ago
JSON representation

[DEPRECATED] Browserify transform for JSX (superset of JavaScript used in React library by Facebook)

• Host: GitHub
• URL: https://github.com/andreypopp/reactify
• Owner: andreypopp
• License: mit
• Created: 2013-05-30T12:19:13.000Z (over 11 years ago)
• Default Branch: master
• Last Pushed: 2019-11-06T18:41:10.000Z (about 5 years ago)
• Last Synced: 2024-10-13T23:43:00.841Z (27 days ago)
• Language: JavaScript
• Homepage:
• Size: 87.9 KB
• Stars: 690
• Watchers: 13
• Forks: 68
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• awesome - reactify

README

        
# reactify

**DEPRECATED:** Use [babelify](https://github.com/babel/babelify) instead (make sure you configured Babel with babel-preset-react).

[Browserify][] transform for JSX (superset of JavaScript used in [React][]

library):

    var React = require('react')

    class Hello extends React.Component {

      render() {

        return 
Hello, {this.props.name}!

      }

    }


Save the snippet above as `main.js` and then produce a bundle with the following

command:

    % browserify -t reactify main.js

`reactify` transform activates for files with either `.js` or `.jsx` extensions.

If you want to reactify modules with other extensions, pass an `-x /

--extension` option:

    % browserify -t coffeeify -t [ reactify --extension coffee ] main.coffee

If you don't want to specify extension, just pass `--everything` option:

    % browserify -t coffeeify -t [ reactify --everything ] main.coffee

## ES6 transformation

`reactify` transform also can compile a limited set of es6 syntax constructs

into es5. Supported features are arrow functions, rest params, templates, object

short notation and classes. You can activate this via `--es6` or `--harmony`

boolean option:

    % browserify -t [ reactify --es6 ] main.js

es6 class getter and setter methods can be activated via `--target es5` option:

    % browserify -t [ reactify --es6 --target es5 ] main.js

You can also configure it in package.json

```json

{

    "name": "my-package",

    "browserify": {

        "transform": [

            ["reactify", {"es6": true}]

        ]

    }

}

```

## Troubleshooting

### Code in 3rd-party packages isn't being transformed by reactify

By default Browserify applies transforms only for modules in the current package. That means that if there are modules with JSX in packages in `node_modules/` directory then browserify will throw SyntaxError left and right even if you are using reactify.

The best way to fix that is ask package author to publish to npm with code compiled down to plain ES5 which is runnable in browsers and Node.js as-is.

Another approach is to ask to add

```

"browserify": {

  "transform": ["reactify"]

}

```

to the package's `package.json`. That will make Browserify apply reactify transform for that package too.

Another way is to activate reactify with `-g` option which will instruct Browserify to apply reactify to every module it encounters:

```

% browserify -g reactify main.js

```

Note that this will lead to slower builds as every module will be parsed and transformed by reactify even if it doesn't have JSX code in it. 

[Browserify]: http://browserify.org

[React]: http://facebook.github.io/react/