content: import React from 'react';
  import ReactDOM from 'react-dom';
  
  import JqxDocking from '../../../jqwidgets-react/react_jqxdocking.js';
  
  class App extends React.Component {
      componentDidMount() {
          this.refs.myDocking.showAllCollapseButtons();
          this.refs.myDocking.focus();
      }
      render() {
          return (
              <div>
                  <JqxDocking ref='myDocking'
                      width={650} orientation={'horizontal'} mode={'default'} keyboardNavigation={true}
                  >
                      <div>
                          <div id="window0" style={{ height: 150 }}>
                              <div>CISC</div>
                              <div>
                                  Before the RISC philosophy became prominent, many computer architects tried to bridge
                                  the so called semantic gap, i.e. to design instruction sets that directly supported
                                  high-level programming constructs such as procedure calls, loop control, and complex...
                              </div>
                          </div>
                          <div id="window1" style={{ height: 150 }}>
                              <div>Database management system</div>
                              <div>
                                  A database management system (DBMS) is a software package with computer programs
                                  that control the creation, maintenance, and the use of a database. It allows organizations
                                  to conveniently develop databases...
                              </div>
                          </div>
                      </div>
                      <div>
                          <div id="window2" style={{ height: 150 }}>
                              <div>RISC</div>
                              <div>
                                  Some aspects attributed to the first RISC-labeled designs around 1975 include the
                                  observations that the memory-restricted compilers of the time were often unable
                                  to take advantage...
                              </div>
                          </div>
                      </div>
                  </JqxDocking>
                  <ul>
                      <li><b>Tab</b> - Once the focus is received, users will be able to use the keyboard to change the focused Docking Panel.</li>
                      <li><b>Shift+Tab</b> - reverses the direction of the tab order. Once in the widget, a Shift+Tab will take the user to the previous Docking Panel.</li>
                      <li><b>Esc</b> - closes the focused Docking Panel.</li>
                      <li><b>Enter</b> - collapses/expands the focused Docking Panel.</li>
                  </ul>
              </div>
          )
      }
  }
  
  ReactDOM.render(<App />, document.getElementById('app'));
  