8つのReact.jsプロジェクトのアイデアを実行して学習を開始するのに役立ちます

学ぶための最良の方法の1つは行うことです。しかし、多くの場合、開発者は「何を構築すればよいか」という大きな問題に苦しんでいます。

ここでは、プロジェクトの概要とレイアウトのアイデアを含む8つのプロジェクトのアイデアを紹介します。これにより、学習を開始できます。

  • ビジネスと実世界:地図統計ダッシュボード
  • 楽しくて面白い:楽器
  • パーソナル&ポートフォリオ:ブログ
  • 生産性:ノートブック
  • パズルとゲーム:スペースインベーダー
  • ツールとライブラリ:フレームワークのテーマ
  • プロジェクトアドオン:Webmentions
  • クローン:Product Hunt

これは、React&StaticWeb用の無料の電子ブック50プロジェクトのプレビューです。50reactprojects.comで、これら8つを含む50のプロジェクトアイデア全体を見つけることができます。

マップ統計ダッシュボード

カテゴリ:ビジネスと実世界

COVID-19に関する統計と地理情報を表示するマップダッシュボードを作成します。

簡単な

世界的大流行に対処するということは、コロナウイルスのようなウイルスが地理的な場所に基づいて世界に異なる影響を与えることを意味します。

各国の統計の内訳が記載された地図を用意しておくと、どの国が最も影響を受けているかなどを判断できる便利な方法です。

レベル1

国ごとの統計を表示する最も簡単な方法は、その国の横にある各国の統計を参照できるマップを用意することです。

disease.shコロナウイルスAPIを使用して、COVID-19の症例数とともに、各国の地図にマーカーを追加するマッピングアプリを作成します。

レベル2

各国の統計があると便利ですが、それらの統計を全世界の症例数と比較できると便利かもしれません。

世界中のCOVID-19症例の数と、APIからの他の有用な統計を表示する統計ダッシュボードを追加します。

レベル3

現在の統計を取得することは、世界の現在の状態を理解するための良い方法ですが、それは歴史的にどのように比較されますか?

履歴データAPIを使用して、ウイルスの増殖と拡散のコンテキストを提供するグラフをダッシュ​​ボードに表示します。

やること

  • 新しい地図アプリを作成する
  • APIの国のデータを取得する
  • マップにマーカーを追加する
  • マーカーに統計を追加する
  • APIグローバルデータを取得する
  • 統計ダッシュボードを作成する
  • グローバル統計を追加する
  • API履歴データを取得する
  • マップにグラフを追加する

ツールボックス

  • Open Disease Data API(disease.sh)
  • React Leaflet(react-leaflet.js.org)
  • Gatsby Leaflet Starter(github.com)

チュートリアル

  • ギャツビーとリーフレット(freecodecamp.org)と反応してコロナウイルス(COVID-19)ダッシュボードと地図アプリを作成する方法
  • Gatsby(freecodecamp.org)を使用してコロナウイルス(COVID-19)の症例統計をReactマップダッシュボードに追加する方法
  • React Leaflet(egghead.io)を使用したマッピング

インスピレーション

  • ジョンズホプキンス大学(JHU)のシステム科学工学センター(CSSE)によるCOVID-19ダッシュボード(coronavirus.jhu.ed)
  • コロナウイルス(COVID-19)ダッシュボードデモ(coronavirus-map-dashboard.netlify.app)

レイアウトのアイデア

楽器

カテゴリ:楽しくて面白い

キーボードで音楽を再生するために使用できるインタラクティブなピアノを作成します。

簡単な

誰もが楽器を所有する贅沢を持っているわけではありませんが、おそらくそれらの人々はラップトップ、電話、またはタブレットを持っています。ピアノを持つことは、以前に機会がなかったとしても、人々が音楽を演奏できるようにするための強力な方法です。

レベル1

ブラウザとWebオーディオAPIを使用して、組み合わせると実際に音楽のように聞こえるサウンドを作成できます。

クリックすると音階の音を鳴らすボタンのセットを作成します。

レベル2

これまで誰もが楽器を演奏したことはありませんが、ピアノのような楽器のコンセプトとインターフェースは、一般的にボタンの束よりも直感的です。

ボタンをクリックするか、物理キーボードを使用して機能するボタンを使用して、ピアノのレイアウトを作成します。

レベル3

ブラウザのスペースには限りがあるかもしれませんが、電気キーボードがいくつかの追加の効果で作成できる可能性のあるさまざまな音符、音階、および音があります。

