react-fundamentals - 私の反応の基礎ワークショップの資料

(Material for my React Fundamentals Workshop)

Created at: 2019-06-01 03:40:49
Language: JavaScript
License: NOASSERTION

反応の基礎 🚀 EpicReact.Dev

構築に必要な基本的な概念を学ぶ アプリケーションとライブラリに反応する

基本的な建物で効果的に行うために必要なすべてを学ぶ ブロックの React アプリケーション。あなたが終わったら、あなたは準備ができるでしょう React コンポーネントを作成して、アプリのユーザーに優れたエクスペリエンスを提供します。

最初から最後まで反応を学ぶ

ビルドステータス GPL 3.0ライセンス すべての貢献者 行動規範 すぐにコーディングできる Gitpod

前提 条件

注:EpicReact.dev ビデオはReactバージョン^ 16.13およびすべてで録画されました このリポジトリの資料は、Reactバージョン^18に更新されました。違いは 軽微な違いと関連する違いは、指示に記載されています。

クイックスタート

すべて同じ環境ですべてを実行することをお勧めします ただし、リポジトリをローカルでセットアップしたくない場合は、開始できます ワンクリックでGitpodCodeSandbox、または GitHub コードスペースビデオデモ手順に従ってください。

Gitpodで開く

ローカル開発環境の場合は、以下の手順に従ってください。

システム要件

これらはすべて、.設定されていることを確認するには 正しく、これを実行できます:

PATH

git --version
node --version
npm --version

これらのいずれかに問題がある場合は、PATH環境の詳細を確認してください 変数と、WindowsまたはMac / Linux用にここで修正する方法。

セットアップ

作業を進めながらコミットしてプッシュする場合は、最初にフォークしてから、このリポジトリを直接複製するのではなく、フォークを複製する必要があります。

正しいもの(およびバージョン)がインストールされていることを確認したら、 セットアップするためにいくつかのコマンドを実行できるはずです:

git clone https://github.com/kentcdodds/react-fundamentals.git
cd react-fundamentals
node setup

これには数分かかる場合があります。それはあなたの電子メールをあなたに尋ねます。これは オプションで、プロジェクト内のリンクにメールを自動的に追加します 一部のフォームへの入力が簡単になります。

PATH変数に関連するいくつかの一般的な問題(上記) リンクまたはここ)、 Git、ノード、または npm を再インストールし、npm キャッシュをクリアします。

node setup

エラーが発生した場合は、それらを読んで、何が見つかるかどうかを確認してください 問題は。自分で解決できない場合は、 実行したコマンドからのすべての出力を発行して提供します( それはたくさんあります)。

セットアップスクリプトを機能させることができない場合は、 上記の要件の適切なバージョンを選択し、次のコマンドを実行します。

npm install
npm run validate

それでも問題を修正できず、Docker 🐳の使用方法を知っている場合は、次のことができます。 次のコマンドを使用してプロジェクトをセットアップします。

docker-compose up

アプリの実行

アプリを起動して実行する(そして実際に機能するかどうかを確認する)には、次のコマンドを実行します。

npm start

これにより、ブラウザが起動します。ご存知の方もいらっしゃると思いますが、これは標準の反応スクリプトアプリケーションです。

Netlifyでアプリのデプロイを開くこともできます。

テストの実行

npm test

これにより、Jestがウォッチモードで起動します。出力を読み、 それをいじってください。テストは、最終バージョンに到達するのに役立つものです。 ただし、タスクを実行できても、テストが失敗する場合があります 私のソリューションとは異なる方法で物事を実装するので、それらを次のように見ないでください 完全な権限。

演習

  • src/exercise/00.md
    : 背景、エクササイズの説明、特別クレジット
  • src/exercise/00.js
    :絵文字ヘルパーを使ったエクササイズ
  • src/__tests__/00.js
    :テスト
  • src/final/00.js
    :最終版
  • src/final/00.extra-0.js
    :追加クレジットの最終版

演習の目的は、すべての資料に取り組むことではありません。 これは、私が資料を歩きながら私に尋ねる正しい質問についてあなたの脳に考えさせることを目的としています。

役立つ絵文字 🐨 💰 💯 📝 🦉 📜 💣 💪 🏁 👨 💼 🚨

各演習には、演習を完了するのに役立つコメントが含まれています。これらの楽しみ 絵文字はあなたを助けるためにここにあります。

  • コアラ🐨のコディは、あなたがすべき特定の何かがあるときにあなたに教えてくれます する
  • マーティ・ザ・マネーバッグ💰はあなたに特定のヒント(そして時にはコード)を与えます 途中で
  • 百人ハンナはあなたができる追加の挑戦をあなたに与えるでしょう 💯 演習を早めに終了します。
  • メモ帳📝のナンシーは、あなたが何であるかについてメモを取ることを奨励します 学習
  • フクロウ🦉のオリビアはあなたに役に立つ一口/ベストプラクティスのメモと 詳細とフィードバックのためのリンク。
  • ドミニク・ザ・ドキュメントは、有用なドキュメント📜へのリンクを提供します
  • ベリー・ザ・ボム💣は、物を吹き飛ばす必要があるところならどこでもぶらぶらしています アップ (コードの削除)
  • マシュー・ザ・マッスル💪は、エクササイズに取り組んでいることを示します
  • チェッカーフラッグ🏁をチャックすると、ファイナルで作業していることを示します
  • プロダクトマネージャー👨 💼のピーターは、ユーザーが何を望んでいるかを知るのに役立ちます
  • アラートのアルフレッドは🚨、テストの失敗に時折表示されます。 テストが失敗する理由の考えられる説明。

