LoginSignup
0
1

[React] Create React App(CRA)を使用したReactプロジェクトのフォルダ構成

Last updated at Posted at 2024-05-19

目次(生成されるファイル)

node_modules

  • プロジェクトで使用されるすべての依存パッケージが格納されます。

public

  • 公開用の静的ファイルが格納されます。
  • index.html: アプリケーションのルートHTMLファイルです。このファイルにReactコンポーネントがレンダリングされます。

src

開発者が実際にコーディングするファイルが格納されます。

  • index.js: アプリケーションのエントリーポイントです。ReactDOMを使ってReactコンポーネントをDOMにレンダリングします。
  • index.css: アプリケーション全体のスタイルシートです。
  • App.js: メインのReactコンポーネントです。アプリケーションの基本的なUIを定義します。
  • App.css: App.jsコンポーネントのスタイルシートです。
  • App.test.js: App.jsのテストコードです。
  • setupTests.js: テストの設定ファイルです。
ex_fail_structure
├── public/
│   ├── index.html
└── src/
│   ├── index.js(index.jsx)
│   ├── index.css
│   ├── App.js(App.jsx)
│   ├── App.css
│   ├── App.test.js
│   ├── setuoTest.js
│   └── components/
│       ├── Button/
│       |   ├── Button.js(Button.jsx)
│       |   ├── Button.css
│       |   └── Button.test.js
│       └── Form/
│       │   ├── Form.js(Form.jsx)
│       │   ├── Form.css
│       │   └── Form.test.js

gitignor

  • Gitで管理しないファイルやディレクトリを指定するファイルです。

package.json

  • プロジェクトの依存パッケージやスクリプトを管理するファイルです。

README.md

  • プロジェクトの概要や設定手順などの説明が記載されるファイルです。

package-lock.jso

  • 正確な依存関係ツリーを記録するファイルで、再現性のあるビルドを保証します。

参考リンク

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1