Hello Server

This tutorial will show how to write a ''Hello Server'' application using ''React'' and ''Vaandroid''

Why

Writing the application in React allows:

Client-Side Benefits

  • Use a well-known language
  • Fast clients-side performance
  • Easy client-side testing
  • Easy CSS styling

Server Side Benefits

  • Leverage the Vaandroid API (security, storage, preferences, etc)
  • Push data from the server
  • Realtime connectivity with other devices

    Specifications

  • The user will be presented with a caption, text box, and button.
  • Pressing the button will send the text box contents to the server.
  • The server will respond to the message by updating the caption.

Steps

Create the React template.

This template pulls down the required libraries from CDN, and renders a component in a target div. Our source code is written in JSX and is rendered on-the-fly in the client browser.

<!DOCTYPE html>
&lt;html lang="en">

&lt;/html>

Implement the form

    class Form extends React.Component {
        constructor() {
            super();
            this.state = {
                name: ''
            };
        }

        render() {
            return <div>Please enter your name and press <em>Submit</em>.<br />
                <input placeholder="Enter your name here" on<x>change={e=>this.handleName(e)}
                       value={this.state.name}/>
                <button on<x>click={e=>this.handleSubmit()}>Submit</button>
            </div>
        }

        handleName(e) {
            this.setState({name: e.target.value});
        }

        handleSubmit() {
            al<x>ert('Hello ' + this.state.name);
        }
    }

Implement the client-server interface.

Send the code to the server by calling vaandroid.send(...)

handleSubmit() {
            vaandroid.send('Hello ' + this.state.name);
        }

Subscribe to the server's response by overriding vaandroid.receive(...)

constructor() {
            super();
            this.state = {
                name: '',
                caption: ''
            };
            vaandroid.receive = function (message) {
                this.setState({caption: message});
            }.bind(this);
        }

Wrap the template in a Vaandroid plugin

Install the plugin