---
title: 'Hello Server'
url: 'https://www.twelvetone.tv/docs/operating-systems/vaandroid/vaandroid-developer-guide/tutorials/hello-server'
markdown: 'https://www.twelvetone.tv/docs/operating-systems/vaandroid/vaandroid-developer-guide/tutorials/hello-server.md'
date: '2026-09-25'
description: "This tutorial will show how to write a ''Hello Server'' application using ''React'' and ''Vaandroid'' Why Wr"
taxonomy:
  category:
    - docs
  devtype:
    - private
---

[](#)  [ Home ](https://www.twelvetone.tv/docs/)     [ Operating Systems ](https://www.twelvetone.tv/docs/operating-systems)     [ Vaandroid ](https://www.twelvetone.tv/docs/operating-systems/vaandroid)     [ Vaandroid Developer Guide ](https://www.twelvetone.tv/docs/operating-systems/vaandroid/vaandroid-developer-guide)     [ Tutorials ](https://www.twelvetone.tv/docs/operating-systems/vaandroid/vaandroid-developer-guide/tutorials)      Hello Server    

# 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.

```

&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

 [ ](https://www.twelvetone.tv/docs/operating-systems/vaandroid/vaandroid-developer-guide/tutorials/building-an-application-with-android-studio) [](https://www.twelvetone.tv/docs/operating-systems/vaandroid/vaandroid-developer-guide/tutorials/converting-an-activity-into-a-fragment)

---

## Navigation

- Parent: [Tutorials](https://www.twelvetone.tv/docs/operating-systems/vaandroid/vaandroid-developer-guide/tutorials.md)
- Previous: [Building An Application With Android Studio](https://www.twelvetone.tv/docs/operating-systems/vaandroid/vaandroid-developer-guide/tutorials/building-an-application-with-android-studio.md)
- Next: [Converting An Activity Into A Fragment](https://www.twelvetone.tv/docs/operating-systems/vaandroid/vaandroid-developer-guide/tutorials/converting-an-activity-into-a-fragment.md)