X

Geertjan's Blog

React.js and Oracle JET (Part 2)

Geertjan Wielenga
Product Manager

Following on from part 1, the next step is to have support for React JSX in the context of our Oracle JET application. The RequireJS plugin below works perfectly in the context of Oracle JET applications, as outlined below:

https://github.com/podio/requirejs-react-jsx

To use the above in your Oracle JET applications:

  1. Include the above plugin in "bower.json": "requirejs-react-jsx": "1.0.2"

  2. Add the following to the bootstrap file (i.e., main.js) paths directive:



        'babel': 'libs/requirejs-react-jsx/babel-5.8.34.min',
    'jsx': 'libs/requirejs-react-jsx/jsx'
  3. Create a file named "app.jsx", e.g., in a folder named "components", with this content, i.e., this defines a simple React component in a JSX file:

    define(function (require) {
    var React = require('react');
    var ReactDOM = require('react-dom');
    function App() {
    this.HelloWorld = React.createClass({
    render: function () {
    return (
    <div>
    <h1>Hello, React!!!</h1>
    </div>
    );
    }
    });
    }
    App.prototype.init = function () {
    ReactDOM.render(
    <this.HelloWorld />,
    document.getElementById('root')
    );
    };
    return App;
    });
  4. Now, let's use the above React component in one of our Oracle JET modules:

    define(['ojs/ojcore', 'knockout', 'jsx!components/app'],
    function (oj, ko, App) {
    function HomeViewModel() {
    var self = this;
    self.handleAttached = function (info) {
    var app = new App();
    app.init();
    };
    }
    return new HomeViewModel();
    }
    );
  5. Finally, let's render the view, i.e., this is the "home.html" for the above "home.js":

    <div id="root"></div>

That's it, the first React component expressed in JSX in an Oracle JET application.

Here's a variation whereby you use a property in your JSX component, where the value changes based on a timer:

define(function (require) {
var React = require('react');
var ReactDOM = require('react-dom');
var messages = ['Hello, World', 'Hello, Planet', 'Hello, Universe'];
function App() {
this.Greeting = React.createClass({
render: function () {
return (
<p>{this.props.message}</p>
)
}
});
}
App.prototype.init = function () {
this.repeat();
};
App.prototype.repeat = function () {
var ctx = this;
var randomMessage = messages[Math.floor((Math.random() * 3))];
ReactDOM.render(
<this.Greeting message={randomMessage}/>,
document.getElementById('root')
);
setTimeout(function(){ctx.repeat()}, 1000);
};
return App;

References: 

https://www.sitepoint.com/getting-started-react-jsx/

http://stackoverflow.com/questions/3264739/image-change-every-30-seconds-loop

Be the first to comment

Comments ( 0 )
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.Captcha
Oracle

Integrated Cloud Applications & Platform Services