ReactJS:快速入门

React.js开发人员课程即将开始,因此在OTUS的墙内举行了另一堂公开课。考虑了以下问题:

  • 标准React.js功能集中包含的内容;
  • 是否可以以此构建一个复杂的应用程序;
  • 反对继承的组成;
  • 函数式编程-简单还是困难?
  • 什么是Redux,为什么需要它。



在课程结束时,我们开发了一个小的ReactJS Web应用程序。该网络研讨会由拥有超过8年商业开发经验的软件工程师Nikita Ovchinnikov主持

什么是React?


通过打开官方网站,您会看到此问题的答案,该网站上写道React是用于构建用户界面的JavaScript库。



在这里,您将找到一个精彩的教程,对它进行了研究,可以在阅读该框架后立即使用它。如果需要,请参见俄语教程,但不建议这样做。如果英语确实很不好,请仍然打开原始英语版本并使用Google翻译。事实是,官方的俄文来源有时在翻译方面落后(碰巧文档已更新,但翻译尚未完成)。

为什么React如此受欢迎?


例如,过去6个月统计数据(不计算寒假期间的典型沉降)证明了React的受欢迎程度以下统计数据



也显示出良好的效果 当然,统计数据远非一切,但从样本中我们仍然可以看到受欢迎程度高,并且仅在增加。 为什么React如此受欢迎?有许多的原因:







  • 它确实有很好的记载
    -这是一个教程 ;
    -这里是初学者指南
    但是,今天,如果没有充分的文档记录,该框架将不会流行。
  • React . , . ;
  • , — . JSX, , ;
  • . - , , , , , , , ;
  • . . , , , . React Angular;
  • (react-developer-tools, redux-dev-tools);
  • React , , .

React?


因此,结识缺点#1:React不容易学习。原因如下:

1. React是一种完全不同的思维方式。如果与他一起工作,则确实需要重建。在React中,与其他框架不同,只有组合的概念。来自Facebook的家伙以没有任何继承的方式设计了他们的框架。来自Facebook的这些家伙从逻辑上解释了这种情况

“在Facebook,我们在成千上万的组件中使用React,我们还没有找到建议创建组件继承层次结构的用例

实际上,该声明并不是没有根据的,因为在OOP中当然存在许多众所周知的问题,例如,过多的抽象。此外,并非所有开发人员都赞成构建令人难以置信的继承链,仅此而已,尽管当然,在某些地方继承既必要又有用。

2.使React研究更加复杂的第二点是它仅包含建议,没有严格的规则集。不仅如此,在研究框架时仍然可以忍受,但是当您进入一个真正的项目时,您会感到非常惊讶。事实是,React中没有两个相同的项目,而在每个公司中,带有React的项目都是完全独立的。您习惯了一种情况,然后切换到另一个团队,发现那里的一切都不同:其他库,其他规则……同样,您需要适应和适应。正如他们所说,您必须付出灵活性。

3.学习的第三个困难-要成功掌握React,开发人员需要具备较高的水平不,React本身简单易写。但是,为了对此做一些复杂的事情,您需要具备良好的编程技能。如果在JS和TS的基础知识方面存在差距,那么对您来说将是非常困难的,您将无法理解所有内容。

选择问题


现在让我们谈谈弱点2- 选择问题它是很容易迷失的一种。确实有很多东西。钩子最近出现-关于不再需要类的事实的对话已经开始,React Hooks与React Class的战斗已经开始...每个人都急于使用钩子,然后他们说一切还不清楚并返回使用类等。 p ...

实际上,不存在对“ React HooksReact Class问题的正确答案或者,更准确地说,正确答案取决于您提出此问题的条件。

另一个问题出现了:“如何检查类型”?看到我们有:


在这里,我们再次遇到选择的问题,说实话,有时会感到不安。当然,一切都是非常可变的,在制定某些决策的过程中您会遇到,但您永远不会“看到”某些决策。一切都取决于情况。

同样,这里有Create React AppWebpack.jsBabel,所以一开始,您将在这里有一个问题,该使用什么?

接下来的选择痛苦与国家有关。有ReduxMobX,在Redux内部也有redux-sagaredux-thunk。而且,如果不尝试,很难意识到在特定情况下最好使用什么。

除了:

