web-dev-qa-db-ja.com

Reactベースのプロジェクトの公式のスタイルガイドまたは命名規則はありますか？

Reactプロジェクトをセットアップし、mobXをステートマネージャとして使用し、TypeScriptを使用します。

React Projects：

  1. React以外のフォルダーとファイル：camelCaseまたはkebab-case
  2. 反応（componentsフォルダー内）：PascalCase

フォルダー/ファイルの命名に正式な規則はありますか？そうでない場合、このパターンのベースとなるスタイルガイドはありますか？または、これがほとんどの場合に使用される理由は何ですか？

javascriptreactjsnaming-conventions
7
Rui d'Orey

多くの言語でPascalCaseのクラスが一般的で、キャメルケース関数と変数名があります。 JSの例、

function hello() {console.log('world')};

class Foo {
  say() { console.log('bar') }
}
let foo = new Foo();
foo.say();

コンポーネントはしばしばクラスですclass Nav extends React.PureComponentなので、論理接続は、クラスを含むファイルに同様に名前を付けることであり、一致するケースインポートステートメントimport Nav from './Nav

また、クラスではなく関数をエクスポートするユーティリティファイルがある場合もあります。繰り返しになりますが、一致するケースがあるのはいいことですimport hello from './hello'

そのため、次のような一般的な構造が見つかるかもしれません

src
- App.js
- components/
  - Nav.js
- util/
  - hello.js
1
Jareth

現在、PascalCaseで名前が付けられたフォルダがあり、その中にindex.jsファイルがあります。これが私のコンポーネントです。

ルートコンポーネントに直接接続されたコンポーネントiは、独自のindex.jsを使用して独自のフォルダーにネストされています。また、ドット表記を使用して、そのフォルダーに直接関連するファイルの性質を説明します。例：[descriptor].[name].[prefix]

Components/
    ComponentName/
    |---util.componentName.js
    |---constants.componentName.js
    |---styles.componentName.scss
    |---index.js
        ChildComponent1/
        |---util.childComponent1.js
        |---styles.childComponent1.scss
        |---index.js
        ChildComponent2/
        |---util.childComponent2.js
        |---styles.childComponent2.scss
        |---index.js

そして、私のmobxストアでは、ストアモジュールで実際の深いフォルダー構造を持つ可能性が低いため、通常は2つのjsファイルが含まれる1つのルートモジュールフォルダーActions.js＆index.jsインデックスは、Actionsクラスを拡張するメインストアクラスです。 （observable、computed、およびactionプロパティを持つ1つのmobxクラスが少し雑然としていることがわかりました）。

Storeフォルダー自体にはindex.jsがあり、すべての兄弟ストアモジュールを順番にインポートして、後でそれらを1つのストアオブジェクトに結合します（プロジェクトで必要）。

Store/
    StoreModule/
    |---actions.js
    |---index.js
    AnotherStoreModule/
    |---actions.js
    |---index.js
    index.js

私はそれが好みに下がっているため実際の正しい方法はないと思います、上記の方法は読み取り可能であると思います、そしてVSCodeのツールを使用してファイルを見つける場合、「定数ファイルであるすべてのファイルを確認したい"constants.[component name]を検索

0
Francis Leigh