貢献

これらの素晴らしい人々に感謝します (絵文字キー):

ケントC.ドッズ
ケントC.ドッズ

💻 📖 🚇 ⚠️
ジャスティン・ドーフマン
ジャスティン・ドーフマン

🔍
ベン・イレグボドゥ
ベン・イレグボドゥ

📖
ジョナサン・ベルチャー
ジョナサン・ベルチャー

📖
リヒャルト・ヘフナー
リヒャルト・ヘフナー

💻
ザック・ジョーンズ
ザック・ジョーンズ

📖
リカルド・ブスケ
リカルド・ブスケ

📖
アルパン チャトパディヤイ
アルパン チャトパディヤイ

📖
マルコ・モレッティ
マルコ・モレッティ

💻
シンディ
シンディ

📖
アーロン・ライスマン
アーロン・ライスマン

📖
ジェイコブMGエヴァンス
ジェイコブMGエヴァンス

👀
ジェシー・ハル
ジェシー・ハル

📖
トマス・カラッチャ
トマス・カラッチャ

📖
ヴァシリー・コヴァレフ
ヴァシリー・コヴァレフ

💻
フェリックス・ゲールハール
フェリックス・ゲールハール

📖
アポラ・キプソ
アポラ・キプソ

📖
DCグッドウィン2112
DCグッドウィン2112

🐛
プリタム・サンガニ
プリタム・サンガニ

💻
ライアン・ハイナーマン
ライアン・ハイナーマン

📖 💻
マルコ
マルコ

🐛
ピーター・ホザーク
ピーター・ホザーク

💻
エマヌイユ・ズンポウラキス
エマヌイユ・ズンポウラキス

📖
ナヴニート・サホタ
ナヴニート・サホタ

📖
ロドリゴ・フエンテス
ロドリゴ・フエンテス

📖
ジョニー・マグリッピス
ジョニー・マグリッピス

💻
ロシャン・アチャリヤ
ロシャン・アチャリヤ

📖
アートテレッシュ
アートテレッシュ

📖 💻
アムル・A・モハメッド
アムル・A・モハメッド

🤔
ダグラス
ダグラス

📖
ガウラフ
ガウラフ

💻
ローラ・オネアスカ
ローラ・オネアスカ

📖
ミカエル・デ・ボイ
ミカエル・デ・ボイ

💻
ハンネス・ディエルクス
ハンネス・ディエルクス

⚠️
ルーク
ルーク

🐛
トニ・デズマン
トニ・デズマン

💻
ボビー・ワーナー
ボビー・ワーナー

💻
コンラッド・シャウィンスキ
コンラッド・シャウィンスキ

💻
ヤシーン・カディール
ヤシーン・カディール

🐛
ケビン・ヴィグルッチ
ケビン・ヴィグルッチ

📖
イリヤン・トリフォノフ
イリヤン・トリフォノフ

📖
オスカー・ドミンゲス
オスカー・ドミンゲス

📖
アーロン・カサノバ
アーロン・カサノバ

💻
カイル・ガック
カイル・ガック

📖
アンソニー・ディケ
アンソニー・ディケ

📖
マット・シュレンカー
マット・シュレンカー

📖
ヤクブ
ヤクブ

📖
ビクター・デボーン
ビクター・デボーン

📖
マブブ・ザマン
マブブ・ザマン

📖
岡島美咲
岡島

📖美咲
マリオ・サナム
マリオ・サナム

💻
キャサリン・ピーターソン
キャサリン・ピーターソン

📖
アレックス・ワット
アレックス・ワット

📖
ネッド・レドモンド
ネッド・レドモンド

⚠️
オズ・アダリ
オズ・アダリ

📖
チランジーブ・グプタ
チランジーブ・グプタ

📖
スナトゥロ・ガニエフ
スナトゥロ・ガニエフ

📖
ジョーイ・カルドシ
ジョーイ・カルドシ

📖
ルカ
ルカ

📖

このプロジェクトは、すべての貢献者の仕様に従います。あらゆる種類の貢献を歓迎します!

ワークショップのフィードバック

各演習には、[詳細とフィードバック] リンクがあります。後に記入してください 演習と指導。

ワークショップの最後に、このURLにアクセスして、全体的なフィードバックを提供してください。 ありがとうございました!https://kcd.im/rf-ws-feedback