あなたが既に反応を聞いたことがないならば、あなたは最もロックの下で生きていそうです.反応は、Facebookによって作成されたJavaScriptライブラリです、それはコンポーネントベースのアーキテクチャを使用して美しい機能のユーザーインターフェイスを作成するために使用されます(我々はそれを2番目で取得します).

ここで私を見つける

Github
Medium
Blog

何が反応するかJS ?

反応は、我々がウェブアプリケーションを構築するためにコードの再利用可能な部分を使うのを許します.反応と他のフロントエンドフレームワークの前に、我々はアプリケーションを構築するために「バニラJavaScript」とjQueryのようなライブラリを使うことに限られていました.これは長い開発サイクルと難しいエラーとバグをキャッチすることを意味します.反応することもできますクロスプラットフォームのモバイルアプリケーションを介してネイティブ(うまくいけば、ネイティブもすぐに来てのチュートリアル)反応を介して作成することができます.反応はUni、Airbnb、Pinterest、InstagramとNetflixを含む複数の大企業によって使用されます.
それらが反応するのに十分な理由がないならば2020 Stack Overflow Developer Survey . 反応する.JSはASPに追いつきます.最も愛され、より重要なのとしてのネットは、雇用主の中で最も望まれているWebフレームワーク技術です.

何を建てるつもりですか。

これは、完全なアプリケーションを構築する方法についてのmultipartシリーズの最初の章です.我々は、我々がポストを加えることができるハッカーNewsクローンを建設していて、ポストを削除して、ポストを捜しています.よく知られて右の音?古典的なCRUDアプリケーション.CRUDに慣れていない人には、次のように定義されています.
作成、読み込み、更新、削除(CRUD)

In computer programming, create, read, update, and delete[ (CRUD) are the four basic functions of persistent storage. -Wikipedia

CRUDアプリケーションを構築する方法についての最良の部分は、Web上に存在するほぼすべてのアプリケーションが何らかの形のCRUDであることです.この考えを抽象化できることで、何かを造ることができます.アイデアはあなたが微調整することができますし、別の問題に再適用するパターンのアーセナルを開発することです、あなたが問題に実行した場合、他の誰かが既にこの問題を抱えている時間の99 %(そして、おそらく可能性が既に存在するので、ホイールを再発明しないでください).
閉じるこの動画はお気に入りから削除されています.ソフトウェアエンジニアであることの最良の部分は、自分のすべてのアイデアをマニフェストすることができます.
あなたがどこでも立ち往生する場合、私はGithubの上ですべてのソースコードを含んでいます.ソースコードは、チュートリアルごとに個別の分岐で分割されます.私が最初に起動したとき、私はいつも私は1つの単語をミスし、私のアプリケーション全体が実行を停止するだろうので、私はチュートリアルで動けなくなっていた.これはあなたが正しいトラックにいることを確認するためのリファレンスを持っている必要があります.
このシリーズは以下のようなトピックをカバーします.

クリエイトアプリ

日本学術振興会

機能的コンポーネント対クラスベースのコンポーネント

小道具

USENTによる州の取扱い

効果

条件レンダリング

リクエストのフェッチAPI

ベストプラクティス

コンポーネントとは

反応アプリケーションは、複数のコンポーネントで構成されます.コンポーネントは単にコードの再利用可能なビットです、彼らはほとんど機能のようですが、孤立して働いて、反応するとき、それはHTML要素を返します.コンポーネントは、クラスベースのコンポーネントと機能的なコンポーネントの2種類になります.私たちは、後のポストでそれらの2つをカバーします.コンポーネントは、コンポーネントの入れ子と呼ばれます.

コンポーネントで考える方法？

反応アプリケーションを計画する最初のステップは、どのようにユーザーの推論を分割したい決定しています.私は一般的にこれを行うFigma または紙の上に、コードにダイビングする前に、アプリケーションの低忠実度バージョンを引き出す.それはちょうど私がそれを振る代わりに方向感覚を持つことができます.では、見てみましょうHacker News ウェブサイト.
ステップ1はどのようにコンポーネントにウェブサイトを分割したいかを決定することです.別のセクションを探しています.明確なナビゲーションバー、コンテンツエリア、フッターがあることがわかります.これは私たちの出発点です.
ステップ2は繰り返しパターンを探すことです.何かが一貫して現れるレイアウトの部分を探してください.私たちは、各ポストには、同じレイアウトを持って、それは記事番号、タイトル、著者、日付、up票ボタン、URLなどが含まれます.我々はポストと呼ばれるコンポーネントにこれを行うことができます.

何を始める前に知っている必要がありますか？

あなたが反応に飛び込む前に快適である必要がある唯一のもの.JavaScript ( ES 6 --矢印関数、配列メソッドなど)、HTML、CSS、および基本的な端末の使用方法の中間的な理解が必要です.あなたが約束やコールバックや共通の機能パターンなどのより高度なJavaScriptの把握を持っていたが、それらの概念の1つが来るたびに、私は再開発者を介して実行されるように必要ではないが、それはまた良いでしょう.
だから始めましょう!

プロジェクト設定

我々は、CREA反応アプリ(CRA)を使用して、CRAは反応を学習するために使用される環境ですが、簡単に中間規模の反応アプリケーションだけでなく、簡単に使用することができます.これは、最新のJavaScript機能を使用して、すべてのあなたの建物を行うことができます.これは、座ることができる、リラックスして、セットアップの時間を費やす代わりにコーディングの楽しい部分に焦点を当てることを意味します.CRAはBabelとWebPackを使用してアプリをビルドするが、後で(これはツールチェーンと呼ばれています).

まず最初に、ノードをインストールする必要があります.端末を開いて実行しているノードがあるかどうか確認できますnpm --version .

それがバージョン番号(私が6.14.11を得た書き込みの時)を返すならば、あなたがノードをインストールしたことを意味します.ノードがインストールされていない場合は、nodejs.org . インストールを実行したら、ターミナルコマンドを実行して、正しく設定されていることを確認できます.

一旦ノードがインストールされるならば、それはNPMで来ます.NPMはJavaScriptのパッケージマネージャであり、サードパーティ製のパッケージやライブラリを使用することができます.あなたはこのalotを使用するので、あなたがスキムする必要があります時間がある場合npm documentation , これは、現在および将来のプロジェクトのお手伝いをします.今、プロジェクトのセットアップを開始します.

端末とCDをプロジェクトに設定したいフォルダに開き、次のコマンドを実行します.これはNPMからNPXレジストリからcra依存性をインストールするNPXを使用します.次に、NPMのスタートは、ポート3000のライブリロードを持っているローカルサーバーをスピンします.

npx create-react-app hackernews
cd hackernews
npm start

次の手順

これは、停止し、息を取る良い点のようです.次のポストでは、プロジェクトの構成とアプリケーションレイアウトの開発を開始します.私は次のいずれかの我々は、作成された反応アプリの構造をカバーし、すべての鐘や笛が含まれてキャッチされます.
Continue to Part 2 →