将视图更改为ReactJS

Question

我是ReactJS的新手，现在原谅我。我们的医院现有Marionette BackboneJS应用程序。但是，下面的代码是一个工作BackboneJS木偶的例子，我想用ReactJS视图替换Marionette。这将极大地帮助我如何能够迁移到ReactJS。

如果我们可以使用GET方法调用（xhr/ajax）检索contentPlacement：“here”，它也会很棒。

<header> 
<h1>An Example BackboneJS Marionette</h1> 
</header> 

<article id="main"> 
</article> 

<script type="text/html" id="sample-template"> 
    put some content <%= contentPlacement %>. 
</script> 

及以下的javascript代码

// Define the app and a region to show content 
// ------------------------------------------- 

var App = new Marionette.Application(); 

App.addRegions({ 
    "mainRegion": "#main" 
}); 

// Create a module to contain some functionality 
// --------------------------------------------- 

App.module("SampleModule", function(Mod, App, Backbone, Marionette, $, _){ 

    // Define a view to show 
    // --------------------- 

    var MainView = Marionette.ItemView.extend({ 
     template: "#sample-template" 
    }); 

    // Define a controller to run this module 
    // -------------------------------------- 

    var Controller = Marionette.Controller.extend({ 

     initialize: function(options){ 
      this.region = options.region 
     }, 

     show: function(){ 
      var model = new Backbone.Model({ 
       contentPlacement: "here" 
      }); 

      var view = new MainView({ 
       model: model  
      }); 

      this.region.show(view); 
     } 

    }); 


    // Initialize this module when the app starts 
    // ------------------------------------------ 

    Mod.addInitializer(function(){ 
     Mod.controller = new Controller({ 
      region: App.mainRegion 
     }); 
     Mod.controller.show(); 
    }); 
}); 

// Start the app 
// ------------- 

App.start(); 

这里是的jsfiddle链接 - http://jsfiddle.net/Lvnwj2dp/1/

是否有人可以指导我，我将如何与ReactJS的视图替换木偶？一个新的代码真的很棒！

更新：

这是我的新jsfiddle。它正在进行REST API调用，但它不更新DOM。 http://jsfiddle.net/6df6a2zv/10/

var url = 'http://jsonplaceholder.typicode.com'; 
var responseText = ''; 

console.log('executing the request ......'); 

$.ajax({ 
    url: url + '/posts/1', 
    method: 'GET' 
}).then(function(data) { 
    responseText = data; 
}); 

var CommentBox = React.createClass({displayName: 'CommentBox', 
    render: function() { 
    return (
     React.createElement('div', {className: "commentBox"}, 
     "REST response:" + responseText 
    ) 
    ); 
    } 
}); 

ReactDOM.render(
    React.createElement(CommentBox, null), 
    document.getElementById('main') 
); 


// Define the app and a region to show content 
// ------------------------------------------- 

// var App = new Marionette.Application(); 

// App.addRegions({ 
// "mainRegion": "#main" 
// }); 

// Create a module to contain some functionality 
// --------------------------------------------- 

// App.module("SampleModule", function(Mod, App, Backbone, Marionette, $, _){ 

    // Define a view to show 
    // --------------------- 

// var MainView = Marionette.ItemView.extend({ 
//  template: "#sample-template" 
// }); 

    // Define a controller to run this module 
    // -------------------------------------- 

// var Controller = Marionette.Controller.extend({ 

//  initialize: function(options){ 
//   this.region = options.region 
//  }, 

//  show: function(){ 
//   var model = new Backbone.Model({ 
//    contentPlacement: "here" 
//   }); 

//   var view = new MainView({ 
//    model: model  
//   }); 

//   this.region.show(view); 
//  } 

// }); 


    // Initialize this module when the app starts 
    // ------------------------------------------ 

    // Mod.addInitializer(function(){ 
//  Mod.controller = new Controller({ 
//   region: App.mainRegion 
//  }); 
//  Mod.controller.show(); 
// }); 
// }); 

// Start the app 
// ------------- 

// App.start(); 

Answer 1

终于想出

var url = 'http://jsonplaceholder.typicode.com'; 
var responseText = ''; 

var CommentBox = React.createClass({ 
    displayName: 'CommentBox', 
    getInitialState: function() { 
    return { 
     response: '' 
    } 
    }, 
    componentDidMount: function() { 
    var _this = this; 
    $.ajax({ 
     url: url + '/posts/1', 
     method: 'GET' 
    }).then(function(data) { 
     _this.setState({ 
     response: data 
     }); 
    }); 
    }, 
    render: function() { 
    return (
     React.createElement('div', { 
      className: "commentBox" 
     }, 
     "REST response:" + this.state.response.title 
    ) 
    ); 
    } 
}); 

ReactDOM.render(
    React.createElement(CommentBox, null), 
    document.getElementById('main') 
); 

Answer 2

打字稿CodePen例

我会做的更好很快就写了，但这里是一些接近你在找什么。我正在使用Typescript并将jsx离开了，因为我不是一个很大的粉丝，而且它增加了另一个学习和反应的东西，有时候可以是一个足够的心理跳跃。看到下面的codepen链接

Typescript本质上是一个良好的打字系统ES6，我喜欢认为这些类型实际上是非常有用的，当试图学习新的代码。

还原反应只是视图层，你需要像Flux这样的东西来驱动它与数据和路由器，我推荐使用react-router。

这里是这个例子的类型，这应该是唯一真正非js的代码片段。

interface ViewProps { 
    children:any; 
    id:string; 
    headerTitle:string; 
    bgColor?:string; 
    className?:string; 
} 

interface ViewState { 
    bgColor:string; 
} 

http://codepen.io/Thecavepeanut/pen/mVMVEx

干杯， 杰克

注意：你可以看看编译JS在codepen