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?

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?

• javascript
• import
• routes
• reactjs
• react-router

3 Answers 3

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.

Make sure to include semicolons after the import statements too. you might get away with a browser (or environment like Node) reading the code in some cases, but the import function runs right into your export in this code.

.js should have the first letter capital. Else import will not take place.