Reactを知る-その2
Reactで出てくる言葉
トラハックさんの動画や書籍と教材から知っておくべき部分のまとめ
importとexport
主にjsのモジュールと同じ考え
「入れ込むのか」「出力するのか」を書いてあげる
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/export
更に、エントリポイントと呼ばれるファイルを作りimportしたものを他へexportさせたりすることが出来る。index.js
で行うことが多い印象。
例えば、export default Fuga;
の様にdefaultという部分が名前になっており、defaultは他ファイル(コンポーネント)でも使ってexportしているので、index.js
にまとめて出力(export)する時にファイル名(コンポーネント名)が被らないようにしないといけない。なので、index.js
と言うエントリポイントを作り、そこでexportの名前を変えることが出来る。
(Railsなどでいうroutes.rbの様なルーティングをコンポーネント同士で行うイメージ)
なぜそんなことをするのか?🤔
index.js
といったエントリポイントで数々のコンポーネントを纏めていると他の子コンポーネントなどでimportする時に、index.js
で名前をdefaultからTitleに変えたことによって
import {Title,Hoge,Fuga,Hage,Foo} from "./index";
といった様に少ない記述でimportすることが出来る。
もし、index.jsにまとめていないと
import Title from './Title' import Hoge from './Hoge' import Fuga from './Fuga' import Hage from './Hage' import Foo from './Foo'
といった様に読み込むコンポーネントが増えると記述が増えて管理も面倒になると言うデメリットがある。