Communication from the client to the server should eb done through AJAX. Nowadays, you can use window.fetch() (polyfilled), but we advice to make use of your App.io features. Because these automaticly get aborted when needed.

Client side

Example /views/myform.jsx

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

class MyForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            name: '',
            email: ''
        };
        this.changeName = this.changeName.bind(this);
        this.changeEmail = this.changeEmail.bind(this);
        this.sendForm = this.sendForm.bind(this);
    }
    componentDidMount() {
        this.app = appModule.getApp();
        var node = document.getElementById('form-name');
        node && node.focus();
    }

    changeName: function(e) {
        this.setState({name: e.target.value});
    },

    changeEmail: function(e) {
        this.setState({email: e.target.value});
    },

    sendForm: function() {
        var payload = {
            naam: this.state.name,
            email: this.state.email
        };
        this.app.io
            .send('/send-myform', payload)
            .then(function(response) {
                if (response==='OK') {
                    //...
                }
            })
            .catch(err => {
                console.warn(err);
            });
    },

    render() {
        return (
            <div>
                <div>
                    <label>Name:</label><input id="form-name" type="text" value={this.state.name} onChange={this.changeName} />
                </div>
                <div>
                    <label>Email:</label><input type="text" value={this.state.email} onChange={this.changeEmail} />
                </div>
                <div>
                    <button onClick={this.sendForm}>Send</button>
                </div>

            </div>
        );
    }
}

module.exports = MyForm;

Serverside

On the serverside, we first need to specify the right routes:

Example /routes.js

'use strict';

var routes = [
    {
        method: 'PUT',
        path: '/send-myform',
        handler: function (request, reply) {
            reply.action('process-myform');
        }
    },
    {
        method: 'GET',
        path: '/myform',
        handler: function (request, reply) {
            reply.reactview('myform');
        }
    }
];

module.exports = routes;

Last, we need to specify the action-file:

Example /actions/process-myform.js

const r = require('rethinkdb'),
    databaseName = 'myDb';

const actionFn = (request, reply, options, language, manifest) => {
    const payload = request.payload,
        name = payload.name,
        email = payload.email;
    let connection, status, message;

    try {
        connection = await r.connect(databaseConfig);
        records = await r.table('users').insert({
            name,
            email
        }).run(connection);
        status = 'OK';
    }
    catch (err) {
        console.warn(err);
        status = 'ERROR';
        message: err.message;
        records = [];
    }
    if (connection) {
        connection.close();
    }

    return {
        status,
        message
    };
};

module.exports = actionFn;

This actionfile will insert the new data into a rethinkDB database and return ‘OK’ if all succeeds.