React.js and Oracle JET (Part 2)

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 (                         

                             

Hello, React!!!
                         
                         );             }         });     }     App.prototype.init = function () {         ReactDOM.render(             ,             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":

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 (                         {this.props.message}

                        )             }         });     }     App.prototype.init = function () {         this.repeat();     };     App.prototype.repeat = function () {         var ctx = this;         var randomMessage = messages[Math.floor((Math.random() * 3))];         ReactDOM.render(                 ,                 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