オンに切り替えたときにノートのサウンドを変更するエフェクトトグルを作成します。

やること

  • ボタンを作成する
  • クリックすると音が鳴る
  • 音階に音符を配置する
  • ピアノのレイアウトを作成する
  • キーボードイベントを設定する
  • エフェクトレイアウトを作成する
  • オーディオエフェクトを切り替えます

ツールボックス

  • React HotKeys(github.com)

チュートリアル

  • Reactフックを使用したピアノの構築(dev.to)
  • Vanilla JavaScript(freecodecamp.org)を使用してピアノキーボードを作成する方法
  • tone.jsでピアノを作ろう!(dev.to)
  • たった1kbのJavaScriptでピアノを作った方法(frankforce.com)

インスピレーション

  • Reactギター(react-guitar.com)

レイアウトのアイデア

ブログ

カテゴリ:パーソナル&ポートフォリオ

キャリアの経験やプロジェクトを共有するために使用できるブログを作成します。

簡単な

どんなキャリアでも、あなたの経験を共有するブログを持つことは、あなたが取り組んでいることを人々に知らせ、他の人があなたの経験から学ぶのを助ける良い方法です。

これは、学んだことを補強して、将来参照できるようにする方法でもあります。

レベル1

経験を共有できるようにするには、新しいコンテンツを作成し、既存のコンテンツを管理できるWebサイト構造が必要です。

これを行う1つの方法は、新しいページを作成して投稿を表示するためにWebサイトが提供するマークダウンファイルを作成することです。

コンテンツソースとしてマークダウンファイルを使用してブログを作成します。

レベル2

マークダウンファイルにコンテンツを含めることは静的コンテンツを管理するための良い方法ですが、投稿を作成または編集するたびにコードを編集する必要がない場合があります。

新しいコンテンツを追加したり、既存のコンテンツを編集したりできるコンテンツ管理システムを、優れたユーザーインターフェイスと統合します。

レベル3

ブログでコードを共有している場合、HTMLは、コードを読みやすい方法でフォーマットするのに役立つコードとpreタグをネイティブにサポートします。ただし、読みやすさの向上に役立つ構文の強調表示は含まれていません。

コードブロックを読みやすくするシンタックスハイライトを統合します。

やること

  • ブログを作成する
  • 最初の静的コンテンツを追加する
  • ソース静的コンテンツ
  • CMSを統合する
  • コンテンツにコードを追加する
  • 構文の強調表示を追加

ツールボックス

  • Netlify CMS(netlifycms.org)
  • Prism.js(prismjs.com)

チュートリアル

  • Netlify CMS(gatsbyjs.org)でギャツビーブログを作成する
  • GatsbyとMDX(freecodecamp.org)を使用してゼロからコーディングブログを構築する方法

インスピレーション

  • Gatsby Netlify CMSスターター(gatsby-netlify-cms.netlify.app)

レイアウトのアイデア

ノート

カテゴリ:生産性

ノートブックアプリを作成して、メモのグループを追加、管理、整理します。

簡単な

メモを取ることは、自分の考えを追跡したり、会議からの重要なポイントを覚えたりするための優れた方法です。それらを簡単に管理および整理できることは、後でそれらを見つけるために重要です!

レベル1

ノートブックの最初の要件は、メモを取ることができることです。これは開始するのが非常に簡単な場合があります。実際には、書き込んだ内容を収集して後で使用できるように保存する何らかの入力が必要です。

フォームを作成して新しいメモを追加し、リストに表示します。

レベル2

後でメモを見つけるために、それらのメモを整理する方法とそれらを検索する方法が必要です。これには、カテゴリやタグ付けシステムの追加、および検索を行うためのUIが含まれます。

メモにタグを付けたり分類したりする機能と、メモを検索するための入力を追加します。

レベル3

私たちがそれを認識しているかどうかにかかわらず、私たちは自分の考えと、さらに重要なことに私たちのメモとの間のつながりを見つけることができます。

Roam Researchが示唆するメモのリンクを追加して、思考のネットワークを作成します。

やること

  • フォームを作成する
  • 新しいメモを保存する
  • リストノート
  • タグまたはカテゴリを追加する
  • ノート検索を追加
  • ノートネットワークを追加

ツールボックス

  • ギャツビーブレインテーマ(github.com)
  • Fuse.js(fusejs.io)

