How to use react-bootstrap in reach?

  node.js, question
import {Button} from 'react-bootstrap';
 import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table';
 import React from 'react';
 import {render} from 'react-dom';
 import TableList from './table.js';
 
 
 class MianBan extends React.Component{
 //title
 constructor(...args){
 super(...args);
 this.state = {
 open: true
 };
 bracket
 
 render() {
 return (
 <div>
 <Button onClick={ ()=> this.setState({opten: !  this.state.opten}) }>
 click
 </Button>
 <panel collapsible expanded={this.state.open}>
 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
 Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
 </panel>
 </div>
 );
 bracket
 bracket
 
 module.exports = MianBan;
/**
 * Created by wf on 2016/3/29.
 */
 import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table';
 import React from 'react';
 import {render} from 'react-dom';
 
 class TableList extends React.Component{
 
 constructor(props){
 super(props);
 bracket
 
 render() {
 var selectRowProp = {
 mode: 'checkbox',
 clickToSelect: turn
 };
 
 var products = [
 bracket
 id: 1,
 Title: "Why can pigs eat so much?",
 author: "kevin",
 createTime: "2016-03-25",
 clicks: 88,
 reads: 120
 },{
 id: 2,
 Title: "Why can pigs eat so much?",
 author: "kevin",
 createTime: "2016-03-25",
 clicks: 88,
 reads: 80
 },{
 id: 3,
 Title: "Why can pigs eat so much?",
 author: "kevin",
 createTime: "2016-03-25",
 clicks: 88,
 reads: 207
 },{
 id: 4,
 Title: "Why can pigs eat so much?",
 author: "kevin",
 createTime: "2016-03-25",
 clicks: 88,
 reads: 100
 },{
 id: 5,
 Title: "Why can pigs eat so much?",
 author: "kevin",
 createTime: "2016-03-25",
 clicks: 88,
 reads: 150
 },{
 id: 6,
 Title: "Why can pigs eat so much?",
 author: "kevin",
 createTime: "2016-03-25",
 clicks: 88,
 reads: 160
 bracket
 ];
 
 return (
 <BootstraTable data={products} insertRow={true} deleteRow={true} selectRow={true}>
 < tableheadercolumn datafield =' id' iskey = {true} > operation < /TableHeaderColumn >
 < tableheader columndatafield =' title' iskey = {true} > article title < /TableHeaderColumn >
 < tableheader columndatafield =' author' iskey = {true} > author < /TableHeaderColumn >
 < tableheadercolumn datafield =' createtime' iskey = {true} > creation time < /TableHeaderColumn >
 < tableheadercolumn datafield =' clicks' iskey = {true} > number of clicks < /TableHeaderColumn >
 < tableheadercolumn datafield =' reads' iskey = {true} > reads < /TableHeaderColumn >
 </BootstraTable>
 );
 bracket
 bracket
 
 module.exports = TableList;

This is the entry file below. The id=’table’ pointing to the page will not be displayed after I compile it. What is the reason?

import React from 'react';
 import {render} from 'react-dom';
 import Panel from '../news/news_table/panel.js';
 
 
 
 render(
 <MianBan />,
 document.getElementById('table')
 );

You don’t.import MianBan from '..'Is it really good to use this class directly without introducing it?