Sample React App using Coveo UI

App.js

import React, { Component } from 'react';
import './App.css';
import { SearchUI } from './SearchUIWrapper';

class App extends Component {

  getTemplateContent() {
    return `
       <div class="coveo-result-frame">
           <div class='coveo-result-row'>
             <a class='CoveoResultLink'></a>
           </div>
           <div class='coveo-result-row'>
             <div class='CoveoExcerpt'></div>
           </div>
       </div>
      `
  }

  render() {
    return (
      <div>

        <SearchUI>
          <div className="CoveoSearchbox"></div>
          <div className="CoveoFacet" data-field="@objecttype"></div>
          <div className="CoveoResultList" data-layout="list" data-wait-animation="fade" data-auto-select-fields-to-include="true" ref="resultList">
            <script className='result-template' type='text/underscore' dangerouslySetInnerHTML={{ __html: this.getTemplateContent() }}></script>
          </div>
        </SearchUI>
      </div>
    );
  }
}

export default App;

SearchUIWrapper.js

import React, { Component } from 'react';
import * as Coveo from 'coveo-search-ui';
import 'coveo-search-ui/bin/css/CoveoFullSearch.css';

export class SearchUI extends Component {
  
  componentDidMount() {
    Coveo.SearchEndpoint.configureSampleEndpointV2();
    Coveo.init(this.refs.searchInterface);
  }
  
  render() {
    return (
      <div id="search" className='CoveoSearchInterface' data-enable-history="true" ref='searchInterface'>
        {this.props.children}
      </div>
    );
  }
}