Using React in a small subset of an ASP 4 MVC 5 application

Question

I have a very large ASP application that uses reflection to load external modules as Areas.

I am developing one Area right now that is a prime candidate for something like React. Since this Area shares a Layout as the rest of the project, I don't want to simply include React as a core feature of the product itself, and would like to keep it isolated to just this module/area.

How would I support something like React, where the rest of our project isn't on ES6, and I'd want to keep it isolated to just this one module?

Answer 1

You will need to configure pusher to bind your events with your front end. Here are some things you will need to do to configure pusher"-

• sign up to pusher and you will get your credentials

I have initialized pusher class in my controller class

@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;
    }

Here is my html page which is acting as view. Import required cdn and you can also use webpack if you do not want to use 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 will be the entry point and in this class pusher will listen to the events and bind them with the controller

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"));