reactify

WebJar for reactify

License

License

MIT
Categories

Categories

React User Interface Web Frameworks
GroupId

GroupId

org.webjars.npm
ArtifactId

ArtifactId

reactify
Last Version

Last Version

1.1.1
Release Date

Release Date

Type

Type

jar
Description

Description

reactify
WebJar for reactify
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/andreypopp/reactify

Download reactify

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.npm/reactify/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>reactify</artifactId>
    <version>1.1.1</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.npm/reactify/
implementation 'org.webjars.npm:reactify:1.1.1'
// https://jarcasting.com/artifacts/org.webjars.npm/reactify/
implementation ("org.webjars.npm:reactify:1.1.1")
'org.webjars.npm:reactify:jar:1.1.1'
<dependency org="org.webjars.npm" name="reactify" rev="1.1.1">
  <artifact name="reactify" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.npm', module='reactify', version='1.1.1')
)
libraryDependencies += "org.webjars.npm" % "reactify" % "1.1.1"
[org.webjars.npm/reactify "1.1.1"]

Dependencies

compile (2)

Group / Artifact Type Version
org.webjars.npm : through jar [2.3.4,2.4)
org.webjars.npm : react-tools jar [0.13.0,0.14)

Project Modules

There are no modules declared in this project.

reactify

DEPRECATED: Use 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 <div>Hello, {this.props.name}!</div>
  }
}

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

{
    "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.

Versions

Version
1.1.1