30 Days Of React
1.0.0
通過加入即將到來的編碼訓練營來學習Asabeneh
作者：asabeneh Yetayeh
2020年10月
第1天>>
| ＃ 天 | 主題 |
|---|---|
| 00 | 介紹 如何使用回購 要求 設定 |
| 01 | JavaScript複習 |
| 02 | 入門反應 |
| 03 | 設定 |
| 04 | 成分 |
| 05 | 道具 |
| 06 | 列表，地圖和鑰匙 |
| 07 | 類組件 |
| 08 | 國家 |
| 09 | 有條件的渲染 |
| 10 | React項目文件夾結構 |
| 11 | 事件 |
| 12 | 表格 |
| 13 | 受控和不受控制的組件 |
| 14 | 成分生命週期 |
| 15 | 第三方套餐 |
| 16 | 高階組件 |
| 17 | 反應路由器 |
| 18 | 提取與軸 |
| 19 | 專案 |
| 20 | 專案 |
| 21 | 鉤子 |
| 22 | 使用鉤子的表單 |
| 23 | 使用掛鉤獲取數據 |
| 24 | 使用鉤子的項目 |
| 25 | 自定義鉤 |
| 26 | 情境 |
| 27 | 參考 |
| 28 | 專案 |
| 29 | 探索 |
| 30 | 結論 |
???愉快的編碼？ ？ ？
祝賀決定參加30天的React編程挑戰。在此挑戰中，您將學習開發React應用程序所需的一切。在挑戰結束時，您將獲得30DAYSOFEREACT編程挑戰完成證書。如果您需要幫助，或者如果您想幫助其他人，則可以加入電報組。
30DAYSOFERECT挑戰是初學者和高級JavaScript和React Developers的指南。歡迎來到30天的反應。 React是JavaScript庫。我喜歡使用和教授React，希望您也能這樣做。在此步驟30天的React挑戰中，您將學習React，這是最受歡迎的用戶界面JavaScript庫之一。 React可以完成JavaScript可以做的所有事情。 React可用於將交互性添加到網站，開發移動應用程序，桌面應用程序，遊戲。我相信您將在接下來的30天內學到很多東西，並且您的編程和解決問題技能也將得到顯著提高。
我將使用對話英語和更少的術語來寫這一挑戰。內容將不斷更新。如果您發現錯別字或語法錯誤，請不要感到驚訝，因為在發布之前，我沒有做任何證據。我建議您專注於挑戰的主要信息，而不是英語和一些小錯誤。如果您向我發送提示請求，請記住在發送拉動請求之前先從主手提取請求，我非常感謝。我在此挑戰中使用的大多數圖像來自30DaysofjavaScript挑戰，因此您可能需要重命名文件名和文件夾30Daysofreact。如果您擅長陣列，循環，功能，對象，功能編程，破壞和傳播以及班級，那麼您將能夠正確遵循挑戰。否則，我強烈建議您檢查30DaysofjavaScript。
在研究此課程之前，您可以檢查30天的React的評論。
這個挑戰很容易閱讀，用對話英語，引人入勝，激勵性，同時又非常苛刻。您需要分配很多時間來完成這一挑戰。如果您是視覺學習者，則可以在Washera YouTube頻道上獲得視頻課程。訂閱頻道，評論並在YouTube Vides上提出問題並積極主動，作者最終會注意到您。
作者喜歡聽取您對挑戰的看法，分享您對30DaysofjavaScript挑戰的想法。您可以在此鏈接上留下推薦
通過加入即將到來的編碼訓練營來學習Asabeneh
要面對挑戰，您需要有以下內容：
播放此存儲庫以支持這項工作，並分配回購以創建自己的副本以工作。
您應該始終直接從分叉的副本中工作。
# note that an `ssh` link is used here, but an `https` link will work the same
git clone [email protected]:username/30-Days-Of-React.git
cd 30-Days-Of-React要完成日常練習，我的建議是創建一個單獨的分支，以容納您的鍛煉文件夾或您所做的任何其他更改。這將始終保持主分支的清潔，這意味著您的主人將始終與原始主人相似。
git checkout -b exercise-solutions # `-b` creates the branch if it does not exist在您的新分支中，您可以使用文件/文件夾來構建解決方案以進行日常練習
mkdir -p solutions/day-01 # `-p` helps create nested directories
touch solutions/day-01/level1.js # touch creates a file將您的解決方案提交給叉子
git add solutions/day-01/level1.js
git commit -m " chore: exercise level1 complete "
git push origin exercise-solutions # branch `exercise-solutions` was created earlier此存儲庫將在整個月每天更新。當新的一天的內容可用時，您可以使用以下步驟更新分叉的副本。
# 1. switch to master branch
git checkout master
# 2. check if your local copy has a link to original `...Asabeneh/30-Days-Of-React.git`
git remote -v
# 3. if not, add a link to original, you can choose any name for the link or use `upstream`
git remote add upstream [email protected]:Asabeneh/30-Days-Of-React.git
# 4. check again to confirm link added
git remote -v
# 5. now you can fetch updates from original repo, assuming you named this `upstream`
git fetch upstream
# 6. merge the updates to your local master branch
git merge upstream/master master
# 7. push the merged updates to your Forked copy on GitHub
git push origin master請注意，更新僅應用於主分支。如果您想更新任何其他分支，請重複使用分支名稱的步驟6-7。有關
exercise-solutions分支，請參見下面的摘要
git merge upstream/master exercise-solutions
git push origin exercise-solutions我相信您有動力和強烈的渴望成為開發人員，計算機和互聯網。除了基本至中級HTML，CSS和JS。如果您有這些，那麼您將有一切開始。
您現在可能不需要Node.js，但是您可能需要它以供以後使用。安裝node.js。
下載雙擊並安裝後
我們可以通過打開我們的設備終端或命令提示，檢查在本地計算機上是否安裝了節點。
asabeneh $ node -v
v12.14.0在製作本教程時，我正在使用節點版本12.14.0，但是現在推薦的Node.js下載版本為12.17.0。
那裡有很多瀏覽器。但是，我強烈建議Google Chrome。
如果您還沒有，請安裝Google Chrome。我們可以在瀏覽器控制台上編寫小型JavaScript代碼，但是我們不使用瀏覽器控制台來開發應用程序。
您可以通過單擊瀏覽器右上角的三個點，選擇更多工具 - >開發人員工具或使用鍵盤快捷方式來打開Google Chrome控制台。我更喜歡使用快捷方式。
使用鍵盤快捷鍵打開Chrome控制台。很高興知道捷徑是JavaScript和React開發人員，您將花費很多時間在瀏覽器控制台上，並且在開發過程中不要懶惰。
Mac
Command+Option+J
Windows/Linux:
Ctl+Shift+J
打開Google Chrome控制台後，嘗試探索標記的按鈕。我們將大部分時間都花在控制台上。控制台是您的JavaScript代碼進入的地方。 Google Console V8引擎將您的JavaScript代碼更改為機器代碼。讓我們在Google Chrome Console上編寫JavaScript代碼：
我們可以在Google控制台或任何瀏覽器控制台上編寫任何JavaScript代碼。但是，對於這一挑戰，我們只關注Google Chrome控制台。使用以下方式打開控制台：
Mac
Command+Option+I
Windows:
Ctl+Shift+I為了編寫我們的第一個JavaScript代碼，我們使用了內置函數Console.log（） 。我們將一個參數作為輸入數據傳遞，並且該函數顯示輸出。我們將“ Hello，World”作為輸入數據或Console.log（）函數中的輸入數據傳遞。
console . log ( 'Hello, World!' ) Console.log（）函數可以採用由逗號分隔的多個參數。語法看起來如下： console.log（param1，param2，param3）
console . log ( 'Hello' , 'World' , '!' )
console . log ( 'HAPPY' , 'NEW' , 'YEAR' , 2020 )
console . log ( 'Welcome' , 'to' , 30 , 'Days' , 'Of' , 'JavaScript' )從上面的摘要代碼中可以看到， console.log（）可以進行多個參數。建議使用盡可能多的console.log（）打印來檢查代碼中發生的事情，但不要永遠保留所有console.log（）測試。保持瀏覽器控制台打開，使您的生活變得輕鬆。
我們將評論添加到我們的代碼中。評論對於使代碼更加可讀並在我們的代碼中發表評論非常重要。 JavaScript不會執行我們的代碼的註釋部分。在JavaScript中，以//在JavaScript中以//的方式發表了任何文本行，是一個註釋，類似這樣的內容 / * * /也是評論。
示例：單行評論
//這是第一個評論
//這是第二條評論
//我是一行評論
示例：多行論
/*這是多行論
多行論可以採用多行
JavaScript是網絡的語言
*/
編程語言類似於人類語言。英語或許多其他語言使用單詞，短語，句子，複合句子等來傳達有意義的信息。語法的英語含義是單詞和短語的排列，以一種語言創建良好的句子。語法的技術定義是計算機語言中語句的結構。編程語言具有語法。 JavaScript是一種編程語言，與其他編程語言一樣，它具有自己的語法。如果我們不編寫JavaScript理解的語法，它將引起不同類型的錯誤。稍後我們將探索各種JavaScript錯誤。現在，讓我們查看語法錯誤。
我犯了一個故意的錯誤。結果，控制台提出了語法錯誤。實際上，語法非常有用。它告知犯了哪種類型的錯誤。通過閱讀錯誤反饋指南，我們可以糾正語法並解決問題。從程序中識別和刪除錯誤的過程稱為調試。讓我們解決錯誤：
console . log ( 'Hello, World!' )
console . log ( 'Hello, World!' )到目前為止，我們看到瞭如何使用Console.log（）顯示文本。如果我們使用console.log（）打印文本或字符串，則文本必須在單引號，雙引號或反向引號內。例子：
console . log ( 'Hello, World!' )
console . log ( 'Hello, World!' )
console . log ( `Hello, World!` ) 現在，讓我們在Google Chrome Console上使用Console.log（）練習更多編寫JavaScript代碼，以了解數字數據類型。除文本外，我們還可以使用JavaScript進行數學計算。讓我們進行以下簡單計算。控制台可以直接進行參數，而無需Console.log（）函數。但是，它包含在此引言中，因為大多數挑戰都將發生在文本編輯器中，在該編輯器中，該功能的使用將是強制性的。您可以直接使用控制台上的說明進行播放。
console . log ( 2 + 3 ) // Addition
console . log ( 3 - 2 ) // Subtraction
console . log ( 2 * 3 ) // Multiplication
console . log ( 3 / 2 ) // Division
console . log ( 3 % 2 ) // Modulus - finding remainder
console . log ( 3 ** 2 ) // Exponentiation 3 ** 2 == 3 * 3我們可以在瀏覽器控制台上編寫代碼，但對於更大的項目而言不會做。在實際的工作環境中，開發人員使用不同的代碼編輯器編寫代碼。在這30天的JavaScript挑戰中，我們將使用Visual Studio代碼。
Visual Studio代碼是非常流行的開源文本編輯器。我建議下載Visual Studio代碼，但是如果您贊成其他編輯，請隨時遵循所擁有的內容。
如果您安裝了Visual Studio代碼，請讓我們開始使用它。
通過雙擊其圖標打開Visual Studio代碼。打開它時，您將獲得這種接口。嘗試與標記的圖標進行交互。
恭喜！您已經完成了開始使用React所需的設置，但是在我們深入React之前，讓我們進行JavaScript複習。如果您對JavaScript非常舒適，則可以跳過第1天JavaScript複習。 JavaScript刷新部分很大，可能需要一天以上。根據我的經驗，人們通常會陷入反應中，因為他們的JavaScript知識非常淺，因此可以填補該空白的所有必要的JavaScript功能，可在React中使用的所有必要的JavaScript功能在JavaScript Refreher部分中涵蓋。有很多練習，但您不需要解決它們。如果您想跳過JavaScript並直接跳入React，請單擊此處。
？恭喜！ ？
第1天>>
