Static single page app with routing I'm currently trying to write an app with Cordova and ReactJS. I haven't used ReactJS before, so I'm very confused by the mixed usage of Babel, JavaScript and JSX. I try to use JSX where I can because I like it, but I dislike Babel, which is used in many tutorials as well. I haven't quite understood what Babel is used for at all.

const { Router,
        Route,
        IndexRoute,
        Redirect,
        Link,
        IndexLink
      } = ReactRouter

var Header = React.createClass({
    render: function () {
        return (
            &lt;h1 className="title"&gt;{this.props.text}&lt;/h1&gt;
        );
    }
});

var Content = React.createClass({
    render: function() {
      return (
        &lt;h1 className="title"&gt;{this.props.text}&lt;/h1&gt;
      );
    }
});

var Page = React.createClass({
  getInitialState: function(){
    return {
      'title': 'Main Page' + (this.props.title ? ' - ' + this.props.title : '')
    }
  },
  render: function() {
    return (
      &lt;div&gt;
        &lt;Header text={this.state.title} /&gt;
        &lt;Content text={this.props.text} /&gt;
      &lt;/div&gt;
    );
  }
});

var Home = React.createClass({
  getInitialState: function(){
    return {
      'title': 'Home',
      'text': &lt;Link to="/about"&gt;About&lt;/Link&gt;
    }
  },
  render: function(){
    return (
      &lt;Page title={this.state.title} text={this.state.text} /&gt;
    );
  }
});

var About = React.createClass({
  getInitialState: function(){
    return {
      'title': 'About',
      'text': 'Lalal'
    }
  },
  render: function(){
    return (
      &lt;Page title={this.state.title} text={this.state.text} /&gt;
    );
  }
});

React.render((
    &lt;Router&gt;
      &lt;Route path="/" component={Home} /&gt;
      &lt;Route path="/about" component={About} /&gt;
    &lt;/Router&gt;
  ),
  document.getElementById('app')
);


I'm wondering if there's a better way to do this or if I'm doing everything correctly. I did my best with the classes (thinking in React stuff) and wanted to make Header a Navigation later on. Is there a good way to separate the routes, and put my views into files and components where needed?
I haven't quite understood what Babel is used for at all.


Babel is used for transpilation - the process of converting unsupported/future syntax into one that is supported at the moment. For instance, your destructuring assignment:

const { Router,
        Route,
        IndexRoute,
        Redirect,
        Link,
        IndexLink
      } = ReactRouter


This syntax is not supported by all browsers. Babel makes it possible by transpiling it into something supported by all browsers:

"use strict";

var _ReactRouter = ReactRouter;
var Router = _ReactRouter.Router;
var Route = _ReactRouter.Route;
var IndexRoute = _ReactRouter.IndexRoute;
var Redirect = _ReactRouter.Redirect;
var Link = _ReactRouter.Link;
var IndexLink = _ReactRouter.IndexLink;


In the same way, JSX is not natively supported by any browser. It just so happens that Babel also supports transpiling of JSX, making it the de facto tool to convert JSX to something the browser understands. This:

var Header = React.createClass({
    render: function () {
        return (
            &lt;h1 className="title"&gt;{this.props.text}&lt;/h1&gt;
        );
    }
});


becomes this:

"use strict";

var Header = React.createClass({
    displayName: "Header",

    render: function render() {
        return React.createElement(
            "h1",
            { className: "title" },
            this.props.text
        );
    }
});


JSX is an optional component of React. You can write it like the transpiled version. However, it somehow just feels better to construct the DOM with markup-like syntax than with a bunch of function calls and objects.

As for your code...

'title': 'Main Page' + (this.props.title ? ' - ' + this.props.title : '')


Since you have Babel (and even without Babel), you can construct strings with template strings. The above code would be as easy as:

'title': `Main Page ${title}`


And while it is possible to put logic in the point of interpolation, I suggest moving it out for readability.

Now everything looks fine in your code except when the About and Home start to use Page. The problem with this is that when Home and About sufficiently diverge in structure, Page will hinder you from easily rewriting either. For instance, what if About needed Sidebar just beside the content body. Where will you put Sidebar? You can't put it in Page otherwise, it will appear on all components using Page. You can't also put it on About just like that because it will sit at the side of the entire page content, not beside the content.

When building componentized UIs, it's best to think of the entire thing as a bunch of very small things. Think "Home has a header, content, footer, sidebar. About has a header, content, footer, and no sidebar" and not "Home and About are pages, therefore I make a Page component". The advantage of the former is if I needed a sidebar for About, I can just pop it in there. If I want to remove the header from Home, I can just take it out.