react exercise
1.0.0
此練習旨在讓您以互動方式熟悉基本的React概念，並使您在現代節點環境中變得自願開發。該項目將分為多個部分。每個部分都將涵蓋一個基本的反應/前端概念。
REACT初學者指南和初學者指南的React指南將非常有益於對React基本面的完全了解。作為本練習的一部分，可以輕鬆地潛入React文檔和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 prop發送到確定是否顯示H4i徽標提示的Instructions組件中目標：熟悉渲染列表和JavaScript數組功能
任務：
items道具發送到包含字符串列表的Instructions組件中items的子彈點列表for或循環while執行此操作目標：熟悉組件狀態
任務：
Counter組件count狀態設置為0目標：熟悉用戶輸入
任務：
App.js中，製作一個輸入和提交按鈕，該按鈕設置了initialCount狀態initialCount狀態作為道具傳遞到Counter組件中，並將此值用作Counter中的初始count 。在執行此操作時，請確保提防類型，因為用戶輸入是String ，我們想發送一個Number 。<button type="button" ... 目標：了解同胞組件之間的狀態/道具通信
任務：
input和提交按鈕移動到其自己的組件中，稱為InitialCountForm ，它是App組件的孩子目標：熟悉CSS/SCSS和样式
任務：沒有什麼具體的，可以隨身攜帶樣式！
注意：您可以創建SCSS文件，保存時將自動將其編譯到CSS文件中，但是您需要將CSS文件導入組件。
一些與樣式相關的資源：
React初學者指南
MDN-重新引入JavaScript
初學者反應指南
React文檔
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 。
完成此操作後，請發送電子郵件至[email protected]，並帶有指向您的分叉存儲庫和分支名稱的鏈接。我們將需要這兩件事來查看您的提交。
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