チュートリアル

  • Fuse.js(freecodecamp.org)を使用してReactアプリに検索を追加する方法

インスピレーション

  • フォーム(foambubble.github.io)
  • ロームリサーチ(roamresearch.com)
  • ギャツビーガーデンのテーマ(github.com)

レイアウトのアイデア

スペースインベーダーズ

カテゴリ:パズル&ゲーム

スペースインベーダーの宇宙船シューティングゲームを作成して、敵の船の複数の波を撃ちます。

簡単な

スペースインベーダーは、エイリアンの侵略に対抗して宇宙船に乗せるアーケードクラシックです。あなたがそれらを撃墜しようとすると、彼らは反撃し、あなたが攻撃を受ける前にあなたは限られた量の保護しか持っていません。

レベル1

ゲームの核となる部分は、武器でたくさんのエイリアンを攻撃しようとして宇宙船を動き回ることです。あなたの一人がいる間、彼らの多くがいます。

動き回ることができる宇宙船を作成し、動いていないエイリアンを撃ちます。

レベル2

ゲームをトリッキーにするのは、エイリアンが絶えず動いているということです。彼らがプレイエリアの端にぶつかるたびに、彼らはドロップダウンしてスピードを上げ、あなたの船に近づきます。

プレイエリアで左右に移動するエイリアンに動きを追加します。エイリアンが片側に到達するたびに、レベルを下げる必要があります。また、特定の間隔で速度を上げる必要があります。

レベル3

あなたはあなた自身ですが、幸いにもあなたはいくらかの保護を得ることができます。あなたは彼らが続く間あなたを保護するのを助けるあなたが後ろに隠すことができる盾を持っています。

限られた量のダメージを受けることができるプレイヤーの宇宙船の前にいくつかの盾を作成します。

やること

  • 新しいゲームを作成する
  • 静的エイリアンを作成する
  • プレイヤーの宇宙船を作成する
  • 宇宙船のコントロールを追加する
  • 宇宙船の武器を追加する
  • エイリアンのダメージを設定する
  • エイリアンを撃ち返す
  • エイリアンを動かす
  • エイリアン間隔を追加
  • シールドを追加する

チュートリアル

  • 7つのゲームを作成してJavaScriptを学ぶ(freecodecamp.org)

インスピレーション

  • スペースインベーダー(codepen.io)

レイアウトのアイデア

フレームワークのテーマ

カテゴリ:ツールとライブラリ

TailwindCSSフレームワークを使用してプロジェクトを設定するGatsbyテーマを作成します。

簡単な

開発者として、私たちは通常、新しいプロジェクトを作成するたびに、同様の手順を実行する必要があります。しかし、テーマのようなツールを使用すると、これらのステップを抽象化し、新しいプロジェクトで機能する使いやすい方法でパッケージ化できます。

レベル1

Gatsbyテーマはプラグインのようなシステムであり、Gatsbyパイプラインを利用して、npmでパッケージとして機能を共有できます。

これにより、Gatsbyサイトで行うことを実際に行うための扉が開かれますが、Gatsbyサイトで再利用できるようになります。

新しいGatsbyテーマを作成します。このテーマを使用すると、追加されたプロジェクトに新しいスタイルガイドページが作成されます。

レベル2

テーマの目標は、ページを作成することだけでなく、生産性を高める機能を追加することです。これには、フレームワークやプロジェクト構成などが含まれます。

追加したプロジェクトがそのフレームワークを使用できるようにするCSSフレームワークをGatsbyテーマに追加します。

レベル3

テーマはツールとしてのみ優れている場合もあれば、意見を述べることが役立つ場合もあります。CSSフレームワークに便利な機能を追加する1つの方法は、ストックコンポーネントを作成することです。

テーマが追加されたプロジェクトで使用できるCSSフレームワークを使用して、再利用可能なReactコンポーネントを作成します。

やること

  • 新しいテーマを作成する
  • サンプルプロジェクトに追加
  • 新しいスタイルのページを作成する
  • CSSフレームワークを追加する
  • 例でCSSを使用する
  • コンポーネントを作成する
  • コンポーネントを使用する

ツールボックス

  • ギャツビーテーマ(gatsbyjs.org)
  • テールウィンド(tailwindcss.com)

チュートリアル

  • テーマの作成(gatsbyjs.org)
  • Tailwind CSSとは何ですか?WebサイトまたはReactアプリに追加するにはどうすればよいですか?(freecodecamp.org)

