ポートフォリオに必要な5つのReactプロジェクト

これで作業が完了し、Reactライブラリをしっかりと理解できるようになりました。

その上、JavaScriptを十分に理解しており、その最も役立つ機能をReactコード内で使用できるようにしています。

あなたは大きな進歩を遂げました...しかし今、あなたは何をしますか?

Reactの基礎を知ることとプロの開発者になることの間のギャップをどのように埋めますか?

多くの開発者は、Reactやその他のJavaScriptライブラリを学習するこの中間段階に達すると、この問題に遭遇します。彼らは、ライブラリ自体のほとんどと、それを効果的に使用するためのJavaScriptを知っていますが、次のステップを知りません。

アプリを構築する必要がある理由

Reactの基本を学んだ後は、習得したスキルを使って快適にアプリを作成する必要があります。このプラクティスは、効果的なReact開発者であるための核心にあります。つまり、自分でアプリを構築する方法を知り、Reactエコシステムで適切なツールを利用してそれを行う方法を知っています。

しかし、開発者としての能力をレベルアップするために、Reactでどのアプリを構築する必要がありますか?

この記事では、基本的なtodoアプリの後に構築することを検討する必要がある5種類のアプリについて説明します。アプリを構築することの大きな利点は、アプリをデプロイすると、雇用主に専門知識を示す強力で即時の方法として、アプリをポートフォリオにリンクできることです。

アプリの種類ごとに、インスピレーションとして使用できる人気のある例、各機能を構築するために推奨するツール、およびReactを使用して個人的に作成したアプリの短いデモについて説明します。

Reactでアプリの構築を開始する方法

React自体を学習するのとは異なり、関連する概念を深く掘り下げるために数十の記事を見つけることができますが、アプリを構築するプロセスは、多くのガイダンスなしで主に自主的な活動です。

自分でアプリの作成を開始する場合は、アプリの作成の基本を説明している記事を検索して、アプリが提供するアプリのソースコードを詳しく調べることをお勧めします。コード自体を読むプロセスでさえ、あなたをより良い開発者にするでしょう。

これらの例が自分で構築するには難しすぎるように見える場合は、React開発者として知っていることを覚えておいてください。つまり、アプリケーションを構成可能なコンポーネントに分解します。すべてのアプリケーションは、コンポーネントごとに、ピースごとに構築する必要があります。一度に1つの機能を構築することに焦点を当てます。練習することで、各機能に必要なツールと、一般的なアプリの構築の背後にある一般的なパターンをよりよく理解できるようになります。

注:このような実際のアプリケーションの構築を開始したときに私が抱いた誤解の1つは、必要な機能を取得するために、NodeまたはPythonを使用してバックエンド/ API全体を構築する必要があるというものでした。あなたはそうする必要はありません。Firebase、AWS Amplify、Hasuraなどの強力なサーバーレステクノロジーを調べてください。これらのテクノロジーを使用すると、バックエンドを自分で作成してデプロイする必要がなく、すぐに使用できます。生産性を高め、時間を節約するツールに投資します。

ソーシャルメディアアプリを構築する

ポートフォリオに追加するアプリを1つだけ推奨する必要がある場合、それはソーシャルメディアアプリになります。Twitter、Facebook、Instagramは非常に洗練されており、ユーザーの関心を維持するための機能が増え続けています。それに加えて、それはそれがどのように機能するべきかに関してあなたがおそらく最もよく知っている種類のアプリです。

ほとんどすべてのソーシャルメディアアプリに共通する機能がいくつかあります。

  • ユーザーがテキストやメディアファイルを使用して投稿する機能、
  • それらの投稿のライブフィード、
  • 他のユーザーが投稿を高く評価したりコメントしたりできるようにする
  • ユーザー認証と同様に。

そして、それを理解したら、ユーザーごとにプロファイルを追加して、アカウントをパーソナライズしたり、フォローしているユーザーを管理したりできます。

アプリの例: Instagram、Twitter、Snapchat、Reddit

利用する技術:

  • React AppまたはNext.jsを作成して、投稿、いいね、メッセージの動的UIを作成します
  • リアルタイムデータ用のFirebase、AWS Amplify、またはHasura(サブスクリプションでGraphQLを使用)
  • 通知用のAWSLambdaやFirebaseFunctionsなどのサーバーレス関数
  • 写真やビデオをアップロードするためのCloudinaryまたはFirebaseストレージ

Eコマースアプリを構築する

お気に入りのサイトをいくつか選んでください。小さな店先であっても、少なくとも1つにはeコマースアプリが埋め込まれていることを保証します。Eコマースアプリはいたるところにあり、開発者としてのキャリアのある時点でアプリを作成するように求められることは間違いありません。

アマゾンのような印象的で大規模なeコマースプラットフォームを構築することは魅力的ですが、より小さく、より焦点を絞ったものに取り組むことをお勧めします。

すべての人にすべてのものを提供する市場の代わりに、あなたが興味を持っている業界に行きましょう。たとえば、家庭用品が好きな場合は、Crate&BarrelまたはWilliams-Sonomaがサイト用に構築したものを確認できます。

製品とは別に、eコマースアプリは消費者にサービスを提供する場合があります。ローカルで提供されるサービスの場合は、インタラクティブマップをアプリに追加して、サービスプロバイダーと顧客がお互いの場所を知ることができるようにすることができます。UberEatsやDoordashなど、食品を注文する人の場所を必要とする食品配送アプリケーションが思い浮かびます。

物理的であろうと仮想的であろうと、販売されているものに関係なく、すべてのeコマースアプリは、製品またはサービスの詳細を含むストアフロントで構成されます。ユーザーが一度に複数の商品を購入できる場合は、ユーザーが購入したい商品を管理できるショッピングカートが必要です。

