Gebruik app-bestanden op de client

App files are javascript files that run on the client. itsa-react-server is very clever in the buildingprocess: it removes the app-code from serverside rendering. This means you can require() typical browser-modules in the apps, while stille being able to serverside render.

There is one master app-file that runs through the whole SPA-session. And there can be (but don’t have to be) sub-app files for every page (view). Both App-files need to export a Class, that will be automaticly instantiated. We strongly recommend to use the classes that are deliverd through the itsa-apps-module that comes with the installation, but you are not obligated. These Classes make use of ITSA-classes: these have destructor that destroys all the way through the inherited class. Also, they automaticly support Events and io.

Master src/app.js file

The file src/app.js is meant as the general application-file. It is active on every page (only 1 instance). It is up to the developer whether additional setup is needed.

Minimal /app.js

const MainAppRouterClass = require('itsa-react-server/lib/ClientApp');

let appInstance;
let MainApp = MainAppRouterClass.subClass(function() {
    // inititiate anything here
},
{
    destroy: function() {
        // destroy anything here
    }
});

const getApp = () => {
    if (!appInstance) {
        appInstance = new MainApp();
    }
    return appInstance;
};

module.exports = {
    getApp
};

The CLI itsa-cli will create this file for every new application.

Access the App inside a view

All web apps run with an instance of src/app.js. When building the views, you can access the app. Be careful to initiate the app inside componentDidMount --> only at that time you can initiate getApp():

view

const React = require('react'),
    appModule = require('app'),

class MyView extends React.Component {

    componentDidMount() {
        this.app = appModule.getApp();
    }

    handleClick() {
        this.app.someCustomRoutine();
    }

    render() {
        return (
            <div>
                <button onClick={this.handleClick.bind(this)}>trigger someting on the main app</button>
            </div>
        );
    }
}

module.exports = MyView;