How optimize HTML markup in react render

Question

How I can optimize my HTML markup? In this case (I use Sublime Text 2), I choose "set syntax JSX" for highlighting and emeet won't work at first. At second - more preferable for me, to keep markup in some .tmpl files. It is possible in this case? For example, my render method:

render: function() {
    var result = this.state.data;
    var self = this;

    var inputNodes = result.map && result.map(function(item, keyIndex) {
      return (
        <div className="row" key={keyIndex} className={'inputs-row ' + (item.disabled ? 'inputs-row_disabled':'')}>
          <div className="col-md-12">
            <div className="col-md-6 form-group">
              <div className="input-group">
                <div className="input-group-addon">
                  <i className="fa fa-info fa-fw"></i>
                </div>
                <input className="key-input form-control" type='text' value={item.name} onClick={self.onInputKeyClick.bind(self,item)} readOnly />
              </div>
            </div>
            {
              item.values.map(function(value, valIndex) {
                return (
                  <div className="col-md-6 form-group" key={valIndex}>
                    <div className="input-group">
                      <input className="key-input form-control" type='text' value={value.name} onChange={self.changeLocalizedValue.bind(self, value, valIndex, keyIndex)} />
                      <div className="input-group-addon input-group-addon_btn">
                        <button className="btn btn-default btn_right-radius" onClick={self.sendItem.bind(self, value)}>
                          <i className="fa fa-check fa-fw"></i>
                        </button>
                      </div>
                    </div>
                  </div>
                )
              })
            }
          </div>
        </div>
      );
    });
    return (
      <div>
        <div>{inputNodes}</div>
        <button onClick={self.sendAll}>SEND ALL</button>
      </div>
    )
  }

P.S. I use: gulp and browserify.

Answer 1

There are libraries that lets you extract React templates into their own files, but I think one of the strengths of React is that the markup is co-located with the view logic. If the markup is changed then the view logic often has to be changed, and vice versa. Keeping them in the same file makes that more convienient.

I would recommend you to create more components. Take this chunk of JSX for example:

<div className="col-md-6 form-group">
  <div className="input-group">
    <div className="input-group-addon">
      <i className="fa fa-info fa-fw"></i>
    </div>
    <input className="key-input form-control" type='text' value={item.name} onClick={self.onInputKeyClick.bind(self,item)} readOnly />
  </div>
</div>

Does very little, and it's not very readable what the purpose of that chunk is. If you instead extract that into another component and give it a meaningful name, your markup won't look as cluttered, and you get better readability.