There are two approaches for rendering top-level ReactJS components:

1. A single top-level component with a routing logic in it

var App = React.createClass({

render() {

if (this.props.target === 'PageA') {

return <PageA />;

} else if (this.props.target === 'PageB') {

return <PageB />;

} else {

return <PageNotFound />;

}

}

}); React.renderComponent(<App target="PageA" />, document.body);

This component is rendered only once and then replaces its inner content while user navigates through the site.

Example: instagram.com, react-router

2. A separate top-level component for each page or section of a website

In this case the router renders a new page to document.body each time user goes from one page to another

React.renderComponent(<PageA />, document.body);

Example: facebook.com, khanacademy.org, react-starter-kit

They both perform equally well, because the same diff operation is performed in both cases. I personally lean towards the second approach, because it looks simpler to me and allows to do server-side rendering more easily. And what is your preference in regard to this topic?