ReactJS - Can't import component

Question

I'm brand new to ReactJS. I'm developing a little single page app and I'm just trying to create my components to import within my main component.

TestComponent.jsx

import React from 'react'

export class TestComponent extends React.Component {

    render() {
        return (
            <div className="content">Test Component</div>
        )
    }
}

Inside my main.jsx I've imported this component calling

import TestComponent from './components/TestComponent.jsx'

Then I've tried to call my component for a specific route:

render(
    (<Router history={history}>
        <Route path="/" component={NavMenu}>
            <IndexRoute component={Index}/>
            <Route path="test" component={TestComponent}></Route>
        </Route>
    </Router>),
    document.getElementById('main')
)

I've not got any errors from the console, but I don't see my component. What am I doing wrong?

Answer 1

The import syntax without curly braces is for importing default exports, not for importing named exports.

Make your component the default export:

TestComponent.jsx

import React from 'react'

export default class TestComponent extends React.Component {

    render() {
        return (
            <div className="content">Test Component</div>
        )
    }
}

Alternatively you should be able to import it as it is with the following import statement:

import { TestComponent } from './components/TestComponent.jsx'

You might want to read up on ES6 modules (e.g. in Exploring ES6) if you want to use ES6 in your React code.