学ぶ価値のある大規模な React オープンソースプロジェクトにはどのようなものがありますか?

みなさんこんにちは。ConardLiです。

以前、ドキュメントや動画でReactを学習してきた方から、実践的な経験を積むために優れたオープンソースプロジェクトから学びたいとよく聞かれました。しかし、これまで適切なプロジェクトを見つけるのは容易ではなく、良い答えを見つけることができませんでした。エンタープライズレベルのアプリケーションは一般的にオープンソースではなく、GitHub上のプロジェクトのほとんどは非常にシンプルなデモであるため、どれを選ぶか迷ってしまうのです。

今日は、かなり優れていると思う React オープンソースプロジェクトのリストをいくつかまとめました。

Jiraクローン

リポジトリ: https://github.com/oldboyxx/jira_clone

GitHub スター: 8.6K

これはReact上に構築されたJira風のプロジェクトで、フロントエンド全体はReact Hooksを使用して実装されています。その他の主な特徴は以下のとおりです。

 タイプスクリプト
タイプORM
 ポストグレ

フロントエンドでカスタム Webpack 構成を使用する
Cypress ベースのエンドツーエンドテスト

作者は、スタイル付きコンポーネントとグローバルスタイルのハイブリッドアプローチも使用しており、外観は Jira と非常に似ています。

RealWorld 別名コンジット

リポジトリ: https://github.com/gothinkster/react-redux-realworld-example-app
GitHub スター: 5.3K
プレビュー: https://react-redux.realworld.io/

Thinkster の RealWorld は、同じアプリケーション (Medium.com のクローンである Conduit) を 24 を超える異なる言語とフレームワークで再実装したもので、React/Redux バージョンです。

これは create-react-app 上に構築されており、ルーティングには react-router を使用し、状態管理には Redux を使用し、スタイルの記述には classNames を使用し、リモートデータの要求には superagent を使用します。

リアルワールドアプリ

リポジトリ: https://github.com/cypress-io/cypress-realworld-app
GitHub スター: 3.7K

Real World Appは、Cypressを使用したアプリケーションのエンドツーエンドテストに最適なデモプロジェクトです。リポジトリにはサンプルデータが含まれており、自動テストとアプリケーションはどちらもすぐに実行できます。

これは create-react-app 上に構築され、TypeScript で記述され、Express バックエンドが付属し、UI/コンポーネントライブラリとして Material UI を使用し、フォームには Formik を使用し、ルーティングには react-router を使用します。

ホスピタルラン

リポジトリ: https://github.com/HospitalRun/hospitalrun-frontend
GitHub スター: 6.5K

HospitalRunは、成熟した電子医療記録（EHR）および病院情報システム（HIS）のWebアプリケーションです。本格的なOSSソリューションです。TypeScriptとReactで記述され、SCSSを使用してスタイル設定されています。ほとんどのコンポーネントは`components`パッケージに格納されています。

シムルグ

リポジトリ: https://github.com/bbc/simorgh
Githubスター: 751
プレビュー: https://astexplorer.net/

SimorghはBBC（そう、中国を常に中傷するニュースサイト）向けのReact SPAで、現在世界中の何百万人ものコンテンツクリエイターにサービスを提供しています。BBCワールドサービスニュースのすべてのウェブサイトに段階的に展開されています。

型チェックには PropTypes、ユニットテストには Jest と Enzyme (カバレッジ 98%)、エンドツーエンドテストには Cypress、スタイルの記述には styled-components、サーバー側レンダリングには Express を使用します。

ASTエクスプローラー

リポジトリ: https://github.com/fkling/astexplorer
GitHub スター: 4.8K

AST Explorer は、抽象構文ツリーを生成するためのオンラインツールです。

これは長年にわたり継続的に開発されてきたプロジェクトの好例であり、試してみる価値のあるReactプロジェクトです。型チェックにはPropTypes、状態管理にはReduxを使用しています。

TypeScript/Flowのような凝った機能は見当たりませんが、コードにはしっかりとコメントが付けられており、多くのコーディングテクニックが明確に示されています。さらに、クラスコンポーネントは徐々にHooksに移行しています。

エクスカリドロー

リポジトリ: https://github.com/excalidraw/excalidraw/
GitHub スター: 31.2K

Excalidraw は私が使用しているオンライングラフィック描画ツール (手描きスタイル) です。

これは TypeScript + React Hooks で記述され、SCSS を使用してスタイル設定されています。

スペクトラム

リポジトリ: https://github.com/withspectrum/spectrum
GitHubスター: 10.6K

Spectrumは、ライブチャットアプリケーションとフォーラムの機能を組み合わせることを目的としたコミュニティウェブサイトでした。2017年初頭から活発に開発が進められ、2018年後半にGitHubに買収されました。

Spectrum は、RethinkDB を使用してクエリをリアルタイムで更新したり、サーバーレンダリングや GraphQL (いずれも当時としては非常に先進的なテクノロジーでした) を使用したりしていたため、初期の頃は非常に興味深いものでした。

コードベースでは、型チェックに Flow、データ取得に Apollo (GraphQL)、状態管理に Redux、サーバーレンダリングに Express が使用され、多数のカスタム React フックが特徴です。

セントリー

リポジトリ: https://github.com/getsentry/sentry
GitHub スター: 31.5K

Sentryはオープンソースのフロントエンド例外監視ツールです。バックエンドはDjango、フロントエンドはTypeScriptとReact、スタイル管理はEmotion、ルーティングはreact-router、状態管理はReduxで実装されています。

グラファナ

リポジトリ: https://github.com/grafana/grafana
GitHubスター: 50.2K

これは、TypeScript で記述され、状態管理に Redux を使用して、AngularJS から React に移行するプロジェクトです。

ゴーアラート

リポジトリ: https://github.com/target/goalert
GitHub スター: 1.7K

GoAlert は、オープンソースのオンコールスケジューラおよび通知サービスです (PagerDuty や Opsgenie に似ています)。

バックエンドは Go で実装されており、データ取得には Apollo (GraphQL)、ルーティングには react-router、状態管理には Redux、エンドツーエンドのテストには Cypress、コンポーネントのスタイル設定には Material UI、スタイルの記述にはネイティブ CSS が使用されています。

やっと

参考リンク: https://maxrozen.com/examples-of-large-production-grade-open-source-react-apps

DUICUO