X

Geertjan's Blog

  • November 17, 2016

React.js and Oracle JET (Part 1)

Geertjan Wielenga
Product Manager

Here is a fantastic small example that works perfectly, showing how to combine React with Require:

http://remarkablemark.org/blog/2016/09/24/react-requirejs-amd/

Let's take that and integrate it into an Oracle JET module.

  1. Include in Bower dependencies: "react": "15.3.2"

  2. Include in "paths" in bootstrap file, i.e., "main.js":
        'react': 'libs/react/react.min',
    'react-dom': 'libs/react/react-dom.min'
  3. In your viewModel:
    define(['ojs/ojcore', 'knockout', 'jquery', 'react', 'react-dom'],
    function(oj, ko, $, React, ReactDOM) {
    function HomeViewModel() {
    var self = this;
    self.handleAttached = function(info) {
    ReactDOM.render(
    React.createElement('h1', {}, 'hello from react!'),
    document.getElementById('root')
    );
    };
    }
    return new HomeViewModel();
    }
    );
  4. In your view:
    <div id="root"></div>
And that's all. You'll see the message above in your page when you load it.

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