When to Use Brackets in JavaScript Import Syntax?

Using Brackets with JavaScript Import Syntax

In JavaScript, there are various ways to import modules and libraries. One common method involves using brackets with the import syntax. Syntax:

<code class="javascript">import { Component, PropTypes } from 'react';</code>

This syntax differs from a simpler version:

<code class="javascript">import React, Component, PropTypes from 'react';</code>

Understanding the Difference

The syntax with brackets imports only specific named exports, while the syntax without brackets imports both the default export and named exports. Here's a breakdown:

<code class="javascript">import React, { Component, PropTypes } from 'react';</code>

• Imports the default export React under the same name.
• Imports the named exports Component and PropTypes under the same names.

This combines the two common syntaxes:

<code class="javascript">import React from 'react';
import { Component, PropTypes } from 'react';</code>

In general, modules provide either a default export or named exports. However, it's possible to have both. In cases where the most common feature is exported as the default, while additional features are exported as named exports, the syntax with brackets is appropriate.

Additional Notes

• The syntax import name from "module-name"; actually imports the default export from the module.
• The syntax import MyModule, {foo, bar} from "my-module.js"; imports the default export MyModule and the named exports foo and bar. The named exports are not accessible via MyModule.
• The syntax import * as MyModule from 'my-module'; imports all exports and makes them accessible under MyModule.name.

The above is the detailed content of When to Use Brackets in JavaScript Import Syntax?. For more information, please follow other related articles on the PHP Chinese website!