react

react

Write React applications easily in the JVM.

Make sure you’ve already set up the assets module in your project!

dependency

<dependency>
 <groupId>org.jooby</groupId>
 <artifactId>jooby-react</artifactId>
 <version>1.1.3</version>
 <scope>provided</scope>
</dependency>

usage

Download react.js and react-dom.js into public/js/lib folder.

Then add the react processor to conf/assets.conf:

assets {
  fileset {

    index: index.js
  }

  pipeline {

    dev: [react]
    dist: [react]
  }

}

Write some react code public/js/index.js:

  import React from 'react';
  import ReactDOM from 'react-dom';

  const Hello = () => (
    <p>Hello React</p>
  )

  ReactDOM.render(<Hello />, document.getElementById('root'));

Choose one of the available template engines add the index.js to the page:

<!doctype html>
<html lang="en">
<body>
  <div id="root"></div>
  {{ index_scripts | raw}}
</body>
</html>

The {{ index_scripts | raw}} here is pebble expression. Open an browser and try it.

how it works?

This module give you a ready to use react environment with: ES6 and JSX support via babel.js and rollup.js.

You don’t need to install node.js, npm, … nothing, babel.js and rollup.js run on top of j2v8 as part of the JVM process.

options

react-router

Just drop the react-router-dom.js into the public/js/lib folder and use it.

rollup

It supports all the option of rollup.js processor.

see also

css processors

js processors

  • props: replace application properties in JavaScript files.

  • jscs: JavaScript code style checker.

  • jshint: JavaScript linter, helps to detect errors and potential problems in code..

  • babel: Ecma6 now via Babel.

  • react: React support.

  • rollup: rollup.js the next-generation ES6 module bundler.

  • ng-annotate: Add, remove and rebuild AngularJS dependency injection annotations.

  • closure-compiler: Google JavaScript optimizer and minifier.

  • uglify: uglify.js optimizer.

  • requirejs: r.js optimizer.

  • yui-js: YUI JS optimizer.