reactjs - react-router - separate files -

so have following app.js

import react 'react' import { render } 'react-dom' import { browserrouter, match, miss, link } 'react-router'  //import jobs './modules/jobs' //import job './modules/job'  const app = () => (   <browserrouter>     <div>       <ul>         <li><link to="/">main</link></li>         <li><link to="/jobs">jobs</link></li>       </ul>        <hr/>        <match pattern="/" component={main} />       <match pattern="/jobs" component={jobs} />     </div>   </browserrouter> )   const jobs = ({ pathname }) => (   <div>     <h2>jobs</h2>     <ul>       <li><link to={`${pathname}/job1`}>job1</link></li>       <li><link to={`${pathname}/job2`}>job2</link></li>       <li><link to={`${pathname}/job3`}>job3</link></li>     </ul>      <match pattern={`${pathname}/:jobid`} component={job}/>     <match pattern={pathname} render={() => (       <h3>please select job</h3>     )}/>   </div> )  render(<app/>, document.queryselector('#root')) 

it works great.

how can put bit in separate file?

const jobs = ({ pathname }) => (   <div>     <h2>jobs</h2>     <ul>       <li><link to={`${pathname}/job1`}>job1</link></li>       <li><link to={`${pathname}/job2`}>job2</link></li>       <li><link to={`${pathname}/job3`}>job3</link></li>     </ul>      <match pattern={`${pathname}/:jobid`} component={job}/>     <match pattern={pathname} render={() => (       <h3>please select job</h3>     )}/>   </div> ) 

i folder called modules so:

• modules

  • main.js

  • jobs.js

  • job.js

  • etc.

i used kind of thing:

//jobs.js import react 'react'  export default react.createclass({   render() {     return (       <div>         <h2>jobs</h2>       </div>     )   } }) 

and i'd include in app.js with: import jobs './modules/jobs'

but i'm new react, i'm not sure of syntax...