In React, a component can be defined as a reusable piece of UI. Components can be imported and exported between different files, making your codebase modular and easier to maintain.
Before a component can be used in other parts of your application, it must be exported from the file where it's defined. There are two types of exports: named exports and default exports.
With named exports, you can export multiple items from a single file. Each exported item must have a unique name.
// MyComponent.js
import React from 'react';
export const MyComponent = () => {
return <h1>Hello, World!</h1>;
};A file can have a single default export. When importing a default export, you can name it whatever you like.
// MyDefaultComponent.js
import React from 'react';
const MyDefaultComponent = () => {
return <h1>Hello, World!</h1>;
};
export default MyDefaultComponent;Once a component is exported, it can be imported into other files.
For named exports, use curly braces { } to import the component with its exported name.
// App.js
import React from 'react';
import { MyComponent } from './MyComponent';
const App = () => {
return <MyComponent />;
};
export default App;For default exports, you can import the component using any name you choose without curly braces.
// App.js
import React from 'react';
import AnyName from './MyDefaultComponent';
const App = () => {
return <AnyName />;
};
export default App;Below is an example that puts everything together.
src/
|-- components/
| |-- Header.js
| |-- Footer.js
|
|-- App.js
// Named export
import React from 'react';
export const Header = () => {
return <header>Header Section</header>;
};// Default export
import React from 'react';
const Footer = () => {
return <footer>Footer Section</footer>;
};
export default Footer;import React from 'react';
import { Header } from './components/Header'; // Named import
import Footer from './components/Footer'; // Default import
const App = () => {
return (
<div>
<Header />
{/* Content goes here */}
<Footer />
</div>
);
};
export default App;For further reading and more advanced topics, refer to the official React documentation.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent