Getting started with React React

Getting started with deepstreamHub is easy and takes less than ten minutes. However, if you have any questions, please get in touch.

This is a React guide that will take you through deepstreamHub's three core concepts: Records, Events and RPCs.

create-react-app will assist you to scaffold a new React app easily, and we'll use the JavaScript client SDK to interact with deepstreamHub.

Create a React App

Install create-react-app globally, and use the tool to scaffold a new app:

# Install create-react-app
npm install -g create-react-app
# Scaffold new app
create-react-app ds-react

Connect to deepstream and log in

Install the JS library to the ds-react app you just created:

# With yarn
yarn add deepstream.io-client-js
# With npm
npm install deepstream.io-client-js --save

Get your app url from the dashboard, establish a connection to deepstreamHub, and login (we'll not configure any authentication, because there are no credentials required):

// ./src/App.js
import createDeepstream from 'deepstream.io-client-js';
import React, { Component } from 'react';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {};
    // Connect to deepstream
    this.ds = createDeepstream('<YOUR APP URL>');
    // Login
    this.client = this.ds.login();
  }  
}

export default App;

Records (realtime datastore)

Creating a new record or retrieving an existent one works the same way:

var myRecord = ds.record.getRecord( 'test/johndoe' );

Values can be stored using the .set() method:

myRecord.set({
    firstname: 'John',
    lastname: 'Doe'
});

Let's set up two-way bindings with an input field - whenever a path within our record changes (e.g. firstname), we want to update the input. Whenever a user types, we want to update the record.

First, we setup the record and subscribe for changes in the constructor:

// ./src/Record/Record.js
// . . .
class Record extends Component {
    constructor(props) {
        super(props);
        this.state = {
            firstname: '',
            lastname: ''
        };

        // Receive record from parent component
        // <Record record={this.client.record}></Record>
        this.record = this.props.record;
        // Bind handleChange method to the right 'this'
        this.handleChange = this.handleChange.bind(this);

        this.record.subscribe(value => {
            // Update state on input change
            this.setState({firstname: value.firstname});
            this.setState({lastname: value.lastname});
        });
    }
}

then we create the render method for the template which includes the input fields:

// . . .
class Record extends Component {
    // . . .
    render() {
        return(
            <div className="group realtimedb">
                <h2>Realtime Datastore</h2>
                <div className="input-group half left">
                    <label>Firstname</label>
                    <input type="text" value={this.state.firstname} onChange={this.handleChange} id="firstname"/>
                </div>
                <div className="input-group half">
                    <label>Lastname</label>
                    <input type="text" value={this.state.lastname} onChange={this.handleChange} id="lastname"/>
                </div>
            </div>
        );
    }
}

and finally, we add the handleChange method to sync the input fields state:

class Record extends Component {
    // . . .
    handleChange(e) {
        // Handle change and update state
        // based on the values change.
        if(e.target.id === 'firstname') {
            // When 'firstname' changes
            this.setState({firstname: e.target.value});
            this.record.set('firstname', e.target.value);
        } else if(e.target.id === 'lastname') {
            // When 'lastname' changes
            this.setState({lastname: e.target.value});
            this.record.set('lastname', e.target.value);
        }
    }
 //. . .
}

Events (publish-subscribe)

Clients and backend processes can receive events using .subscribe():

constructor() {
    // Receive event object from parent container, App.
    // <Event event={this.client.event}></Event>
    this.event = this.props.event;
    this.event.subscribe('event-data', data => {
        // Handle event
        this.setState({eventsReceived: [...this.state.eventsReceived, data]})
        this.setState({value: ''});
    }.bind(this));
}

... and publish events using .emit():

handleClick(e) {
    this.event.emit('event-data', this.state.value);
}

RPCs (request-response)

You can make a request using .make():

handleClick(e) {
    // read the value from the input field
    // and convert it into a number
    var data = {
        a: parseFloat(this.state.a),
        b: parseFloat(this.state.b)
    };

    // Make a request for `multiply-number` with our data object
    // and wait for the response
    this.rpc.make('multiply-number', data, function( err, resp ){

        //display the response (or an error)
        this.setState({displayResponse: resp || err.toString()});
    }.bind(this));
}

and answer it using .provide():

constructor() {
    // Receive rpc object from parent container, App
    // <RPC rpc={this.client.rpc}></RPC>
    this.rpc = this.props.rpc;
    this.rpc.provide( 'multiply-numbers', ( data, response ) => {
        response.send( data.a * data.b );
    });
}

Where to go next?

To learn how to use deepstreamHub with any other frontend frameworks, head over to the tutorial section. To learn how to use the JavaScript SDK with NodeJS rather than in a browser, head over to the getting started with NodeJS tutorial.

Live Demo