React-Bootstrapグリッドの内容が表示されない

Question

反応ブートストラップJumbotronの内部にグリッドを作成しましたが、app.jsxにエクスポートするとグリッドの内容は表示されません（ただし、Jumbotronと私のカスタムスタイルはあります）

私の他のコンポーネントはすべて正常に動作しているので、なぜそうでないのか分かりません。

App.js：

import React, { Component } from 'react'; 
import {Grid} from 'react-bootstrap'; 
import {Row} from 'react-bootstrap'; 
import {Col} from 'react-bootstrap'; 
import MyNavbar from './modules/MyNavbar.jsx'; 
import SectionOne from './modules/SectionOne.jsx' 
import SectionTwo from './modules/SectionTwo.jsx' 
import SectionThree from './modules/SectionThree.jsx'; 

class App extends Component { 
    render() { 
     return (
      <div className="App"> 
       <MyNavbar/> 
       <SectionOne/> 
       <SectionTwo/> 
       <SectionThree/> 
      </div> 
     ); 
    } 
} 

export default App; 

SectionThree.jsx：

import React, { Component } from 'react'; 
import {Jumbotron} from 'react-bootstrap'; 
import howItWorks from './howItWorks.jsx'; 

class SectionThree extends Component { 
    render() { 
     return(
      <Jumbotron id="jumbotronThree"> 
       <howItWorks/> 
      </Jumbotron> 
     ) 
    } 
} 

export default SectionThree; 

howItWorks.jsx：

import React, { Component } from 'react'; 
import {Image} from 'react-bootstrap'; 
import {Grid} from 'react-bootstrap'; 
import {Col} from 'react-bootstrap'; 
import {Row} from 'react-bootstrap'; 

class howItWorks extends Component { 
    render() { 
     return(
      <div> 
       <Grid fluid> 
        <Row> 
         <Col md={4}> 
          <div className="searchIcon"> 
           <Image src="http://imgur.com/KgAIBCc.jpg" responsive/> 
          </div> 
         </Col> 
         <Col md={4}> 
          <div className="payIcon"> 
           <Image src="http://imgur.com/KgAIBCc.jpg" responsive/> 
          </div> 
         </Col> 
         <Col md={4}> 
          <div className="eatIcon"> 
           <Image src="http://imgur.com/KgAIBCc.jpg" responsive/> 
          </div> 
         </Col> 
        </Row> 
        <Row> 
         <Col md={4}> 
          <p> 
           test 
          </p> 
         </Col> 
         <Col md={4}> 
          <p> 
           test 
          </p> 
         </Col> 
         <Col md={4}> 
          <p> 
           test 
          </p> 
         </Col> 
        </Row> 
       </Grid> 
      </div> 
     ) 
    } 
} 

export default howItWorks; 

Answer 1

が反応コンポーネントは、必ず大文字で開始する必要があります：

class HowItWorks extends Component { 
    render() { 
    ... 

<Jumbotron id="jumbotronThree"> 
    <HowItWorks/> 
    ... 

これをカバーするstackoverflowのhereの良い答えがあります。