lunes, 21 de noviembre de 2016

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' 
  1. 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; });
  1. 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();     } ); 
  1. 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

5 comentarios:

  1. React JS is packed with advanced features and has the ability to match up with the current market trends, making it one of the top choices for application development. Ace Infoway is a top-notch mobile/web app development company, which has well-versed React JS developers who will help you to develop a highly functional and contemporary React JS application. So, Hire a React JS Developer and leverage its power in your business.

    ResponderEliminar
  2. Driver Toolkit License Key i'm altogether enjoyed for this blog. Its an informative difficulty. It maintain me absolutely plenty to resolve a few troubles. Its possibility are correspondingly outstanding and in upheaval fashion therefore speedy.

    ResponderEliminar
  3. I would like to say that this site was great. Its contain a lot of information.
    Idm Crack

    ResponderEliminar
  4. Thanks for sharing a great idea here. I have a gathered more information.

    ResponderEliminar

Te agradezco tus comentarios. Te esperamos de vuelta.

Todos los Sábados a las 8:00PM

Optimismo para una vida Mejor

Optimismo para una vida Mejor
Noticias buenas que comentar