How to create a reusable component or partial in react.js?

First time working with React.js and I wanted to do something pretty simple.

I created an app.js that loads up the initial page that has my navigation and spits out the children props.

Instead of putting the navigation in the app.js file, I would like to create another component or partial to render it.

Code below: import React, { Component } from 'react'; import NavLink from './components/NavLinks/NavLinks' import './App.css'; import { Link } from 'react-router';

class App extends Component {
  render() {
    return (
      <div className="App">
        <nav>
          <li><NavLink to="/">Home</NavLink></li>
          <li><NavLink to="/contact" activeClassName="active">Contact</NavLink></li>
          <li><NavLink to="/bad-link" activeClassName="active">Bad Link</NavLink></li>
        </nav>

        <div className='container'>
          {this.props.children}
        </div>
      </div>
    );
  }
}

export default App;

What I would like:

class App extends Component {
  render() {
    return (
      <div className="App">

        {-- Some component or partial here to render the nav --}

        <div className='container'>
          {this.props.children}
        </div>
      </div>
    );
  }
}

export default App;