通往現代JavaScript的道路
本指南的目的是提供幾個免費的Ressources(文章,書籍,視頻?)的列表,這些列表將幫助您學習現代JavaScript和React庫。
配x本指南並不是要列出您必須了解的有關JavaScript或反應的所有內容。我試圖根據我的經驗和我遇到的人,列出您對這個世界完全陌生的有用的東西。如果您最喜歡的東西沒有在那裡列出,這並不意味著我不喜歡它或不贊成它。例如,TypeScript或GraphQl很棒,但我認為首先要學習這一點是必不可少的。
1)現代JavaScript?
涵蓋一切的教程:
- 學習Web開發還將教您HTML和CSS。
- 雄辯的JavaScript非常適合學習JS和一般編程概念。
- 現代JavaScript教程現在如何完成。從基本知識到高級主題,都可以簡單但詳細的解釋。
- 學習ES6(ECMAScript 2015)?如果您曾經不久前寫JavaScript,並且想趕上現代語法。
我喜歡的文章和視頻:
- 現代JavaScript為恐龍解釋了,您將學習有關NPM,Babel,Webpack等的基礎知識。
- 了解JavaScript中的提升,如果您來自另一種編程語言,您可能會對如何在JS中聲明變量感到不舒服。本文將幫助您感覺更好!
- 調試JavaScript? Firefox或Edge也有自己的DevTools,但我個人更喜歡編碼時使用Chrome。
- JavaScript中的功能編程?這些視頻是由前Spotify JS開發人員製作的。他將教您基本概念,例如承諾,封閉或高階功能。這些事情是反應中必不可少的。
- 關於繼承的組成?在學校,我必須做很多面向對象的編程。該視頻幫助我理解了為什麼它並不總是必要的。
文件
有時,您需要搜索文檔,例如,如果您不知道代碼庫中的特定關鍵字,或者想學習如何使用本機函數。當然,您可以使用任何搜索引擎或Stackoverflow,但我建議使用MDN Web文檔。
2)反應⚛️
- 什麼是反應:初學者的視覺介紹
- javascript要知道反應
- 官方文檔是學習反應的最佳場所。
- 初學者反應指南?
- 漸進式反應提示使您的反應站點表現出色。 Web.dev也有很多類似的文章。
- 學習模式模式,用於使用香草JavaScript構建強大的Web應用程序和反應。
鉤?類組件
鉤子非常具體,我建議您檢查為什麼鉤子? ?為了了解有關React歷史記錄的更多信息,或者為什麼我們現在使用鉤子。您可能還想了解類組件和一些用於在組件之間共享邏輯的模式(在掛鉤到達之前),因為許多代碼庫中仍然存在:
- 將鉤流程圖與類組件生命週期方法進行比較
- 高階組件:React應用程序設計模式
- 渲染道具
國家管理和其他圖書館
在某個時候,您可能會認為,在任何反應組件中都可以訪問某種全球狀態,以避免一次又一次地傳遞道具……人們可能會告訴您使用Redux或Mobx或Apollo或Xstate或XSTATE或[插入流行庫名稱]實現這一目標,但可能會被誇大!我建議閱讀文章React State Management庫以及如何選擇獲得良好的概述。 2023年的React圖書館也將解決此主題以及更多問題!
3)接下來是什麼! ?
- 保持最新狀態,並與React通訊和Bytes新聞通訊一起發現新事物;
- 練習使用Create-React-App或直接在codesandbox上的瀏覽器中進行反應
- 使用以下方式構建生產準備就緒應用程序:vite,next.js,gatsby,通過博覽會對本地的反應;
那樣式呢? ?
一些基礎知識
- 學習CSS的常綠CSS課程,並參考以提高您的網絡樣式專業知識。
- 現代CSS為恐龍解釋
- CSS-IN-JS或CSS和JS
- 樣式和CSS官方React Doc
您可以用來管理風格的Somne圖書館:
- 尾風
- CSS模塊
- 香草提取
- 情感
- 樣式的組件,我認為它們是那些用來編寫“經典” CSS並希望從將其與JavaScript混合使用的人的選擇之間的最佳選擇。
設計系統
也許您只想構建一個應用程序,並避免花費大量時間編寫CSS和HTML。我建議您使用材料,螞蟻設計或北極星等庫。如果您想構建自己的設計系統,我建議您閱讀原子設計。
那測試呢? ?
- 但是,實際上,什麼是JavaScript測試?
- 如何使用React測試庫教程理解JEST並學會瞭如何通過React測試庫編寫自動測試(還有其他測試庫,但RTL是官方文檔推薦的一個很棒的庫)。
- 了解開玩笑的模擬模擬是一種通過可以控制和檢查的對象替換依賴性來隔離測試對象的技術。
- 為什麼要柏樹? ?一個庫來編寫端到端測試等等;
我默認的其他工具
- 代碼編輯器:VS代碼;
- 自動代碼格式:漂亮;
- Linter:Eslint;
- 通過UI而不是命令管理Git:sourcetree或vs code;
- 構建和部署您的應用程序:netlify;
- 連續整合:Travis CI;
- 購買域名:Google域;
我默認的其他庫
- 路由:React-Router;
- 國際化:Linguijs;
- 孤立地開發您的組件,並通過Storybook與您的團隊分享。通過色彩部署您的故事書並在每個故事上進行屏幕截圖測試;
- 測試時嘲笑API:模擬服務工作者;
付費課程?
完成後,我建議那些:
- Wes Bos課程? JavaScript,React,CSS等;有些甚至免費!
- 肯特·多德斯課程?反應,測試;