Feature FolderとUI／Composite Component
feature folderを採用してcomponentを分割します。小さく再利用可能なUI primitiveと、stateやdataを統括するfeature固有のcompositeを使い分けます。
「Feature FolderとUI／Composite Component」はCoddyKit上の無料React Academyレッスンです。 これはレッスン1/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全3レッスンが含まれています。
なぜ構成が重要なのか
目標：規模を拡大できるコード構成にします。
- Featureフォルダーに関連するコードをまとめます
- UIプリミティブは小さな視覚的構成要素です
- Compositeコンポーネントがそれらを組み合わせます
Feature優先のフォルダー構成
- features/checkout/（ルート、コンポジット、hooks、テスト）
- ui/（プリミティブ：Button、Input、Card）
- lib/（ヘルパー）
- assets/（アイコン、スタイル）
UIプリミティブ：Button
小さなButtonプリミティブを作成します。見た目を担当し、再利用可能で、データ取得は行いません。
<div id="root"></div>Composite：QuantityCard
Compositeコンポーネントは、プリミティブと状態を組み合わせて、機能のタスクを実現します。
<div id="root"></div>Featureフォルダーの実例
features/checkoutフォルダーでは、CheckoutPanelがプリミティブとコンポジットを組み合わせます。
<div id="root"></div>ヒントとチェックリスト
- プリミティブは小さく再利用可能に保ちます
- コンポジットに機能の状態を持たせます
- 巨大なグローバルフォルダーよりもFeatureフォルダーを優先します
プリミティブとコンポジットのチェック
振り返り
振り返り：feature単位で構成し、小さなUIプリミティブを作り、それらをコンポジットコンポーネントで組み合わせます。コンポジットが機能の状態を管理します。
よくある質問
「Feature FolderとUI／Composite Component」レッスンは無料ですか？
はい。「Feature FolderとUI／Composite Component」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Academyコースには全3レッスンが含まれています。
「Feature FolderとUI／Composite Component」で何を学びますか？
feature folderを採用してcomponentを分割します。小さく再利用可能なUI primitiveと、stateやdataを統括するfeature固有のcompositeを使い分けます。 ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
React Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのReact Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/3です。
「Feature FolderとUI／Composite Component」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このReact Academyレッスンでコードを書いて実行できますか？
はい。すべてのReact Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- Feature FolderとUI／Composite Component
- Hooksフォルダーの構成規約とテストの同一配置
- Refactoringの指針