2020年に遵守する必要がある15のReactのベストプラクティス

Reactのベストプラクティス


インタラクティブ性の高いユーザーインターフェースの構築に携わるフロントエンドデベロッパーであれば、おそらくツールキットにReactが含まれています。 Reactを活用した作品を作成するときは、Reactのベストプラクティスに合わせて作業を行うように注意する必要があります。これは、コードをよりよく整理するのに役立ちます.

ご存知のように、ReactはFacebookによって作成されたライブラリであり、多くの興味深いコンポーネントと統合できます。実際、どの開発者も独自のコンポーネントを作成して、コミュニティがアクセスできるようにすることができます.

今日、私たちはトピックを真正面から見てあなたに示します Reactの最も基本的なベストプラクティス:

��1.コンポーネントを小さく、機能固有に保つ

ご存知のように、Reactを使用すると、多数のタスクを実行する巨大なコンポーネントを持つことができます。ただし、コンポーネントを設計するより良い方法は、コンポーネントを小さくして、1つのコンポーネントが1つの機能に対応するようにすることです。理想的には、単一のコンポーネントがページの特定のビットをレンダリングするか、特定の動作を変更する必要があります。これには多くの利点があります:

  • 機能固有のコンポーネントをスタンドアロンにできるため、テストとメンテナンスが容易になります.
  • 各小さなコンポーネントは複数のプロジェクトで再利用できます.
  • 一般的な機能を実行するコンポーネントをコミュニティで利用できるようにすることができます.
  • コンポーネントが小さいほど、パフォーマンスの最適化を実装しやすくなります.
  • 小さいコンポーネントを更新する方が簡単です.
  • より大きなコンポーネントはより強力に実行する必要があり、維持するのが難しい場合があります.

1つの簡潔なコンポーネントを作成することと複数の機能固有のコンポーネントを作成することのバランスは、組織によって異なります。結局のところ、コンポーネントはいくつでも持つことができ、同じ最終結果を達成したい方法でそれらを再結合できます。.

♻️2.再利用性が重要であるため、新しいコンポーネントの作成を必要最小限にしてください

1つの機能= 1つのコンポーネントのルールに従うことで、コンポーネントの再利用性を向上させることができます。つまり、その関数のコンポーネントが既に存在する場合は、その関数の新しいコンポーネントを作成することをスキップする必要があります。.

プロジェクト全体または任意の数のプロジェクト全体でコンポーネントを再利用することで、一貫性を実現できるだけでなく、コミュニティに貢献することもできます.

一方、コンポーネントが巨大になり、扱いにくくなり、保守が困難になる場合は、必要な数の小さなコンポーネントに分割することをお勧めします.

たとえば、さらに進んで、アイコンを処理できるButtonコンポーネントを作成することもできます。その後、ボタンが必要になるたびに、使用するコンポーネントができます。よりモジュール化すると、同じコードで多くのケースをカバーできます。真ん中のどこかを狙う必要があります。コンポーネントは十分に抽象的でなければなりませんが、過度に複雑であってはなりません.

クラスIconButtonはReact.Component {
[…]
render(){
戻る(

);
}
}

��3.重複したコードを統合する–コードを乾燥させる

すべてのコードに共通するルールは、コードをできるだけ簡潔かつ簡潔にすることです。.

ここでも違いはありません。Reactのベストプラクティスでは、コードを簡潔かつ正確に保つように指示しているからです。これを行う1つの方法は、重複を避けることです–自分を繰り返さないでください(DRY).

これは、パターンと類似点についてコードを精査することで実現できます。コードが見つかった場合は、コードを繰り返している可能性があり、重複を排除する余地があります。ほとんどの場合、少し書き直すとより簡潔になります.

これは、Reactの再利用性の原則に大きく依存しています。各ボタンのマークアップを追加する代わりに、アイコンを含む複数のボタンを追加したい場合は、上に示したIconButtonコンポーネントを使用するだけで済みます。すべてを配列にマッピングすることで、さらに先に進むこともできます.

const buttons = [‘facebook’、 ‘twitter’、 ‘youtube’];

戻る(

{
buttons.map((button)=> {
戻る(

);
})
}

);

��4. JavaScriptにCSSを配置する

プロジェクトの作業を開始するとき、すべてのCSSスタイルを単一のSCSSファイルに保持するのが一般的です。グローバルプレフィックスを使用すると、潜在的な名前の衝突を防ぐことができます。ただし、プロジェクトがスケールアップすると、このソリューションは実現できない場合があります.

