Reactを知る-その２

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'

といった様に読み込むコンポーネントが増えると記述が増えて管理も面倒になると言うデメリットがある。