最後に、すべてのeコマースアプリには、ユーザーが匿名で、または認証後に製品を購入できるチェックアウトプロセスが必要です。

人気のある例: Airbnb、Uber、UberEats、Doordash、Etsy、Udemy

利用する技術:

  • ストアフロント用のReactAppまたはGatsbyを作成し、商品を表示します
  • 支払い処理を処理するためのパッケージreact-stripe-elementsを使用したスト​​ライプ
  • チェックアウトプロセスを処理するNetlify / AWSLambdaのようなサーバーレス機能
  • 超高速の製品検索のためのアルゴリア
  • カートを簡単に作成し、カート製品を管理するためのSnipcart

エンターテインメントアプリを作成する

これは、すべてのカテゴリの中で最も広いものです。エンターテインメントとはどういう意味ですか?特定の種類のメディアに焦点を当てたアプリ。これは、いくつか例を挙げると、映画、ポッドキャスト、または音楽である可能性があります。

これのいくつかの素晴らしい例は、それぞれ、Netflix、Audible、SoundcloudまたはSpotifyです。このカテゴリにアートやデザインを含めると、BehanceやDribbbleなどのサイトをリストに追加できます。

このカテゴリで興味深いのは、多くのエンターテインメントアプリがソーシャルメディアアプリに隣接していることです。たとえば、短くて想像力豊かな動画を特徴とするTiktokのようなアプリは、高いユーザーエンゲージメントによって推進されています。YouTubeのような別のアプリは、いいね、コメント、サブスクリプションによるユーザーインタラクションを中心としています。

どのタイプのメディアやエンターテインメントに最も興味があるかを考え、ユーザーがログインして好きなコンテンツを保存できるシンプルなプラットフォームを構築できるかどうかを確認してください。その後、コメントを追加したり、プラットフォーム上の他のユーザーとコンテンツを共有したりできるようにするソーシャル要素の追加を検討します。

人気のある例: YouTube、Netflix、Audible、Spotify、Tiktok

利用する技術:

  • React App、Next.js、またはGatsbyを作成して、アプリのUIを作成します
  • npmパッケージreact-メディアを再生するためのプレーヤー
  • メディアアップロード用のCloudinaryまたはFirebaseストレージ
  • メディアを名前で検索するためのアルゴリア(オーディオトラック、ビデオ、映画など)

メッセージングアプリを構築する

メッセージングアプリは巨大です。お使いの携帯電話にWhatsAppやViberなどの無料のメッセージングサービスがあるか、FacebookMes​​sengerなどのソーシャルメディアプラットフォームに組み込まれている可能性があります。インスタントメッセージングを備えたインターコムのようなサービスもWebアプリとして利用できるため、企業はユーザーに即時のカスタマーサポートを提供できます。

すべてのメッセージングアプリは、メッセージがリアルタイムで送信される2人以上の人との会話で構成されます。ソーシャルメディアアプリと同様に、FirebaseやHasuraなど、WebSocketを介してデータを転送し、メッセージを会話にすぐに表示するサービスをお勧めします。

メッセージングアプリの大部分は、モバイルデバイスまたはタブレット上にあります。これが初めてのアプリのクローンではない場合、これはWebを超えて、ReactNativeを使用してモバイルアプリを構築する絶好のチャンスです。さらに良いことに、React NativeWebのようなパッケージと同時にWebおよびモバイルメッセージングアプリを構築できます。

人気のある例: WhatsApp、Viber、Discord、Messenger、Slack

利用する技術:

  • ReactNativeまたはReactNative Webを使用して、モバイルアプリまたはハイブリッドアプリ(Web +モバイル)として構築します
  • リアルタイムでメッセージを送信するためのFirebase、AWS Amplify、またはHasura(GraphQLサブスクリプションを使用)
  • 画像または動画コンテンツを含むメッセージを送信するためのCloudinaryまたはFirebaseストレージ
  • ユーザーがメッセージに含めるための洗練されたSlackのような絵文字ピッカー用のnpmパッケージemoji-mart

生産性アプリを構築する

基本的な生産性アプリのチュートリアルがたくさんあることを考えると、これはおそらく始めるのに最も簡単なタイプのアプリです。私が生産性アプリについて話すとき、私はメモを取るアプリ、チームを管理するためのアプリ、およびタスクリストを指します。一般的に言って、特定のタスクを達成したり、生産性を高めたりするのに役立つものは何でも。

生産性アプリを最初に構築することの優れている点は、その機能の多くが比較的単純であるため、アプリ構築の優れた入門書を提供することです。

テキストエディタなどの単純なものから始めて、マークダウンを使用してフォーマットされたテキストを簡単に記述し、それを拡張することができます。次に、テキストを個別のファイルとしてコンピューターに保存する機能を追加します。その後、そのマークダウンをHTMLとしてエクスポートして、フォーマットされた電子メールを書き込む機能。

生産性アプリの作成を開始するには、アプリが1日のスケジュールを簡単にするために必要な機能を尋ね、そこから始めます。

人気のある例: Todoist、Notion、Thingsなど。

利用する技術:

  • Web用のReactアプリまたはモバイル用のReactNativeを作成する
  • npmパッケージreact-markdownを使用して、アプリのUIにマークダウンを表示します
  • ノートにコードを書くためのnpmパッケージreact-codemirror2
  • npmパッケージreact-draggableで、クリックしてドラッグすることでリストコンテンツを並べ替えることができます

アプリ構築の旅に頑張ってください。次の記事でお会いしましょう。

JSマスターになりたいですか?2020JSブートキャンプに参加する

2020JSブートキャンプに参加する

フォロー+こんにちは!?Twitter•codeartistry.io