Why does the below react work? As the function name in Hello.js component is Hello but it was not mentioned in main component that imported the Hello.js , Is it a property of arrow function?
The Hello.js component :
import React from 'react';
const Hello =() => <h1> HELLO <h1/>
export default Hello
Where Hello.js component got exported/ been Called.
import React from 'react';
import MyComponent from './Hello'
class App extends React.Component{
render(){
return(
<div>
<MyComponent />
<div/>
);
}
}
This is called default export, you can name the component as you want when you import it.
But if you are using named export.
Ex:
export const something = 'something'
When you import it, you need to destruct the same name.
import { something } from 'file/path'
As @Felix, mentioned, you can give to named export another name ( in case there are naming conflicts )
Ex:
import { something as somethingElse } from 'file/path'
For more resources.