patternjavascriptreactCritical
What does "export default" do in JSX?
Viewed 0 times
whatjsxdoesexportdefault
Problem
I want to ask what the last sentence means and does (export default HelloWorld;) but I can't find any tutorials about it.
// hello-world.jsx
import React from 'react';
class HelloWorld extends React.Component {
render() {
return Hello, world!;
}
}
export default HelloWorld;Solution
Export like
A module is a self contained unit that can expose assets to other modules using
In your code:
In ES6 there are two kinds of exports:
Named exports - for example
Default export - is the value that will be imported from the module, if you use the simple import statement
A module can contain both named exports and a default export, and they can be imported together using
export default HelloWorld; and import, such as import React from 'react' are part of the ES6 modules system.A module is a self contained unit that can expose assets to other modules using
export, and acquire assets from other modules using import. In your code:
import React from 'react'; // get the React object from the react module
class HelloWorld extends React.Component {
render() {
return Hello, world!;
}
}
export default HelloWorld; // expose the HelloWorld component to other modulesIn ES6 there are two kinds of exports:
Named exports - for example
export function func() {} is a named export with the name of func. Named modules can be imported using import { exportName } from 'module';. In this case, the name of the import should be the same as the name of the export. To import the func in the example, you'll have to use import { func } from 'module';. There can be multiple named exports in one module.Default export - is the value that will be imported from the module, if you use the simple import statement
import X from 'module'. X is the name that will be given locally to the variable assigned to contain the value, and it doesn't have to be named like the origin export. There can be only one default export.A module can contain both named exports and a default export, and they can be imported together using
import defaultExport, { namedExport1, namedExport3, etc... } from 'module';.Code Snippets
import React from 'react'; // get the React object from the react module
class HelloWorld extends React.Component {
render() {
return <p>Hello, world!</p>;
}
}
export default HelloWorld; // expose the HelloWorld component to other modulesContext
Stack Overflow Q#36426521, score: 506
Revisions (0)
No revisions yet.