Build Applications with Meteor: Isomorphic JavaScript web development

What is a state in React's components?

Components can be declared as pure JavaScript functions, and they are called Stateless, such as this one:

function Greeting({ hello }) {
      return <div>{hello}</div>;
}

Alternatively, you can write the preceding code as an ES6 arrow function:

const Greeting = ({ hello }) => (
    <div>{hello}</div>
)

Every component can hold internal encapsulated data, and we call this a state of the component. If you want to add a state to a stateless component, you should define it as an ES6 class.

Before adding an ES6 constructor and super methods to the stateless components, we can overview what an ES6 constructor is and what the super method does in ES6 classes.

In ES6, we can create a class, such as the following:

class Component {
constructor(props){
   this.props = props;
  }
}

The names of the parameters and methods are named as React's once. This is not from the React library source.

We can add a method called render, as mentioned in the following code:

class Component {
   constructor(props){
   this.props = props;
},

render() {
   return this.props;
  }
}

In an ES6 classical way, we can extend the base/parent class Component:

class Greeting extends Component{
constructor(name){
    super(name) // passing the value to the parent class which gets
    assigned to the props
    console.log(super.render()) // with the super method we can call the  functions from the parent class      
    console.log(this.render()) // or directly as this.render
}
}

In a classical way, we can create a new instance of the Greeting class, like this:

let greet = new Greeting('Joe');
console.log(greet.render()) // have an access to the parent method render

We can create a render() method with the same name in the child class:

class Greeting extends Component{
     constructor(name){
     super(name)
     this.name = name;
     console.log(super.render())
}
 render() {
   return 'Hi ' + this.name;
  }
}
let greet = new Greeting('Harry');
console.log(greet.render()) // child overrides the parent

There are two ways to add and remove atmosphere packages in Meteor: directly add it in .meteor/packages or use the meteor add or meteor removecommands.

We will remove blaze and jquery for this example:

>> meteor remove blaze-html-templates

This will result in the following terminal:

blaze-html-templates removed from your project
caching-compiler removed from your project
caching-html-compiler removed from your project
templating removed from your project
templating-compiler removed from your project
templating-runtime removed from your project
templating-tools removed from your project

Now if you run your app, you will note that nothing is loaded. You'll need to install the html-static package to let Meteor load a static HTML file.

You can install it with the following command:

>> meteor add static-html

It will add all the needed dependencies:

caching-compiler added, version 1.1.8
caching-html-compiler added, version 1.0.7
static-html added, version 1.1.13
templating-tools added, version 1.0.5
Remove Jquery by deleting it in the package file (.meteor/packages)
jquery@1.11.10 # Helpful client-side library

You can add and remove packages even if the server is running. Meteor will restart it automatically when a package is removed or added.

The next step is directories and files:

Install react and react-dom with npm:

        >> npm install react --save
        >> npm install react-dom --save

In the Timer.js file, let's define our component:

import React from 'react';
import ReactDOM from 'react-dom';
class Timer extends React.Component {
  constructor(props) {
  super(props);
}
render() {
  return (<div>
         <p>Timer</p>
         </div> )
  }
}
export default Timer;

It is a class component that will display the time pushed in real time from the server. The only difference between preceding examples and this one, is that we exported that component to use it in other components.

Now, let's import and render it in the index.js file:

import React from 'react';
import {render} from 'react-dom';
import Timer from './components/Timer'
render(<Timer/>, document.getElementById('root'))

First, let's create the functionality of the app on the client; then we can start pushing the data from the server.

Initialize the state in the constructor and set a new state every second:

constructor(props) {
   super(props);
this.state = {time: 0};
} 
  componentDidMount() {
setInterval(() => this.setState({time: new Date().toLocaleString()}), 1000);
}

Also, we have the following code in the render() method:

render() {
    return (<div>Time : 
{this.state.time}</div>)
   }

When the component mounts, we set a new state every second. This will force the component to re-render and display the latest state.

To exercise the idea of the state and the props, we can now create a child component that the Timer component will render and pass its state as prop.

Create a child component in the components folder, called TimerDisplay:

class TimerDisplay 
extends React.Component {
    constructor(props) {
     super(props);
  }
 render() {
    return 
    (
       <div>Time : {this.props.time}</div>
    )
   }
}
export default TimerDisplay;

The TimerDisplay will receive and render the data through the props.time. It can be a stateless presentational component, and it can be defined as a function instead of a class:

import TimerDisplay from './TimerDisplay';
class Timer extends React.Component {
   constructor() {
   super();
this.state = {time: new Date().toLocaleString()};
}
   componentDidMount() {
setInterval(() => this.setState({time: new Date().toLocaleString()}), 1000);
 }
 render() 
{
   return (
   <div>
   <TimerDisplay time={this.state.time}/>
</div>)
  }
}
export default Timer;

Here, the parent component, Timer, re-renders every time its state changes, and then renders the child component, TimerDisplay, by passing its state as props.

What will happen if we add another TimerDisplay, but this time with a static value:

