export default ?

2018-01-20

export default

ES6 have access to a concept called Javascript modules.

Javascript modules encapsulation(封裝) all the code that we write in separate file is siloed(窖, 倉)

explicitly say i want access to some code in that file

udemy: go find the library called react from node mudules folder

import React from 'react'

udemy: we import react as a javascript module into this file

demy: render a component to the DOM we don't use react library, is ReactDON

demy: ReactDOM is used to interact with the actual DOM

React is used to create and manage our componets

The above is a default import. Default imports are exported with export default .... There can be only a single default export.

import { Component } from 'react'

But this is a member import (named import). Member imports are exported with export .... There can be many member exports.

You can import both by using this syntax:

import React, { Component } from 'react';

引入模組中多個成員屬性，並使用別名命名。

import {
  reallyReallyLongModuleMemberName as shortName,
  anotherLongModuleName as short
} from 'my-module';

可以使用 import 語法引入模組的 default (它有可能是一個物件、一個方法或一個類別等)。

It is possible to have a default export (whether it is an object, a function, a class, etc.).

最簡單的引入方法如下：

import myDefault from 'my-module';

// 實際上等於:
import {default as myDefault} from 'my-module';

也可以使用default與其他export成員共存同一個模組,而default會最先被定義, 如下方例子：

import myDefault, * as myModule from 'my-module';
// myModule 會成為一個 { } 物件，它的屬性成員為 my-module.js 所有 export 的項目

當你從別的地方import一個檔案裡面的某一個function，就必須要有{ }

引用：

https://goo.gl/hSnpa8

https://goo.gl/UmVjUP

https://goo.gl/DisDai

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

https://goo.gl/dK9dcE

https://goo.gl/MEjeAp

點點筆記