modern js

通往现代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等；有些甚至免费！
• 肯特·多德斯课程？反应，测试；