ASP 4 MVC 5アプリケーションの小さなサブセットでリアクションを使用

Question

私はリフレクションを使用して領域として外部モジュールをロードする非常に大きなASPアプリケーションを持っています。

私は現在、Reactのようなものの第一候補である1つのエリアを開発しています。このエリアはプロジェクトの残りの部分としてレイアウトを共有しているので、単にReactを製品自体の中核機能として含めることは望ましくなく、このモジュール/エリアだけに隔離しておきたいと思います。

私のプロジェクトの残りの部分はES6にはないReactのようなものをどのようにサポートしますか？これをこの1つのモジュールだけにしておきたいのですか？

Answer 1

イベントをフロントエンドにバインドするにはプッシャーを設定する必要があります。 ここでは、プッシャーを設定するために行う必要がありますいくつかのものが「ある -

• サインアップをプッシャするとあなたは私が私のコントローラにプッシャークラスを初期化した

資格情報を取得しますクラス

ここで

@RestController 
@SessionAttributes(GeneralConstants.ID_SESSION_SHOPPING_CART) 
public class CartController { 

    private List<Product> products = new ArrayList<Product>(); 

    private Pusher pusher; 

    /** 
    * Method executed after the object is created 
    * that creates an instance of the Pusher object and 
    * populates the list of products 
    *you will get your pusher constants after signing in pusher 
    */ 
    @PostConstruct 
    public void configure() { 
     pusher = new Pusher(
       PusherConstants.PUSHER_APP_ID, 
       PusherConstants.PUSHER_APP_KEY, 
       PusherConstants.PUSHER_APP_SECRET 
     ); 
     @RequestMapping(value = "/products", 
      method = RequestMethod.GET, 
      produces = "application/json") 
    public List<Product> getProducts() { 
     return products; 
    } 

は、ビューとして機能している私のhtmlページある。 のインポートに必要なCDNあなたはエントリーポイントになります

<!-- React --> 
     <script src="https://unpkg.com/react@15.4.1/dist/react-with-addons.js"></script> 
     <script src="https://unpkg.com/react-dom@15.4.1/dist/react-dom.js"></script> 
     <script src="https://unpkg.com/babel-standalone@6.19.0/babel.min.js"></script> 

     <!-- Libs --> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.1/fetch.js"></script> 
     <script src="https://js.pusher.com/4.0/pusher.min.js"></script> 

     <!-- Pusher Config --> 
     <script th:inline="javascript"> 
     var PUSHER_APP_KEY = /*[[${pusher_app_key}]]*/ 'NA'; 
     var PUSHER_CHANNEL_NAME = /*[[${pusher_channel}]]*/ 'NA'; 
     </script> 

     <!-- App/Components --> 
     <script type="text/babel" src="/js/components/app.js"></script> 

app.js CDN使用したくない場合、あなたはまた、WebPACKのを使用することができますし、このクラスのプッシャーでイベントをリッスンすると、コントローラ

とそれらを結合しあなたが使用したいApp.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 


import scriptLoader from 'D:/Training Softwares/shopping-cart-pusher-master/src/main/resources/static/js/apps.js'; 



import Header from 'D:/Training Softwares/shopping-cart-pusher-master/src/main/resources/static/js/components/header.js'; 




var App = React.createClass ({ 
     getInitialState: function() { 
     return { items: [], products: [] }; 
     }, 

     componentWillMount: function() { 
      alert("snake2ee") 
     this.pusher = new Pusher("", { 
      encrypted: true, 
      cluster: 'ap2', 
     }); 
     this.channel = this.pusher.subscribe("your event"); 
     this.total = 0; 
     }, 

     componentDidMount: function() { 


     fetch('/products').then(function(response) { 
      return response.json(); 
     }).then(this.getProductsSuccess); 
     }, 
     componentWillUnmount: function() { 

     // Unbind from channel events 
     this.channel.unbind(); 

     // Unsubscribe from the Pusher channel 
     this.pusher.unsubscribe(this.channel); 

     // Unregister by assign them to an empty function 
     this.getProductsSuccess = function() {}; 

     }, 



     getProductsSuccess: function(response) { 
      alert("in success") 

     this.setState({ 
      products: response 
     }); 
     }, 


     render: function() { 
     return (
      <div className="container"> 
      <Header products={this.state.products} /> 

      </div> 
     ); 
     } 
    }); 

    ReactDOM.render(<App />, document.getElementById("app"));