Open2021/04/20にコメント追加1

【React】import時の記述方法のまとめ

概要

import時に{} を使用しているもの、使用していないもの、変数名を変更しているものがあるので、まとめる

export defaultで公開された値をimportする場合、{}を使用せずimportができる

exportで公開された値をimportする場合、中括弧をつけてimportする
名前を別名にしたい場合、import時に{ xxx as yyy }と記述をすることで指定ができる
exportは複数件をひとつのファイルで宣言できる

export defaultで公開された値をimportする場合、中括弧をつけずにimportできる
名前を別名にしたい場合、import時に適当な記述で指定ができる
export defaultはひとつのファイルに一件のみの宣言

export defaultで公開されているものは、import時の変数名は適当に決めて良い

hoge.js

...
export default Hoge

fuga.js

import Hoge from './hoge.js'
...

または、適当に名前をつけられる

fuga.js

import Nandemo from './hoge.js'
...