react exercise
1.0.0
この演習は、インタラクティブな方法で基本的な反応の概念に精通し、最新のnode.js環境で快適に開発することを目的としています。このプロジェクトは複数の部品に分割されます。各部分は、基本的な反応/フロントエンドの概念をカバーします。
Reactの初心者向けガイドとReactの初心者ガイドは、Reactの基礎について完全に理解するために進むことが非常に有益です。また、この演習の一環として、React DocsとJavaScriptドキュメントに快適に飛び込むことは有益です。
ここにノードとNPMをインストールします。
端末で次のコマンドを実行して、正しいバージョンがあるかどうかを確認してください。
node -v
npm -v
React Devtoolsをインストールして、簡単にデバッグして、Reactアプリで何が起こっているのかを確認します。
テキストエディターは、このプロジェクトで使用されているJSX構文をネイティブにサポートしていない場合がありますが、適切な構文の強調表示を取得するためのプラグインがある場合があります。たとえば、Sublime TextはBabelプラグインを使用します。
まず、このリポジトリをフォークします。右上のフォークボタン。これが行うことは、このリポジトリをアカウントにコピーすることです。これで、 <yourusername>/react-exerciseという名前のリポジトリが必要です。
このように見えるはずです（私のユーザー名はDavidachangです）： 
次に、このリポジトリをクローンします（「クローンまたはダウンロード」という緑色のボタンをクリックし、HTTPを選択し、場所<url>コピーして貼り付けて貼り付けてください）。
$ git clone <url>
$ cd react-exercise
プロジェクトの依存関係をインストールします：
npm install
それが完了したら、これを実行して開発を開始します。
npm start
これにより、アプリの実行が開始され、http：// localhost：3000で自動的に開きます。あなたが変更してコードを保存するときはいつでも、それは自動的にリロードされます！これは端末の実行プロセスのままであるため、他のコマンドを実行するには新しいタブまたはウィンドウを開く必要があります。
Prettierは、コードを自動的に改革して、特定のコーディングスタイルガイドラインに従うツールです。各コミットの前に自動的に実行するように構成されています。これにより、すべてのコードが同じコードスタイルに従っていることを確認し、優れたプラクティスを実施し、競合を最小限に抑えます。
この演習には間違いなく必要ではありませんが、編集者用にインストールできるきれいなプラグインがあります。こちらの指示を参照してください。
目標：JSX構文、コンポーネント構造、およびパスプロップに精通してください
タスク：
shouldDisplayImageプロップをInstructionsコンポーネントに送信します目標：レンダリングリストとJavaScriptアレイ関数に精通してください
タスク：
Instructionsコンポーネントにitems小道具を送信するitemsの箇条書きリストを表示しますfor使用せずに使用せwhileに行います目標：コンポーネント状態に精通してください
タスク：
Counterコンポーネントを作成しますcountの初期状態を0に設定します目標：ユーザーの入力に精通してください
タスク：
App.jsでは、 initialCount状態を設定する入力と送信ボタンを作成しますinitialCount状態をプロップとしてCounterコンポーネントに渡し、この値をCounterの初期countとして使用します。ユーザーの入力はStringであり、 Numberを送信したいので、これを行うときは必ずタイプに注意してください。<button type="button" ... 目標：兄弟コンポーネント間の状態/小道具のコミュニケーションを理解します
タスク：
inputと送信ボタンを[ Appコンポーネントの子であるInitialCountFormと呼ばれる独自のコンポーネントに送信]目標：CSS/SCSとスタイリングに精通してください
タスク：具体的なものはありません、スタイリングで遊んでください！
注：SCSSファイルを作成でき、保存するとCSSファイルに自動的にコンパイルされますが、CSSファイルをコンポーネントにインポートする必要があります。
いくつかのスタイリング関連のリソース：
React初心者のガイド
MDN- JavaScriptの再導入
反応のための初心者のガイド
Docsを反応します
AirbnbのJavaScriptスタイルガイド
AirbnbのReactスタイルガイド
AirbnbのCSSスタイルガイド
すべての手順が完了したら、GitHubリポジトリに変更を押してください！
PRを提出する前に、ブランチをリモートブランチ（ローカルではなくgithub上にあるもの）に押し込む必要があります。
あなたがあなたの枝にいることを確認してください：
git branch
すべてのコミットがあることを確認したい場合：
git log
Qを押して、 git log画面を終了します。
あなたのコミットをあなたのリモートブランチに押し込みます：
git push
これを初めて行うときは、リモートブランチがまだ存在していないため、エラーが発生する可能性があります。通常、使用する正しいコマンドがわかります。
git push --set-upstream origin <YOUR_BRANCH_NAME>
注：これは、初めて新しいブランチを押すときにのみ行う必要があります。その後、 git pushだけを使用できます。
これが完了したら、 Forkedリポジトリとブランチ名へのリンクを使用して、[email protected]にメールを送信してください。あなたの提出を見るためにこれら2つのことが必要です。
H A C K 4 I M P A C T
H A C K 4 I M P A C T
H A C K 4 I M P A C T
H A C K 4 I M P A C T
H A C K 4 I M P A C T
