React開発者の生産性を高め、作業の質を向上させることができるいくつかの優れたツールについて説明しましょう。
通常、新しいプロジェクトを開始するときは、このリストに追加したツールに独自のテンプレートを使用します。また、MaterialUIなどの他のツールも使用しています。私はそれらを研究し、彼らの助けを借りていくつかのアプリケーションを作成し、いくつかの小さなプロジェクトを実装した後、結果を共有することにしました。
それでは、最終的なリストを見てみましょう。
ESLint
ESLintには、Reactファンを含むJavaScript開発者にとって変更すべき点がたくさんあります。このサービスは、コードをすばやく分析し、考えられるバグを探すスマートなアルゴリズムを提供します。
さらに、構文を変更せずに、見つかった問題を自動的に修正できます。
開始するには、Airbnbの開発者によって提案された構成を使用することをお勧めします。を含む：
- Reactライブラリの組み込みサポート（たとえば、フックを使用するためのルールのサポート）。
- ベストプラクティスに焦点を当てます。
ESLintはどのプロジェクトにも必須であり、Airbnb構成は私のお気に入りの1つです。何かを追加しましたが、初期設定から90％残っています。
ビット
Bitは、React開発者がコラボレーションプラットフォームとして必要とするものを提供します。これにより、チームは個々のコンポーネントで共同作業を行うことができます。
これは、再利用可能なコードを記述できるコマンドラインユーティリティです。ビットは完全にオープンソースであり、これが人気の理由の1つです。
ほとんどの機能はアトミックコンポーネントの作成に関連しているため、他の開発者と簡単に共有できます。さらに、コンポーネントの依存関係をチェックして、メインプロジェクトとは別にテストする機能もあります。
Reactアプリを作成する
React開発者は、新しいプロジェクトを開始するのにかかる時間をよく知っています。時間を節約するために、Facebook開発者はCreate ReactAppを提案しました。
これは、Reactのカスタマイズではなく、開発に集中できる最初の「ビルダー」です。npx create-react-appmy-appコマンドを実行するだけです。次に、プロジェクト用に完全に構成されたアプリケーションがあります。
複数のクライアントのReactフリーランサーとして同時に作業している場合、Create ReactAppを使用すると効率が大幅に向上します。
コスモスに反応する
React Cosmosは、スケーラブルで高品質のユーザーインターフェイスを作成するために設計された開発者環境です。
このサービスにより、個々のインターフェースコンポーネントのプロトタイピングとテストを簡単に行うことができます。さらに、コードを壊すことを恐れずにそれを繰り返すことができます。コンポーネントを分離することにより、デバッグプロセスを容易にします。
React Cosmosは、エンタープライズグレードのアプリケーションでの作業に最適です。プロジェクトを小さくて再利用可能なコンポーネントに分割することで、保守が容易な高品質のコードを作成できます。
React Toolbox
この記事の冒頭で、ほとんどのプロジェクトでマテリアルUIを使用していると述べました。それには理由があります。私はマテリアルデザインが大好きで、マテリアルUIが私にぴったりです。
しかし、代替手段もあります。それらの1つはReactToolboxです。これは、マテリアルデザインを使用して開発された一般的に使用されるコンポーネントのコレクションです。柔軟性を高めるためにCSSモジュールを使用します。
この記事の執筆時点では、ReactToolboxには28のコンポーネントが含まれています。それらのいくつかは、アプリケーションドロワー、日付ピッカー、スイッチャー、およびスナックバーです。
ブートストラップに反応する
モバイルフレンドリーなウェブサイトは現代の標準です。ユーザーは、サイトがどのデバイスでもうまく機能することを期待しています。レスポンシブなデザインのサイトは、検索エンジンでさえも際立たせます。
多くの開発者は、Bootstrapを使用して、プロフェッショナルなデザインで応答性が高くスケーラブルなWebサイトを作成しています。問題は、BootstrapにReactと統合されていないネイティブコンポーネントが付属していることです。
解決策は、オープンソースのReactBootstrapパッケージです。すべてのBootstrapコンポーネントは、React開発者向けに特別に変更されています。
スリングショットに反応する
Reactアプリの開発をスピードアップしたいですか？評価しようとスリングショットに反応。React、Redux、Babelを組み合わせたテンプレートです。
他のツールと一線を画すSlingshotの最も重要な機能は、その高速フィードバックです。この機能は、アプリケーションが更新されるたびに、リンティング、ユニットテスト、およびホットリロードのプロセスを自動化します。このようにして、無関係なタスクではなく、ビジネスロジックに集中できます。
Reactide
彼らは、開発者は彼の編集者と同じくらい優れていると言います。これは完全に真実ではないかもしれませんが、エディターは私たちの仕事に非常に役立ちます。個人的には、JetBrainsとWebStormの大ファンです。私の選択はIDEですが、時々別の方法を試します。
たとえば、ReactideはReactのIDEであることがわかりました。私はこの発見に非常に驚き、ツールを試しました。
面白い機能があることがわかりました。たとえば、プロジェクトのコンポーネントをIDEで直接レンダリングできます。ブラウザシミュレータと統合された組み込みのNode.jsサーバーもあります。
完全に切り替えるとは思いませんが、興味深いツールです。ただし、これは、Reactを使用または学習していて、構成段階でも問題が発生したくない場合に適したオプションです。
React Testing Library
「最初にテストしてください！」-私が絶えず繰り返すこと。
言い換えれば、一連のテストツールを持つことが重要です。React TestingLibraryは小さなライブラリです。それはあなたがあまり問題なくあなたのReactコードをテストすることを可能にします。このライブラリは使いやすく、react-domやreact-dom / test-utilsなどの標準ライブラリに機能を追加します。
いくつかの良い例を含む優れたドキュメントを使用すると、すぐに起動して実行できます。
ストーリーブック
Storybookは、新しいコンポーネントを作成したり、それらをテストしたり、ライブラリから既存のコンポーネントを選択したりできるインタラクティブな開発環境を提供します。
Storybookは、主要なJavaScriptフレームワークと連携するのに十分な柔軟性を備えています。たとえば、React、Vue.js、Angular、Svelte、Marko、さらには生のHTMLです。
Storybookの最も優れている点は、さまざまなアドオンが付属していることです。これが私が面白いと思ういくつかの追加です：
- google-analytics（コンポーネントのGoogle Analyticsサポートを追加します）;
- 冗談;
- ストーリーショット（スナップショットを使用してコンポーネントをチェックする）;
- ビューポート（応答コンポーネントのマークアップを変更する）
このリストに感謝します。本文に記載されていない他のクールなツールを使用している場合は、コメントにそれらについて書いてください！