Standardize your module's imports and exports then you won't risk hitting problems with misspelled property names.
module.exports = Component
should become export default Component
.
CommonJS uses module.exports
as a convention, however, this means that you are just working with a regular Javascript object and you are able to set the value of any key you want (whether that's exports
, exoprts
or exprots
). There are no runtime or compile-time checks to tell you that you've messed up.
If you use ES6 (ES2015) syntax instead, then you are working with syntax and keywords. If you accidentally type exoprt default Component
then it will give you a compile error to let you know.
In your case, you can simplify the Speaker component.
import React from 'react';
export default React.createClass({
render() {
return (
<h1>Speaker</h1>
)
}
});