学習するための最良の方法の 1 つは、実際にやってみることです。 しかし、しばしば開発者は、”何を構築すべきか?” という大きな疑問と格闘します。

ここでは、プロジェクトの概要とレイアウトのアイデアを含む、8 つのプロジェクトのアイデアを紹介し、実際にやってみることで学習を開始します。 Map Statistics Dashboard

Fun & Interesting: 楽器

Personal & Portfolio: Blog

Productivity: ノートブック

パズル & ゲーム。 スペースインベーダー

ツール & ライブラリ: フレームワーク テーマ

Project Add-Ons: Webmentions

Clones: Product Hunt

これは、無料電子書籍50 Projects for React & the Static Webのプレビューです。 50reactprojects.com.

Map Statistics Dashboard

では、この8つを含む50のプロジェクトの全アイディアを見ることができます。 ビジネス & 実世界

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

Brief

世界的な流行病に対処することは、コロナ ウイルスなどのウイルスが、地理的位置に基づいて世界に異なる影響を及ぼすということを意味します。

各国の統計の内訳を示す地図があれば、どの国が最も影響を受けたかなどを判断するのに便利です。

レベル 1

国ごとの統計を見る最も簡単な方法は、各国の統計がその国の横に表示される閲覧可能な地図があることです。
disease.sh コロナウイルス API を使用して、各国の地図に COVID-19 感染者の数とともにマーカーを追加する地図アプリを作成することです。

レベル2

各国の統計は有用ですが、その統計を世界全体の症例数と比較できると便利かもしれません。
世界中の COVID-19 症例数および API からの他の有用な統計を表示する統計ダッシュボードを追加してください。

レベル 3

現在の統計を取得することは、世界の現在の状態を理解する良い方法ですが、歴史的に比較するとどうでしょうか。
履歴データ API を使用して、ウイルスの成長と広がりにコンテキストを与えるグラフをダッシュボード上に表示します。

To Do

• 新しい地図アプリを作成する
• Fetch API countries data
• Add markers to map
• Add statistics to markers
• Fetch API global data
• 統計ダッシュボードの作成
• グローバル統計の追加
• Fetch API履歴データ
• マップへのグラフ追加

ツールボックス

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

Tutorials

• How to create a Coronavirus (COVID-19) Dashboard & Map App in React with Gatsby and Leaflet (freecodecamp.com)
  

  Gatsby Leaflet (Gatsby.com)

Tutorials ()

Gatsby Leaflet Starter (github.com)org)

• GatsbyでReactマップダッシュボードにコロナウイルス（COVID-19）の症例統計を追加する方法 (freecodecamp.org)
• React Leafletでマッピング (egghead.jp)

React Leafletでマッピング (freecodecamp.jp)

• Gatsbyでコロナウイルス（COVID-19）の症例統計を追加 (freecodecamp.jp)io)

Inspiration

• COVID-19 Dashboard by the Center for Systems Science and Engineering (CSSE) at Johns Hopkins University (JHU) (coronavirus.Inc.)jhu.ed)
• Coronavirus (COVID-19) Dashboard Demo (coronavirus-map-dashboard.netlify.app)

レイアウト案

Musical Instrument

カテゴリー.Category.It.Map(Covid.Dashboard)

レイアウト案は、以下のとおりです。 楽しい & 面白い

キーボードを使って音楽を演奏できるインタラクティブなピアノを作成する。

概要

誰もが楽器を所有しているわけではありませんが、おそらくその人たちはノートパソコン、電話、タブレットを持っています。

レベル 1

ブラウザーと Web オーディオ API を使用して、一緒にすると実際に音楽のように聞こえる音を作成することができます。

Level 2

誰もが楽器を演奏したことがあるわけではありませんが、ピアノのような楽器のコンセプトとインターフェイスは、一般的にボタンの束よりも直感的です。
ボタンをクリックするか物理キーボードを使用するかのいずれかで動作するボタンを使用してピアノのレイアウトを作成する。

Level 3

ブラウザのスペースは限られていますが、電子キーボードにはさまざまなノート、スケール、サウンドがあり、いくつかのエフェクトを追加することができます。
トグルをオンにすると音符の音が変化するエフェクトトグルを作成する。

To Do

• ボタンを作成する
• クリックすると音を鳴らす
• 音階で音を並べる
• ピアノのレイアウトを作成する

。

• キーボードイベントの設定
• エフェクトレイアウトの作成
• オーディオエフェクトの切り替え

ツールボックス

• React HotKey（github.Inc.com)

Tutorials

• Building a Piano with React Hooks (dev.to)
• How to Build a Piano Keyboard Using Vanilla JavaScript (freecodecamp.org)
• Building a piano with tone.js! (dev.to)
• How I Made a Piano in only 1kb of JavaScript (frankforce.com)

Inspiration

• React Guitar (react-guitar.com)
• React Guitar (react-guitar.com)com）

Layout Idea

Blog

カテゴリー: 個人的な & ポートフォリオ

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

