Add raw components with toy props

app/components/App.jsx

-import React from 'react';
+import React from 'react'
+import OutputPanel from './OutputPanel'
+import InputPanel from './InputPanel'
 
-export default class App extends React.Component {
-  render() {
-    return (<p>Hello</p>)
-  }
-}
+const App = () => (
+  <div>
+    <InputPanel routes={[["a", "b", "c"], [], ["1", "2", "4"]]}/>
+    <OutputPanel url="https://example.com" stops={["x", "y", "z"]} />
+  </div>
+)
+
+export default App

app/components/InputPanel.jsx

+import React from 'react';
+import PropTypes from 'prop-types'
+import RouteTile from './RouteTile'
+
+const InputPanel = ({routes}) => (
+  <div>
+    {routes.map((stops, i) => (
+      <RouteTile key={i} stops={stops} />
+    ))}
+    <RouteTile stops={[]} noStopsText="Add a link to a partial route" />
+  </div>
+)
+
+InputPanel.propTypes = {
+  routes: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)).isRequired
+}
+
+export default InputPanel

app/components/OutputPanel.jsx

+import React from 'react'
+import PropTypes from 'prop-types'
+import RouteTile from './RouteTile'
+
+const OutputPanel = ({url, stops}) => (
+  <div>
+    <h2>Complete Route</h2>
+    <RouteTile url={url} stops={stops}
+      noStopsText="Add links to partial routes on the left" />
+  </div>
+)
+
+OutputPanel.propTypes = {
+  url: PropTypes.string.isRequired,
+  stops: PropTypes.arrayOf(PropTypes.string).isRequired
+}
+
+export default OutputPanel

app/components/RouteTile.jsx

+import React from 'react'
+import PropTypes from 'prop-types'
+
+const RouteTile = ({stops, url}) => (
+  stops.length == 0 ?
+  <div>
+      <input type="text" />
+      <input type="button" value="+" />
+  </div>
+  :
+  <div>
+    { url === undefined && <input type="button" value="-" /> }
+    { url === undefined && <input type="button" value="&#x1F589;" /> }
+    { url !== undefined && <div className="url">{url}</div> }
+    <ul>
+      {stops.map((stop, i) => (
+        <li key={i}>{stop}</li>
+      ))}
+    </ul>
+  </div>
+)
+
+RouteTile.propTypes = {
+  stops: PropTypes.arrayOf(PropTypes.string).isRequired,
+  url: PropTypes.string
+}
+
+export default RouteTile