良いベストプラクティス- 2022年により良いコードを書く方法

きれいで、スケーラブルで、維持するのが簡単なコードを書くことはすべてのプログラマーの夢です.そして、この能力は偉大なプログラマーから良いプログラマーを切り離します、涼しい部分は常に何かを学ぶために、そして、改善するためにあります、それで、あなたは反応最高の実行と調和する必要があります.

フォルダ構造

良いフォルダー構造は、アプリケーションとチームのサイズによって異なります.それで、それに一般的な答えがありません.特にこれは非常に独学的なトピックであり、また個人的な好みに依存します.
きれいなフォルダーの構造を計画したり、アプリケーションを起動すると、長期的に大きな違いを作ることができます.
あなたのプロジェクトを構築するときには、あまりにも多くの入れ子を回避する必要があります2つの主要なポイントがあり、エンジニアを超えていない.

└── /src
  ├── /assets - Contains static assets such as  images, svgs, company logo etc.
  ├── /components - reusable components like navigation bar, buttons, forms
  ├── /store - redux store
  ├── /utils - utilities, helpers, constants.
  ├── /views/pages - majority of the app pages would be here
  ├── index.js
  └── App.js

コード構造

基本的に定義された構造はありませんが、以下のようにCodeBase全体をたどるスタイルが必要です.

は、構造化された輸入命令を維持します

すべてのインポート文が新しい行にあることを確認してください.これは、すべてのコンポーネント、サードパーティ製のライブラリなどに対して、あなたのインポートをクリーンで理解しやすくするためです.

二重引用符("")または単一引用符(''

ダブルクォート("")やシングルクォート('')を反応させながら使うかどうかを混乱させるのは簡単です.単純な答えは:あなたが使用している一貫性を維持する.

小さなアプリケーションに全体のアプリケーションを分割

小さなコンポーネントに全体のアプリケーションを分割し、別のファイル上でそれに取り組んできれいなコードを維持するための良い練習です.

共通命名規則に従う

命名規則の背後にある意味は、どのような要素を使用しているかを簡単に認識し、コミュニティで共通のコードに何かを持っていることです.

ファイル内の反応コンポーネントと同じファイル名を指定します.
❌アナウンスバー.日本学術振興会
✔️アナウンスメント.日本学術振興会

は、サードパーティや新しい開発者も簡単にコードを理解できるように、あなたの変数のためのよく記述名を使用します.

❌

   const message = 'Good afternoon, Mr. Jhon';
   const wm = 'Good afternoon, Mr. Jhon';
   const m = 'Good afternoon, Mr. Jhon';

✔️

   const welcomeMessage = 'Good afternoon, Mr. Jhon';

繰り返しコードを避ける

あなたが重複したコードを書いているのに気づくならば、それを再利用できるコンポーネントに変えてください.

小道具のためにオブジェクトを破壊する

破壊課題代入構文はJavaScript式で、配列からの値、またはオブジェクトからのプロパティを別個の変数に展開できます.
❌

   const Button = (props) => {
      return <button disabled={props.isDisabled}>{props.text}</button>;
   };

✔️

   const Button = ({ text, isDisabled }) => {
      return <button disabled={isDisabled}>{text}</button>;
   };

リンターを使う

ライタは、基本的に、あなたが書いているJavaScriptコードを観察して、コードを実行するとき、あなたがよりたぶんキャッチする誤りを思い出させます.
あなたが作成反応アプリを使用しているときは、すでにeslint構成されているが、また、完全に自分で設定することができますまたはあらかじめ設定されたルールセットのルールを拡張します.

再利用可能なロジックをカスタムフックに展開する

Hooksは、我々のコンポーネント階層を変更することなく、STATIOL論理を再利用するのを許します.
あなたが別の機能的なコンポーネントで既に使用されている同じ状態のロジックを再利用しなければならない状況で自分自身を見つけるたびに、カスタムフックを作成するのに最適な時間です.内部では、ロジックをカプセル化し、ちょうどあなたのコンポーネント内の関数としてフックを呼び出す必要があります.

divが必要ないときに断片を書く

反応コンポーネントは、1つのHTMLタグをそのルートでのみレンダリングできます.ですから、2つの隣接する要素をレンダリングしたいなら、別の要素にそれらをラップする必要があります.
例えば、<h1>と<p>の要素に<div>をラップしますが、このアプローチによる問題は、不要な<div>要素の使用です.
❌

return (
   <div>
      <h1>Hello!</h1>
      <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
         odio odio, tempor non ipsum et, aliquam pharetra urna.
      </p>
   </div>
);

反応中の要素をラップする最良の方法は、反応フラグメント<React.Fragment>または短い構文<></>を使用することです
✔️

return (
   <>
      <h1>Hello!</h1>
      <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
         odio odio, tempor non ipsum et, aliquam pharetra urna.
      </p>
   </>
);

インテグレート

Typescriptを使用すると静的な型チェック、IDEでのコード補完が完了し、開発者の利便性が向上し、コードの書き込み中に型エラーが発生します.
あなたがあなたの反応アプリケーションの中にtypescriptを使用したくない理由があるかもしれません、例えば、あなたのプロジェクトが非常に小規模であるならば、タイプスクリプトは時間の浪費でありえます.

コードのテスト

テストを書いている間、あなたは既にこのテストに合格するためにコードを整理する方法を考えています.私にとって、これは常に役に立ちます.なぜならば、私は落とし穴が起こるかもしれないことを認識します、そして、私は彼らに目をつけなければなりません.
テストは、一種のドキュメントとして機能することができます.なぜなら、CodeBaseに新しい新しい開発者にとっては、ソフトウェアのさまざまな部分を理解し、どのように動作するのかを非常に理解することができるからです.
プロジェクトの開始時に常にテストを書くことは、特にユニットテストと統合テストを開始します.

結論
反応は多少あなたがそれを使用する方法の面で柔軟ですが、具体的な実践の後、あなたの経験を最大限に活用するのに役立ちます.
ちょうど覚えて、それは常にすべてのあなたのために有用な適応についてです.だから、すべての当然のためにそれを取るし、あなたの状況に役立つかもしれないと思う.次に、あなた自身のベストプラクティスのスタックに追加することができます.
また、
How to Render a 3D Model of You in React Using Three.js
10 JavaScript One-Liners - Ways To Boost Your Productivity
My blog
My website
Find me on Upwork
Find me on github