Brief

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

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

レベル1

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

これを行う1つの方法は、新しいページを作成し、記事を表示するために、Webサイトのソースとなるマークダウンファイルを作成することです。
コンテンツソースとしてマークダウンファイルを使用してブログを作成する。

Level 2

マークダウンファイルにコンテンツを持つことは静的コンテンツを管理するのによい方法ですが、記事を書いたり編集するたびにコードを編集しなければならないようでは困る場合があります。
新しいコンテンツを追加したり、優れたユーザー インターフェイスで既存のコンテンツを編集できるコンテンツ管理システムを統合する。

レベル 3

ブログでコードを共有している場合、HTML はコードを読みやすい方法でフォーマットするためのコードおよび pre タグをネイティブでサポートしています。 しかし、これには可読性を向上させるのに役立つ構文強調表示が含まれていません。
コード ブロックをより読みやすくする構文強調表示を統合します。

To Do

• ブログを作成する
• 最初の静的コンテンツを追加する
• ソース静的コンテンツ
• Integrate CMS
• コンテンツにコードを追加
• シンタックスハイライトを追加

Toolbox

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

Tutorials

• Netlify CMSでギャツビーブログを作る (gatsbyjs.org)
• Gatsby と MDX でゼロから作るコーディングブログ方法 (freecodecamp.com)
• Gatsby でゼロから作るコーディングブログ (freecodecamp.org)

  • 。org)

  インスピレーション

  • Gatsby Netlify CMS Starter (gatsby-netlify-cms.netlify.app)

  レイアウト案

  

  Notebook

  カテゴリー.Category> ブログレイアウト案

Layout Idea

(ギャッツビーネトリーフィケーション) Productivity

Create a notebook app to add, manage, and organize a group of notes.

Brief

Taking notes is a great way to keep track of our thoughts or remember the important takeaways from a meeting.

Taking notes is a great way to keep track of our thoughts or remember the important takeaways.Director: Lichard Lichard Lichard. それらを簡単に管理し、整理できることは、後でそれらを見つけるために重要です！

レベル1

ノートの最初の要件は、メモを取ることができることです。
新しいメモを追加し、リストで表示するフォームを作成する。

Level 2

後でメモを見つけるために、それらのメモを整理する方法とそれらを検索する方法が必要である。

Level 3

私たちが気づいているかどうかにかかわらず、思考と、さらに言えば思考ノート間のつながりを見つけることができ、そこで、思考のネットワークをノートブックに活用することができるのです。

To Do

• Create a form
• Store new notes
• List notes
• Add tags or categories
• Add note search
• Add note network

Toolbox