render() 
{
  return (
    <div>
     <TimerDisplay time={this.state.time}/>
     <TimerDisplay time='today'/>
  </div>)
}

To see the power of React in action, open the console in Chrome and press the Esc key then go to Rendering and click on the checkbox Paint Flashing. You will note that even if we rendered both TimerDisplay, only the one that has its value changed is re-rendering.

In the preceding example, the data passed to the child component via props was generated in the parent component itself in the setInterval function. In order to render React components on Meteor's data change, we need to create a component container.

The steps are as follows:

        >> npm install react-meteor-data --save
        >> npm install react-addons-pure-render-mixin --save

        import React from 'react';
        import TimerDisplay from './TimerDisplay';
        import { createContainer } from 'react-meteor-data';

        export default createContainer(() => {
        return {
           time: Time.find().fetch()
          };
        }, 
       Timer);

The first parameter is a callback function that returns the result as an object named time, and the second parameter is the Timer component. The way it works is that on any changes in the browser database Minimongo, the data will be fetched and passed to the component as props (time in our case).

To break this down, refer to this:

Meteor allows us to create a collection directly in the code:

Time = new Mongo.Collection('time');

You can access all the application data with the Meteor MongoDB shell.

Open another terminal, cd to the app directory, and start the MongoDB shell.

>> meteor mongo

Show all the databases in MongoDB:

>> show dbs

The default database for the app is named meteor; switch to the meteor database:

>> use meteor

Display all collections in the database:

>>show collections

The show collections command will not return any results.

The reason is that we created a collection on the client side only. This collection exists in Minimongo, and it is in the browser's memory. If we refresh the page, the collection and the data will be gone.

In order to create the same collection and persist data into MongoDB, we have to execute the exact same Time = new Mongo.Collection('time'); on the server. As soon as we do that, both the collections will be in sync and the data will be persisted into the database.

For now, we don't want to save the timer data on the server; we only want to take advantage of the Meteor server to client real-time communication.

The way we can get real-time updates from the server is through the Publishing and Subscribing messaging pattern of Meteor.

The server publishes an event and on the other side, the client subscribes to that event and listens to data changes.

On the server, in our case in the server/main.js file, we can publish an event in a very simple way:

  import { Meteor } from 'meteor/meteor';
  Meteor.startup(() => {
     // code to run on server at startup
 Meteor.publish('time', function() {
     ...
    });
});

The publish function takes two arguments: name of the collection and a callback function that will be executed on each subscription from the client.

On the client, we can subscribe to it as shown here:

Meteor.subscribe('time');

All updates from the server will push an update to Minimongo collection on the client. The subscriber can also pass a parameter as a second argument and/or have subscription handlers as callback functions:

Meteor.subscribe('time', id);

Also, the subscription handlers look like this:

Meteor.subscribe('time', {

 //called when data is availble in  Minimongo
   onReady: function() {
   },
    // called on error
   onError: function() {
   },
   // called when the subcription is stopped. 
    onStop: function () {
   }
});

Here's the server-side code of the subscription:

import { Meteor } from 'meteor/meteor';
import { Random } from 'meteor/random';

Meteor.startup(() => {
// code to run on server 

at startup
Meteor.publish('time', function() {
   let self = this;
   const newTime = () => {
   let 

id = Random.id();
   let time = {
    time: new Date().toString()
 }
   self.added

('time', id, time);
}
Meteor.setInterval(function() {
    newTime();
  }, 1000);
});

What we did is covered in the following points:

The client-side code is as follows:

Time = new Mongo.Collection('time');
class Timer extends React.Component {
     constructor(props) 

{
     super(props);
    Meteor.subscribe('time');
}
render() {
   return 

 <TimerDisplay time={this.props.time}/>;
  }
}
export default createContainer(() => {
 return 

{
    time: Time.find().fetch()
  };
}, Timer);

This is what we did here:

Meteor.publish('time', function() {
   let self = this;
   self.added('time', id, time); // notify if record is added to the collection time
  let interval = Meteor.setInterval(function() {
      newTime();
  }, 1000);
 this.ready(); // 

notify that the initial dataset was sent
   self.onStop(function () {
   self.stop()
   console.log('stopped called')
   Meteor.clearInterval(interval); // clear the interval if the the client unsubscribed
  });
});

const handle = Meteor.subscribe("time", {
   onReady: function() { 
// fires when this.ready() called on the server.
  }
});
 handle.stop() // will call onStop(callback) on the server.
 handle.ready() // returns true if the server called ready()

Time = new Mongo.Collection('time');
const handle = Meteor.subscribe('time');
class Timer extends React.Component {
    constructor(props) {
    super(props);
 }
 shouldComponentUpdate() {
    return this.props.handle.ready() && this.props.time.length > 0;
 }
 componentWillUnmount() {
   this.props.handle.stop();
 }
 render() {
    return <TimerDisplay time = { this.props.time }/>;
 }
}
export default createContainer(() => {
  return {
    time: Time.find().fetch(), handle: handle
  };
}, Timer);