"create-react-app"によって作成されたデフォルトアプリのindex.cssとApp.cssの違いは何ですか？

Question

index.cssはグローバルスタイルの方が多く、App.cssはAppコンポーネントのみになりますが、通常はAppコンポーネントではありません。ここでベストプラクティスは何ですか？

Answer 1

Appコンポーネントは、Reactベースのアプリケーションでは基本的に他のすべてのコンポーネントが子コンポーネントとなっています。したがって、create-react-appでは、App.cssとindex.cssが存在する理由は、create-react-appが "App.css"と "index"の間に名前の競合がない単純なディレクトリ構造を持つようにするためです.css "なので、一般的なものを削除する時間を減らし、代わりにあなたのものを構築する時間を費やします。 Reactベースのアプリケーションを構造化するためのベストプラクティスは、独自のindex.jsファイル、index.cssファイル、index.test.jsなどの独自の別個のディレクトリに各コンポーネントを持つだけですが、テストファイルを構造化したい。

import HUD from './HUD' 

の代わりに：：

import HUD from './HUD/HUD.js' 

ので

インデックスを使用して、あなたが書くことができますので、「Index.jsは」、最初のファイルは、あなたがそのディレクトリのES6のimport文を呼び出すディレクトリ内を探していますこの index.jsだけこのコンポーネント

を指し以来の.cssだけで、 この index.cssファイルが このコンポーネントであることを明確にするのに役立ちます

ここでは基本的なリアクトアプリケーションのディレクトリ構造です：

src 
├── App 
│   ├── HUD 
│   │   ├── index.css 
│   │   ├── index.js 
│   │   └── index.test.js 
│   ├── index.css 
│   ├── index.js 
│   ├── index.test.js 
│   ├── Maze 
│   │   ├── index.css 
│   │   ├── index.js 
│   │   └── index.test.js 
│   ├── Tile 
│   │   ├── index.css 
│   │   ├── index.js 
│   │   └── index.test.js 
│   └── TouchControl 
│    ├── index.css 
│    ├── index.js 
│    └── index.test.js 
├── index.css 
└── index.js 

のsrcレベルindex.jsであるため、SRCレベルindex.cssファイルは、トップレベルのコンテナDOM要素のCSSスタイル規則を置くのに良い場所でしょうが、 Reactをベースにしたアプリケーションの最初の場所で、Reactに実際のHTML DOM、コンテナ要素、これと同様のものにAppコンポーネントを物理的にマウントし、 'root'は既にページ上にある要素のIDですJavaScriptがロードされます：

import React from 'react' 
import ReactDOM from 'react-dom' 
import App from './App' 
import './index.css' 

ReactDOM.render(<App />, document.getElementById('root'))