The next thing we're going to create is our first React component and then try to render it both client side and server side. Let's create components/App.js with the following content:

import React, { Component } from 'react'; 
import moment from 'moment'; 
 
class App extends Component { 
  constructor(props) { 
    super(props); 
    this.state = { time: null }; 
  } 
  componentDidMount() { 
    this.tick(); 
    this.interval = setInterval(this.tick.bind(this), 200); 
  } 
  componentWillUnmount() { 
    clearInterval(this.interval); 
  } 
  tick() { 
    this.setState({ time: new Date() }); 
  } 
  render() { 
    const time = this.state.time; 
    const timeString = time && moment(time).format('h:mm:ss a'); 
    return ( 
<div> 
<h1>Sample Application</h1> 
<p>Current time is {timeString}</p> 
</div>
    );
  }
}

export default App;

Since this component is using state, we extend it from the React.Component base class and set the initial state inside the constructor() method. Also we're using two of React's life cycle methods componentDidMount() and componentWillUnmount() to start the timer when the component is mounted to the browser's DOM and clear the timer before the component is unmounted. Inside the render() method, we're using the Moment.js library to format the date object to a user-friendly time string.

Note that we set the initial time state variable to null and not new Date(). This is required in order to make the first call to the render() method (during the initial rendering) return the exact same output, in-memory representation of the UI tree. When you render this component on the client side, in a browser, React will first check if the checksum of that UI tree matches what has been rendered on the server. If so, instead of generating an HTML page from scratch, it will pick up existing HTML from the DOM and just bind necessary DOM event handlers to it, effectively mounting the top-level React component (app in our case) into the DOM.

It's worth mentioning that in the current version of React, you cannot return multiple components from the render() method. For example, the following code will fail with the error Adjacent JS elements must be wrapped in an enclosing tag:

render() {
  return (
    <h1>Sample Application</h1>
    <p>Current time is {new Date().toString()}</p>
  );
}

In most cases, this is not a big deal. If you like, you can subscribe to issue #2127 in the React repository on GitHub to track the status of this problem.