title: _React Js one page application
body: <p>I am looking to create a one page application with ReactJS. </p>
  
  <p>Is it advisable to combine it with angular or it is suitable just on its own? I would like to populate the one page site with sections - adding various features like carousels, sliders, isotope filters ...</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;React Js one page&lt;/title&gt;
  
      &lt;script src="https://fb.me/react-with-addons-0.14.7.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://fb.me/react-dom-0.14.7.min.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;section&gt;
       One
  
         &lt;script&gt;
          var HelloMessage = React.createClass({
            render: function() {
              return &lt;div&gt;Hello {this.props.name}&lt;/div&gt;;
            }
          });
  
          ReactDOM.render(&lt;HelloMessage name="Colonel Mustard" /&gt;, mountNode);
        &lt;/script&gt;
  
      &lt;/section&gt;
  
      &lt;section&gt;
        Two
  
  
        &lt;script&gt;
  
          var CommentBox = React.createClass({
            render: function() {
              return (
                &lt;div className="commentBox"&gt;
                  Hello, world! I am a CommentBox.
                &lt;/div&gt;
              );
            }
          });
          ReactDOM.render(&lt;CommentBox /&gt;, mountNode);
        &lt;/script&gt;
  
  
      &lt;/section&gt;
  
      &lt;section&gt;
        Three
  
        &lt;script&gt;
        "use strict";
  
        var MarkdownEditor = React.createClass({
          displayName: "MarkdownEditor",
  
          getInitialState: function getInitialState() {
            return { value: 'Type some *markdown* here!' };
          },
          handleChange: function handleChange() {
            this.setState({ value: this.refs.textarea.value });
          },
          rawMarkup: function rawMarkup() {
            return { __html: marked(this.state.value, { sanitize: true }) };
          },
          render: function render() {
            return React.createElement(
              "div",
              { className: "MarkdownEditor" },
              React.createElement(
                "h3",
                null,
                "Input"
              ),
              React.createElement("textarea", {
                onChange: this.handleChange,
                ref: "textarea",
                defaultValue: this.state.value }),
              React.createElement(
                "h3",
                null,
                "Output"
              ),
              React.createElement("div", {
                className: "content",
                dangerouslySetInnerHTML: this.rawMarkup()
              })
            );
          }
        });
  
        ReactDOM.render(React.createElement(MarkdownEditor, null), mountNode);
        &lt;/script&gt;
  
      &lt;/section&gt;
  
  
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>