• Gatsby Brain Theme (github.NET)
• Gatsby Brain Theme (github.NET)
  

  Toolbox

  • Toolbox
    • Gatsby Brain Theme (github.com)
    • Fuse.js (fusejs.io)

    Tutorials

    • How to Add Search to a React App with Fuse.com (fusejs.com)

    Tutorials

    • How to Add Search to a React App with Fuse.comjs (freecodecamp.org)

    Inspiration

    • Foam (foambubble.github.io)
    • Roam Research (roamresearch.jp)
    • Roam Research (roamresearch.com）
    • Gatsby Garden Theme（github.com）

    Layout Idea

    

    Space Invaders

    Category: パズル & ゲーム

    スペースインベーダーの宇宙船シューティングゲームを作成して、敵の船の複数の波を撃つ。 このような場合、「ディアボロス」は、「ディアボロス」を「ディアボロス」と呼びます。

    レベル2

    このゲームを厄介にしているのは、エイリアンが常に移動していることです。 プレイエリアの端にぶつかるたびに下がり、スピードアップして自機に近づいてきます。
    プレイエリアの左右に移動するエイリアンにも動きを加えてください。 エイリアンが片側に寄るたびに一段低くなる。 彼らはまた、一定の間隔でスピードアップする必要があります。

    Level 3

    あなたは自分自身ですが、幸いにもいくつかの保護を得ることができます。 あなたは、彼らが持続する間、あなたを保護するのに役立ちます後ろに隠れることができるシールドを持っています。
    限られた量のダメージを受けることができるプレイヤー宇宙船の前にいくつかのシールドを作成します。

    To Do

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

    チュートリアル

    • 7つのゲーム構築で、JavaScriptを学ぶ (freecodecamp.jp)org)

    Inspiration

    • Space Invaders (codepen.io)

    Layout Idea

    

    Framework Theme

    カテゴリー:Framework ツール & ライブラリ

    Tailwind CSS フレームワークでプロジェクトをセットアップする Gatsby テーマを作成する

    Brief

    開発者として、新しいプロジェクトを作成するときはいつでも、一般的に多くの同様の手順を行う必要があります。 しかし、テーマのようなツールは、これらのステップを抽象化し、どんな新しいプロジェクトにも対応できる使いやすい方法でパッケージ化します。

    レベル 1

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

    これにより、Gatsby サイトで行うことは何でも、どの Gatsby サイトでも再利用できるようになります。
    新しい Gatsby テーマを作成し、使用すると、追加したプロジェクトに新しいスタイルガイド ページが作成されます。
    Gatsby テーマに CSS フレームワークを追加し、追加したプロジェクトでそのフレームワークを使用できるようにします。

    Level 3

    テーマはツールとしてのみ優れていることもありますが、意見を述べることが役に立つこともあります。 CSS フレームワークに有用な機能を追加する方法の 1 つは、ストック コンポーネントを作成することです。
    テーマが追加されたプロジェクトで使用できる CSS フレームワークを使用して、再利用可能な React コンポーネントを作成することです。

    To Do

    • Create a new theme
    • Add to example project
    • Create new style page
    • Add CSS framework
    • Use CSS in example
    • Create components

    Use components

  Toolbox

  • Gatsby Themes（gatsbyjs.org)
  • Tailwind (tailwindcss.com)

  Tutorials

  • Building a Theme (gatsbyjs.org)
  • What is Tailwind CSS and How Can I Add it to my Website or React App? (freecodecamp.org)

  Inspiration

  • Gatsby Tailwind Theme (github.com)

  Layout Idea

  

  ウェブメンテーション

  Category.CSS (GATSBY) プロジェクト アドオン

  Web サイトとの Twitter のやり取りを表示する Webmentions 統合を追加する。

  概要

  Social インタラクションは、私たちが書くトピックに多くの聴衆と会話をもたらすインパクトのある方法です。

  Web サイト上に何かを表示することは、人々が参加したいと思うように刺激したり、人々がその一部になれると感じたりするために、相互作用が役立つことを示しています。

  レベル 1

  ウェブメーションを利用するためには、情報を提供する meta タグで Web サイトが設定されている必要があります。
  Web サイトに適切なメタ タグを追加し、webmention.io でその使用を検証します。

  Level 2

  ウェブメンテーション API は、Web サイトの URL からソーシャル インタラクションでのつながりをプログラムで確認するための方法です。 これにより、相互作用の種類やその人のプロフィール アバターまで取得できます。
  Web サイトを Webmentions に接続し、ブログ投稿ページにソーシャル インタラクションのリストを追加することができます。

  レベル3

  Webサイトにすべてのインタラクションが表示されているので、会話に参加する簡単な方法があるはずです。
  クリックすると、ページへのリンクを含むツイートを作成するソーシャルリンクを追加してください。

  To Do

  • Webサイトにメタ タグを追加する
  • メタ タグを検証する
  • Webmentionに接続する

  。

  • ソーシャルをBridgyに接続する
  • インタラクションを一覧表示する
  • ツイートボタンを追加する

  ツールボックス

  • Webmention.io (webmention.io)
  • Bridgy (brid.gy)
  • Gatsby Plugin Webmention (github.com)

  Tutorials

  • Indieweb pt2.Gatsbyプラグイン
• Clientside Webmentions (swyx.io)
• Getting started with Webmentions in Gatsby (knutmelvaer.no)
• Building Gatsby Plugin Webmentions (christopherbiscardi.com)

Gatsby Plugin Webmentions (nov.com)

Inspiration

• Knut Melvær (knutmelvaer.no)
• Swyx (swyx.com)
• Swyx (knutmelvaer.no)io）

Layout Idea



Product Hunt

Category: Clones

評価付きの新製品を投稿できる Product Hunt のクローンを作成する。

概要

携帯電話やラップトップで使うアプリなど、私たちは皆、製品のために生きているのです。

世の中には大量の製品がありますが、良いものと悪いものの間を行き来するのは難しいかもしれません。

レベル1

新しい製品について学ぶ上で最も重要なことは、製品そのものです。 その製品がどんなもので、どんな見た目で、どのように機能するのかを知りたいのです。
タイトル、写真、説明文を添えて、新しい製品をWebサイトに追加できるページを作成します。

Level 2

製品について学ぶとき、レビューは購入前に製品を信用する方法となります。

レベル3

人々は製品が好きなので、世の中にはたくさんの製品があります。 手作業で分類しようとすると数が多すぎるので、検索して閲覧する仕組みが必要です。
製品を検索し、カテゴリーごとに閲覧する機能を追加してください。

To Do

• 製品サイトを作成する
• データベースを作成する
• 製品フォームを追加する
• 製品をデータベースに追加する
• 製品をページに要求する
• Add レビューフォーム
• レビューをデータベースに追加
• レビューを商品に追加
• 商品検索を追加
• 商品カテゴリーを追加

ツールボックス

• Hasura (hasura.Inc.)io）

Tutorials

• Building a Product Hunt clone app using Hasura and Next.js (logrocket.com)
• How to build a basic version of Product Hunt using React (freecodecamp.com)

Toolbox

• Hasura（hasura.com）

  Layout Idea

  

  More Projects

  If you want more project ideas, check out 50 Projects for React & the Static web!

  Download Free at 50reactprojects.com