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

(Material for my React Fundamentals Workshop)

Created at: 2019-06-01 03:40:49

Language: JavaScript

URL: https://github.com/kentcdodds/react-fundamentals

License: NOASSERTION

反応の基礎 🚀 EpicReact.Dev

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

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

前提条件

「反応のために知っておくべきJavaScript」を読んでください
React DevTools をインストールする (Chrome (推奨), Firefox)

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

クイックスタート

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

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

システム要件

Git v2.13 以降
ノードJS
```
14 || 16 || 18
```
npm v8.16.0 以降

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

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.ドッズ} 💻 📖 🚇 ⚠️	_{ジャスティン・ドーフマン} 🔍	_{ベン・イレグボドゥ} 📖	_{ジョナサン・ベルチャー} 📖	_{リヒャルト・ヘフナー} 💻	_{ザック・ジョーンズ} 📖	_{リカルド・ブスケ} 📖
_{アルパンチャトパディヤイ} 📖	_{マルコ・モレッティ} 💻	_シンディ 📖	_{アーロン・ライスマン} 📖	_{ジェイコブMGエヴァンス} 👀	_{ジェシー・ハル} 📖	_{トマス・カラッチャ} 📖
ヴァ_{シリー・コヴァレフ} 💻	_{フェリックス・ゲールハール} 📖	_{アポラ・キプソ} 📖	_{DCグッドウィン2112} 🐛	_{プリタム・サンガニ} 💻	_{ライアン・ハイナーマン} 📖 💻	_マルコ 🐛
_{ピーター・ホザーク} 💻	_{エマヌイユ・ズンポウラキス} 📖	_{ナヴニート・サホタ} 📖	_{ロドリゴ・フエンテス} 📖	_{ジョニー・マグリッピス} 💻	_{ロシャン・アチャリヤ} 📖	_{アートテレッシュ} 📖 💻
_{アムル・A・モハメッド} 🤔	_ダグラス 📖	_ガウラフ 💻	_{ローラ・オネアスカ} 📖	_{ミカエル・デ・ボイ} 💻	_{ハンネス・ディエルクス} ⚠️	_ルーク 🐛
_{トニ・デズマン} 💻	_{ボビー・ワーナー} 💻	_{コンラッド・シャウィンスキ} 💻	_{ヤシーン・カディール} 🐛	_{ケビン・ヴィグルッチ} 📖	_{イリヤン・トリフォノフ} 📖	_{オスカー・ドミンゲス} 📖
_{アーロン・カサノバ} 💻	_{カイル・ガック} 📖	_{アンソニー・ディケ} 📖	_{マット・シュレンカー} 📖	_ヤクブ 📖	_{ビクター・デボーン} 📖	_{マブブ・ザマン} 📖
_岡島 📖美咲	_{マリオ・サナム} 💻	_{キャサリン・ピーターソン} 📖	_{アレックス・ワット} 📖	_{ネッド・レドモンド} ⚠️	_{オズ・アダリ} 📖	_{チランジーブ・グプタ} 📖
_{スナトゥロ・ガニエフ} 📖	_{ジョーイ・カルドシ} 📖	_ルカ 📖