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?

Portuguese

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.

Smith

the second one was what i was searching for, thank you also for the link! – Portuguese

You're right man, I've read the React docs and they explain the same recommendation. I'll follow this approach, thank you again! – Portuguese

Why you use export default? Can I write two classes in one file and then call each of them in another file? – Troublemaker

Answer 2

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.

Radiometer

Answer 3

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

Galvano

File names are case sensitive, but that doesn't mean they need the capital. – Cota

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Chrisse