Best use of the React frontend framework

Question

I've been using rails' erb template for my views, but I've recently been trying to incorporate React as my front end framework. I'm a little lost on how front end frameworks are supposed to be used.

e.g. Using React to render a static button

var AddProspects = React.createClass({  
  displayName : 'AddProspects',
  render: function() {
    return (
        <button type="button" className="btn btn-info pull-right btn-block" data-toggle="modal" data-target="#uploadModal">
            <i className="fa fa-plus"></i> Upload Prospects
        </button>
    );
  }
});

React.render(<AddProspects />, document.getElementById("#add-prospects"));

e.g. Using normal html

<button type="button" class="btn btn-info pull-right btn-block" data-toggle="modal" data-target="#uploadModal">
  <i className="fa fa-plus"></i> Upload Prospects
</button>

Using React in this example seems to be a overkill.

Should I be using React for the whole view? Should React be rendering everything from static html to dynamic data from the server side? Or is it better to use it just for elements that interact with the server and leave static stuff to plain html?

Answer 1

React is focused on using plain html.

That is why you can just type HTML tags inside your react code. The idea is to keep it simple.

Simple answer is: Yes, you should write a lot of plain HTML. When you need to program some piece to use it inside React, then define it on ReactJS. I believe a greate rule of thumb is: When in doubt, think what will be messier (Harder to maintain the code later), and do things the other way. :D