reactjs классы в отдельных файлах
 

Есть примерно такая структура.

<div id="root">
   <div id="user"> </div>
   <div id="system"> </div>
</div>

для каждого дива создал свой jsx: root.jsx, user.jsx, sys.jsx.
Рут понятно родитель, от него в user и system передаю свойства:

render: function() {
  return (
    <div> 
      <UserList
        lists = { this.props.userLists } 
      ...

Собираю через вебпак с бабель-лоадером. Файлы собираются, но класс из user.jsx в руте вызывает Uncaught ReferenceError: UserList is not defined.

Если ручками все в один jsx положить, то работает.

Как правильно разделить разные React.createClass на файлы и потом собрать?