インスピレーション

  • Gatsby Tailwindテーマ(github.com)

レイアウトのアイデア

Webmentions

カテゴリ:プロジェクトアドオン

TwitterとWebサイトの相互作用を示すWebサイトにWebmentions統合を追加します。

簡単な

社会的相互作用は、私たちが書いているトピックにより多くの聴衆と会話をもたらすための影響力のある方法です。

ウェブサイトに何かを掲載することは、インタラクションが、人々が参加したいと思うように刺激したり、参加できるように感じさせたりするのに役立つことを示しています。

レベル1

Webmentionsを利用するには、情報を提供するメタタグを使用してWebサイトを構成する必要があります。

適切なメタタグをWebサイトに追加し、webmention.ioでその使用を検証します。

レベル2

Webmentions APIは、WebサイトのURLからソーシャルインタラクションの接続をプログラムで確認する方法です。それはあなたが相互作用のタイプとその人のプロフィールアバターさえも得ることを可能にします。

WebサイトをWebmentionsに接続し、ソーシャルインタラクションのリストをブログ投稿ページに追加します。

レベル3

Webサイトにすべてのインタラクションが表示されているので、会話に参加する簡単な方法があるはずです。

クリックすると、ページへのリンクを含むツイートを作成するソーシャルリンクを追加します。

やること

  • ウェブサイトにメタタグを追加する
  • メタタグを検証する
  • Webmentionに接続する
  • ソーシャルをBridgyに接続する
  • インタラクションを一覧表示する
  • ツイートボタンを追加

ツールボックス

  • Webmention.io(webmention.io)
  • Bridgy(brid.gy)
  • GatsbyプラグインWebmention(github.com)

チュートリアル

  • Indieweb pt2:EleventyでのWebmentionsの使用(mxb.dev)
  • クライアントサイドWebmentions(swyx.io)
  • Gatsby(knutmelvaer.no)でWebmentionsを使い始める
  • GatsbyプラグインWebmentionsの構築(christopherbiscardi.com)

インスピレーション

  • KnutMelvær(knutmelvaer.no)
  • Swyx(swyx.io)

レイアウトのアイデア

製品ハント

カテゴリ:クローン

人々が評価付きの新製品を投稿できるようにするProductHuntクローンを作成します。

簡単な

携帯電話であろうとラップトップで使用するアプリであろうと、私たちは皆製品のために生きています。

世界にはたくさんの製品がありますが、良い点と悪い点をナビゲートするのは難しい場合があります。Product Huntのようなツールは、新しいツールについて学び、他の人から反応やレビューを得るプラットフォームを提供します。

レベル1

新製品について学ぶ上で最も重要な部分は、製品自体です。製品とは何か、どのように見えるか、どのように機能するかを知りたいのです。

タイトル、写真、説明を含む新しい製品をWebサイトに追加できるページを作成します。

レベル2

商品について学ぶとき、レビューは商品を購入する前に信頼できる方法です。それは私たちがお金や時間を費やそうとしていることに自信をつけるのに役立ちます。

人々が各製品に関するレビューを追加する機能を追加します。

レベル3

人々は製品を愛しているので、世界中にたくさんの製品があります。手動で並べ替えるには多すぎるため、検索して参照するメカニズムが必要です。

製品を検索し、カテゴリ別に閲覧する機能を追加します。

やること

  • 製品のウェブサイトを作成する
  • データベースを作成する
  • 製品フォームを追加する
  • データベースに製品を追加する
  • ページの製品をリクエストする
  • レビューフォームを追加
  • データベースにレビューを追加する
  • 製品にレビューを追加する
  • 製品検索を追加
  • 製品カテゴリを追加する

ツールボックス

  • ハスラ(hasura.io)

チュートリアル

  • HasuraとNext.js(logrocket.com)を使用したProductHuntクローンアプリの構築
  • React(freecodecamp.org)を使用してProductHuntの基本バージョンを構築する方法

レイアウトのアイデア

その他のプロジェクト

より多くのプロジェクトのアイデアが必要な場合は、Reactと静的Webの50のプロジェクトをチェックしてください!

何を作ればいいのか自問するのはやめましょう。 50reactprojects.comで無料でダウンロード

Javascript、UX、その他の興味深いものについては、私に従ってください!

  • ?Twitterでフォローミー
  • ?️私のYoutubeを購読する
  • ✉️私のニュースレターにサインアップ