# component creation

**URL:** <https://forum.kirupa.com/t/component-creation/659113>\
**Category:** Uncategorized\
**Created:** [June 3, 2023, 4:05pm UTC](https://forum.kirupa.com/t/component-creation/659113 "2023-06-03T16:05:41Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Andy\_Leroy](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/andy_leroy/32/22205_2.png) [@Andy\_Leroy](https://forum.kirupa.com/u/Andy_Leroy)\
**Post date:** [June 3, 2023, 4:05pm UTC](https://forum.kirupa.com/t/component-creation/659113/1 "2023-06-03T16:05:41Z")

</div>

is there a difference between this

```auto
import React, { Component } from 'react';
class App extends Component{
render(){
return(
<div>
<h1>Hello World</h1>
</div>
);
}
}
export default App;

```

and this

```auto
class App extends react.component{
render(){
return(<div>
<h1>Hello World</h1>
</div>);
}
}

```

also what does “export default” statement above mean? is it the same as  
document.query selector(#container)?

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [June 4, 2023, 4:44pm UTC](https://forum.kirupa.com/t/component-creation/659113/2 "2023-06-04T16:44:27Z")

</div>

Hi Andy - the export statement plays an important role in signaling what part of your file other files can reference:

> **[export - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export)**
>
> The export declaration is used to export values from a JavaScript module. Exported values can then be imported into other programs with the import declaration or dynamic import. The value of an imported binding is subject to change in the module that...

Queryselector is used to reference an element that exists in our HTML in JavaScript. This article goes into more detail on what role queryselector plays:

> **[Finding Elements In The DOM Using querySelector](https://www.kirupa.com/html5/finding_elements_dom_using_querySelector.htm)**
>
> Learn how to target elements in the DOM using just a little bit of JavaScript, the querySelector function, and an honest-to-goodness CSS selector.

To answer your question about the code differences, they are both similar. React.Component and Component reference the same underlying Component implementation.

🙂