Chapter 04

第3章 ディレクトリを整える

てべすてん
てべすてん
2022.03.11に更新

環境構築が終わったら設計したフォルダ構成になるようフォルダを作成します。

なお、すべてsrcフォルダ内に作成します。

components

srcフォルダ内に

  • components
    • App
    • util

↑↑↑のフォルダをを作成します。

componentsフォルダ内には各コンポーネントを記述したファイルを置きます。

components/Appフォルダ内にはApp.tsxの子コンポーネントを置きます。例えばHeader.tsx,Sidebar.tsxなどです。

components/utilフォルダ内には様々なところで使える汎用的なコンポーネントを置きます。
例えばButton.tsxなどです。

sym

srcフォルダ内に

  • sym
    • rect

↑↑↑のフォルダをを作成します。

こちらのフォルダについては後程詳しく取り上げます。

redux

srcフォルダ内に

  • redux

↑↑↑のフォルダをを作成します。

こちらのフォルダについては後程詳しく取り上げます。

最終形

ここまでで以下のようなフォルダ構成になったはずです。

  • /flowchartbuilder //プロジェクトルート
    • /public
    • /src
      • /components
        • /App
        • /util
      • /sym
      • /redux
      • App.tsx
      • index.tsx

またこれ以降/flowchartbuilderフォルダをプロジェクトルートと呼びます。

質問・指摘などはこちらから

https://zenn.dev/tbsten/scraps/7123b1257c2097