Write React applications easily in the JVM.
Make sure you've already set up the assets module in your project!
<dependency>
<groupId>org.jooby</groupId>
<artifactId>jooby-react</artifactId>
<version>1.1.1</version>
<scope>provided</scope>
</dependency>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.
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.
Just drop the react-router-dom.js into the public/js/lib folder and use it.
It supports all the option of rollup.js processor.
-
autoprefixer: parse CSS and add vendor prefixes to CSS rules via autoprefixer.
-
props: replace application properties in CSS files.
-
clean-css: minify css.
-
csslint: check and validate css rules.
-
sass: Sass support from Java Sass Compiler (libsass).
-
svg-sprites: Generates SVG and CSS sprites with PNG fallbacks via dr-svg-sprites.
-
svg-symbol: Generates SVG and CSS sprites using svg
symbols. -
yui-css: YUI CSS optimizer.
-
props: replace application properties in JavaScript files.
-
jscs: JavaScript code style checker.
-
jshint: JavaScript linter, helps to detect errors and potential problems in code..
-
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.