javascript - 将 View 更改为 ReactJS

Question

我是 ReactJS 的新手，请原谅我。我们医院有一个现有的 Marionette BackboneJS 应用程序。但是，下面的代码是一个工作 BackboneJS Marionette 的示例，我想用 ReactJS View 替换 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 替换 Marionette 的 View 吗？一个新的代码真的很棒!

更新:

这是我的新 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

Typescript CodePen 示例

我很快就会写一篇更好的文章，但这里有一些接近您正在寻找的内容。我正在使用 Typescript 并把 jsx 排除在外，因为一是我不太喜欢它，二是它添加了另一件事来学习和 react ，有时可能是一次精神上的飞跃。请参阅下面的 codepen 链接

Typescript 本质上是 ES6，具有良好的类型系统，我认为这些类型在尝试学习新代码时实际上非常有帮助。

记住react只是 View 层，你需要像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

干杯， jack

注意:你可以在codepen上查看编译后的JS