1. 路由器大约有五个,这是最受欢迎的:


2. CSS-IN-JS顺便说一下,在这种非常好的方法的框架中,还有一个选择:


总结一下,您可以列出以下React缺点

  1. 高入门门槛。假设没有假装,很难学习React。包括由于非常庞大的基础架构。
  2. 很多时间学习。一旦不容易学习,就准备好花时间在上面,否则就没有办法。您需要了解什么。
  3. 种类繁多,很容易丢失。没有要添加的内容。

“大量的学习时间”是什么意思?实际上,如果您采用任何技术,无论从营销的角度来看,您的布置多么柔和,都不要相信“您将在短短的两节课中学到”这样的字眼-这都是胡说八道,并且在现实世界中行不通。顺带一提,但事实是:要成为真正的好专家,您需要花费大量时间。而且,为了开始做某事,不需要很多时间。

兄弟的力量是什么?


尽管如此,React是一项非常强大的技术。首先,如果您是专业人士,工作将很容易找到。相反,将很难拒绝它,因为市场上有这么多的报价:



下一个优点是很多现成的库和解决方案。GitHub上的同一屏幕截图(有超过一百万个存储库)



表明了这一点如果您只是认为“兑现这件事”会很好,那么事实证明它已经由某人制作了。该技术确实非常受欢迎。

除了:

  1. 对于初学者来说,多样性是一个问题,但是对于专业人士来说,这是一个加号!
  2. React包含大量好的解决方案。
  3. 您可以开发任何复杂的应用程序。
  4. 您可以用任何样式书写。

打字稿支持


React拥有出色的Typescript支持。如果仅因为它可以用于编写真正有用和真正有用的类型,那么该语言就很好。使用Typescript,您可以编写一个非常强大的类型系统。本质上,Typescript现在是一个标准,而该标准在React中。当然,您不能使用它,而是使用JavaScript。但是,如果没有Typescript,很难做同样困难的事情,因为如果没有严格的Type,就很难工作。如果没有严格的类型,也很难预测您的决定如何表现。这是困难的,即使类型做的,没有他们,这是很可悲......

总之,一定要以打字稿的工作,因为这是一个非常必要的技术:

- https://www.typescriptlang.org/docs/handbook/react-&- webpack.html



几点提示


最后,我想提出一些建议。今天,他们谈论了很多有关OOP的知识,您可以轻松找到有关此主题的大量信息。在任何地方,您都将被写成百万万次有关基类动物的内容,从中也可以得知有关猫和狗的内容。或关于基础车,法拉利和宝马。这就是它们不时向您展示的内容以及一本教科书向另一本教科书显示的全部内容,而您的开发人员水平将与蜗牛同时增长。

同时,显然对函数式编程没有给予足够的重视,对函数式编程的理解确实会提高您的技能。如果您真正学会正确正确地使用它。迄今为止,最合适的书籍之一可在此处免费获得,强烈建议您阅读:



为什么很难学习函数式编程?因为很多书都充斥着数学,学术上的复杂性等问题。完成同一本书后,您会成功,因为那太好了。

为什么函数式编程很重要?因为,诸如Redux之类的东西是建立在函数式编程的基础之上的。而且,至少掌握了基本的函数编程,您实际上将开始编写更好的代码。最主要的是正确理解所有内容。

我想谈的第二点是架构。我们的建筑就是一切!有一个很好的建筑范式叫做鸭子这是关于如何构建React和Redux应用程序。值得推荐此架构以供实际使用。

这个主意本身非常有趣,它代表了一组严格且同时很酷的规则,这些规则将使您的决策结构易于理解和可读。这不是冗长的事,因此只要阅读和理解其中的内容就足够了。之后,您将能够正确组织您的应用程序。链接已附加。




  1. 不管怎么说,React的入门门槛很高。即使具有几年的JavaScript编程经验,也要为遇到的困难做好准备,并且还会有很多问题出现。
  2. React提供了很多机会。但是已经有很多关于职业选手的话题,所以我们不再重复。
  3. 如果您对React的发展历史感兴趣,这里是一个很好的路线图

就这样。如果您对本课程的实践部分感兴趣,请从现在开始观看网络研讨会一个小的测试Web应用程序将在ReactJS上开发,其代码可在GitHub上获得

All Articles