Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Jason Choi
.a{fill-rule:evenodd;}techdegree seal-36
Jason Choi
Front End Web Development Techdegree Graduate 21,159 Points

Difference between 'export default class App extends Component' and 'class App extends Component'?

Hello.

In App.js, I noticed 'export default class App extends Component' syntax is used in this video.

Is there a reason using the 'export default class App extends Component' syntax over 'class App extends Component'?

Since App.js is the highest container component, I don't understand why exporting is needed.

Thank you! :)

1 Answer

Seth Kroger
Seth Kroger
56,416 Points

Since the question isn't linked I'm assuming this is about React. Even the top-level component should be exported because as a class module it should be. It only declares a component but doesn't run any code on it's own. It's not the same as the entrypoint, which is usually index.js. index.js usually does the job of attaching the top-level component to a container/wrapper element in the HTML like this:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));
Jason Choi
.a{fill-rule:evenodd;}techdegree seal-36
Jason Choi
Front End Web Development Techdegree Graduate 21,159 Points

Thank you!

Jason Choi
.a{fill-rule:evenodd;}techdegree seal-36
Jason Choi
Front End Web Development Techdegree Graduate 21,159 Points

Is there a functional difference between putting 'export default' on the top (on the same line as declaring a component) and bottom? or is it just preference? Thank you!

Seth Kroger
Seth Kroger
56,416 Points

There isn't much difference. At the top is just a little more compact.

Jason Choi
.a{fill-rule:evenodd;}techdegree seal-36
Jason Choi
Front End Web Development Techdegree Graduate 21,159 Points

Thanks!