Facebook React.js :: Pass data for Client Side rendering

Question

I am trying to create my first web application using React.js.

I wish to have React perform client side rendering, however the pages rendered are controlled by data held on a server hosted database.

How should i pass this data to React?

Do i have to pre populate each html page on the server side with a json representation of my data?

Or can React access my database from the client side directly (or using a RESTful API call)?

UPDATE: 001

All the examples i can find have REACT.js installed on node.js. Can i use REACT.js on Apache Tomcat™, IBM Websphere Liberty Profile, Jetty?

Answer 1

The two approaches you mentioned could both work, this blog post gives an example of server-side rendering and embedding props in the rendered HTML.

EDIT:

In response to your edit, I'd say that React is a Javascript framework, and it naturally should be deployed on a javascript server such as Node. If you'd rather not use Node, you can for sure write client-only scripts that uses AJAX to request data from the API server. Here is a great example from Facebook.

A snippet of it:

componentDidMount: function() {
  $.get(this.props.source, function(result) {
    var lastGist = result[0];
    if (this.isMounted()) {
      this.setState({
        username: lastGist.owner.login,
        lastGistUrl: lastGist.html_url
      });
    }
  }.bind(this));
}

Above code populates the state object with data from the server once the component is mounted.