How to reference component defined in other .jsx files - reactjs

Question

I'm new to reactjs and I'm using it in an electron project. I have component A and B defined in a.jsx and b.jsx separately using the following syntax:
//a.jsx
'use babel';
import React from 'react';
export class A extends React.Component {
render() {
return (
<div>some text</div>
);
}
}
//b.jsx
'use babel';
import React from 'react';
export class B extends React.Component {
render() {
return (
<div>
<A />
</div>
);
}
}
and I render them in the html page:
<!-- index.html -->
<script>
var a = require('./a.jsx');
var b = require('./b.jsx');
React.render(React.createElement(b.B, null), document.body);
</script>
How could I reference component A from component B(e.g. using the A tag in render function of B as illustrated in b.jsx above)? I've tried adding:
import A from './a.jsx'
but got the error:
Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of `B`.
What is the right way to do it?
The code above can run without error if the reference of component A is removed in b.jsx.

Answer 1

It's a good idea to stay away from mixing the new module syntax (import, export) with the old commonjs style (require, module.exports).
If your file exports just one component, then you can use a default export.
// a.jsx
import React from 'react';
export default class B extends React.Component {
}
Then you can reference the class using the import syntax in your main file.
import B from './b.jsx';
This is basically shorthand for assigning the default export from this module to a new variable B.
Alternatively, you can have named exports for modules that export multiple values. This is actually what you had before.
export class A extends React.Component {
}
This creates a named export called A that can be referenced from other files with a destructuring import.
import { A } from './a.jsx';
If your file only exports one value it's probably a good idea to stick to default exports.