JSでCSSを作成できるようにする多くのライブラリがあります。. EmotionJS そして グラマラス JSライブラリで最も人気のある2つのCSS.

以下は、プロジェクトでのEmotionJSの使用例です。 EmotionJSは、プロダクション用の完全なCSSファイルを生成できます。まず、npmを使用してEmotionJSをインストールします.

npm install –save @ emotion / core

次に、アプリケーションにEmotionJSをインポートする必要があります.

‘@ emotion / core’から{jsx}をインポートする

以下のスニペットに示すように、要素のプロパティを設定できます。

コンポーネント=小道具=> {
戻る(


}

ここに完全へのリンクがあります EmotionJSのドキュメント.

��5.必要な場合にのみコメントする

必要な場合にのみ、コードにコメントを添付してください。これは、Reactのベストプラクティスに準拠するだけでなく、同時に2つの目的にも役立ちます。

  • コードを視覚的に整理します.
  • 後でコードを変更した場合でも、コメントとコードの潜在的な競合を回避できます。.

��6.関数にちなんでコンポーネントに名前を付ける

簡単に認識できるように、実行する機能にちなんでコンポーネントに名前を付けることをお勧めします.

たとえば、ProductTable –コンポーネントの機能を即座に伝えます。一方、コードの必要性に基づいてコンポーネントに名前を付けると、将来の時点で混乱する可能性があります.

別の例として、コンポーネント、アバターに名前を付けて、作成者、ユーザー、またはコメントでどこでも使用できるようにすることをお勧めします。代わりに、その使用状況に関連してコンポーネントにAuthorAvatarという名前を付けると、そのコンポーネントのユーティリティが制限されます。.

さらに、機能の後にコンポーネントに名前を付けると、発見される可能性が高くなるため、コミュニティにとってより便利になります.

��7.コンポーネント名に大文字を使用する

ほとんどの人がそうであるように、JSX(JavaScript拡張機能)を使用している場合、作成するコンポーネントの名前は大文字で始める必要があります。たとえば、コンポーネントにselectbuttonではなくSelectButton、またはmenuではなくMenuという名前を付けます。 JSXがデフォルトのHTMLタグとは異なる方法でJSXを識別できるようにするためです。.

以前のReactバージョンでは、すべての組み込み名のリストを維持して、カスタム名と区別していました。しかし、リストは常に更新する必要があるため、それは破棄され、資本が標準になりました.

JSXを選択しない場合は、小文字を使用できます。ただし、これにより、プロジェクトの範囲を超えてコンポーネントの再利用性が低下する可能性があります.

��8.他の命名規則に注意してください

Reactを使用する場合、通常はJSX(JavaScript拡張)ファイルを使用します。したがって、React用に作成するコンポーネントは、Pascalケースまたはキャメル大文字で名前を付ける必要があります。これはスペースのない名前に変換され、すべての単語の最初の文字が大文字になります.

フォームを送信する関数を作成する場合は、submitForm、submit_form、submit_formではなく、キャメル大文字でSubmitFormという名前を付ける必要があります。ラクダの上ケースは、より一般的にはパスカルケースと呼ばれます。ここにさらにあります 例のリスト パスカルの場合の変数名と関数名の例.

��9.ステートフルな側面をレンダリングから分離する

Reactのコンポーネントは、ステートフルまたはステートレスです。ステートフルコンポーネントは、コンポーネントの状態に関する情報を格納し、必要なコンテキストを提供します。対照的に、ステートレスコンポーネントにはメモリがなく、UIの他の部分にコンテキストを与えることができません。親コンポーネントから小道具(入力)のみを受け取り、JSX要素を返します。それらはスケーラブルで再利用可能で、JavaScriptの純粋な関数に似ています.

Reactのベストプラクティスの1つは、ステートフルなデータロードロジックをレンダリングステートレスロジックから分離することです。データをロードする1つのステートフルコンポーネントと、そのデータを表示する別のステートレスコンポーネントを用意することをお勧めします。これにより、コンポーネントの複雑さが軽減されます.

それ以降のバージョンのReact v16.8には、React Hooksという新機能があります。これは、ステートフルな関数関連コンポーネントを書き込みます。これにより、最終的にはクラスベースのコンポーネントが不要になる可能性があります.

たとえば、アプリがマウント時に一部のデータをフェッチしています。あなたがしたいことは、メインコンポーネントのデータを管理し、複雑なレンダリングタスクを小道具としてサブコンポーネントに渡すことです.

‘./RenderTable’からRenderTableをインポートします。

クラスTableはComponent {
state = {loading:true};

render(){
const {loading、tableData} = this.state;
読み込み中? :;
}

componentDidMount(){
fetchTableData()。then(tableData => {
this.setState({loading:false、tableData});
});
}
}

��10.コードは期待どおりに実行され、テスト可能であること

本当に、このルールは説明を必要としません。記述したコードは期待どおりに動作し、簡単かつ迅速にテスト可能である必要があります。テストファイルには、ソースファイルと同じ名前に.testサフィックスを付けることをお勧めします。テストファイルを簡単に見つけることができます.

JESTを使用してReactコードをテストできます.

��11.任意の1つのコンポーネントに関連するすべてのファイルは、単一のフォルダーにある必要があります

スタイリングファイルを含め、任意の1つのコンポーネントに関連するすべてのファイルを1つのフォルダーに保持する.

特定のコンポーネントのみが使用する小さなコンポーネントがある場合は、これらの小さなコンポーネントをすべてそのコンポーネントフォルダ内にまとめておくのが理にかなっています。階層が理解しやすくなります。大きなコンポーネントには独自のフォルダがあり、すべての小さな部分はサブフォルダに分割されます。このようにして、コードを他のプロジェクトに簡単に抽出したり、必要なときにいつでもコードを変更したりできます.

たとえば、Formコンポーネントの場合、CSSファイル、アイコン、画像、テスト、およびFormに関連するその他のサブコンポーネントなどのすべての部分は、すべて同じフォルダーに存在する必要があります。ファイルに適切な名前を付け、関連するファイルを論理的にまとめておくと、後で見つけやすくなります。.

��12.ビットなどのツールを使用する

すべてのReactコンポーネントを整理するのに役立つReactのベストプラクティスの1つは、次のようなツールの使用です。 ビット.

これらのツールは、コードの保守と再利用に役立ちます。それ以上に、コードが発見可能になるのを助け、コンポーネントの構築におけるチームのコラボレーションを促進します。また、コードはプロジェクト間で同期できます.

��13.スニペットライブラリを使用する

コードスニペットは、最新かつ最新の構文に追いつくのに役立ちます。また、コードを比較的バグのない状態に保つのに役立つため、これは、見逃してはならないReactのベストプラクティスの1つです。.

ES7 React、Redux、JSスニペットなど、使用できるスニペットライブラリは多数あります.

✍️14.すべてのコードのテストを作成する

どのプログラミング言語でも、適切なテストにより、プロジェクトに追加された新しいコードが既存のコードとうまく統合され、既存の機能が損なわれないことが保証されます。作成する新しいコンポーネントのテストを作成することをお勧めします。適切な方法として、コンポーネントのディレクトリ内に__Test__ディレクトリを作成して、関連するすべてのテストを格納する必要があります.

Reactのテストは大きく2つの部分に分けることができます。Reactアプリを使用してコンポーネントの機能をテストすることと、ブラウザーにレンダリングされた完全なアプリケーションをテストすることです。後者のカテゴリのテストには、クロスブラウザテストツールを使用できます。.

前者については、JavaScriptテストランナーを使用できます, 冗談 jsdomを使用してHTML DOMをエミュレートし、Reactコンポーネントをテストします。完全に正確なテストは実際のデバイスのブラウザでのみ可能ですが、Jestはプロジェクトの開発段階で実際のテスト環境を適切に近似します.

��15.リンティングルールに従い、長すぎる行を分割する

Lintingは、コードで潜在的なエラーを分析するプログラムを実行するプロセスです。.

ほとんどの場合、言語関連の問題に使用します。ただし、他の多くの問題、特にコードスタイルを自動的に修正することもできます。 Reactコードでリンターを使用すると、コードを比較的エラーやバグのない状態に保つのに役立ちます.

Reactのベストプラクティスに関する最後の言葉

Reactのベストプラクティスのこのリストが、プロジェクトを正しい軌道に乗せ、将来の潜在的な問題を回避するのに役立つことを願っています.

React関連の質問がある場合は、以下のコメントでお気軽に送信してください.

WordPressサイトの高速化に関する速習コースに参加することを忘れないでください。いくつかの簡単な修正により、ロード時間を50〜80%も短縮できます。

Andrei Băicușによるコード例。 Shaumik Daityariによるコンテンツの更新

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map