preactCalculator
1.0.0
我为前端开发人员邮政局的编码挑战的一部分构建了该应用，并在奥斯汀市中心开设了一家初创公司。该应用程序是一个简单的计算器，使用preact，CSS-GRID和FLEXBOX。
快速开始
设计概念
使用的技术
测试和构建过程
要在本地计算机上测试或查看此应用，请克隆此存储库。导航到新的克隆存储库并运行以下命令：
yarn或者对于NPM用户：
npm install然后运行：
yarn start或者对于NPM用户：
npm start导航到http：// localhost：8080/，玩得开心！
没有为此挑战提供设计规格。我可以随时自由地设计设计。请记住我要申请的工作，我选择为客户提供产品。因此，配色方案，调色板甚至Favicon有意与其首页相似。 （这个想法是客户已经对该设计方案显示了偏好，因为他们为其生产网站选择了完全相同的设计。它也显示了对细节的关注。）
这是用于比较的照片。
原始网站
计算器应用
我使用这种编码挑战作为与新的本机CSS网格玩耍的机会（我有意义的一段时间）。 CSS网格是惊人的，但显然，将网格区域的特性作为道具几乎是不可能的。
我还使用Flexbox将内容和元素集中。我是Flexbox的忠实拥护者，并且强烈希望它比其他第三方网格解决方案或使用浮子进行元素定位。
这个应用也可能是我第一次为Calc（）功能提供了合理的用例！我正在使用calc（）将主页高度设置为等于100VH的主页高度减去标头栏的高度和底部偏移量，以确保元素不会重叠。
在整个设计过程中，我试图遵守此处概述的一些基本UI设计原则
该应用程序使用：
CSS本地网格
Flexbox
预先反应
预言
预先CLI
摩卡
柴
eslint
CSS本机网格令人印象深刻，尽管浏览器的支持可能缺乏较旧的浏览器。显然，将CSS样式作为道具将其传递给其他嵌套组件非常困难。尤其是当每个孩子组件都需要一个独特的位置属性以与CSS本机网格一起使用时。将字符串类型的道具评估为CSS类样式的参考失败。即使使用示例直接出现在提前文档中。 CSS-Grid不接受字符串作为网格区域论点。我的程序无法辨别CSS VAR参考和JS参考。
Flexbox令人惊叹，并且比CSS本机网格更好。无需再说。
预言是一项有趣的技术。我喜欢它的轻量级，我也喜欢它的快速功能，它几乎是React，但具有MIT许可证的完美匹配。与React生态系统相比，我确实觉得缺少一些构建工具。
此应用程序中的preact-router只是一个简约的设置。我还没有足够的处理来深入谈论它。
PREACT CLI的设置在缺乏测试命令和不配置的ESLINT设置（或违反其验证规则的代码）上均出现了。缺乏测试设置，我必须配置自己的（稍后再详细介绍）。对于任何构建系统配置，业力的使用仅是我所收集的。他们的构建命令也失败。
我使用摩卡咖啡和柴进行测试套件。这是经典的时间。
开箱即用的ESLINT（失败，稍后将详细介绍）。
计算器组件中包含的所有应用程序逻辑。所有其他都是纯/功能组件。如果我需要构建一个更复杂的应用程序，那么MOBX或REDUX就会井井有条。
MOBX或REDUX也将有助于功能测试。我最初试图将逻辑与组件分解，但是对于修改状态的逻辑，很难保留“此”的上下文。因此，我选择直接在组件中编写逻辑。导入需要从单独的文件中进行状态意识的方法，而没有状态不必要的情况使事物变得复杂（无论如何，这是过度的，因为我们在此应用程序中只有几种方法）。
在国家主题上，JavaScript eval（）将不接受非弦乐操作数。它会很好地处理整数，但是请拿起操作数，因此请帮助您上帝注定要应用！我正在处理该州的所有关键数据作为字符串，以确保不会发生这种情况。
随机注意到，与客户当前生产网站相比，该应用程序从Localhost的Localhost Crumelly在Lightbox评估中得分更高，在PWA，性能，可访问性和最佳实践中，该应用程序在Lightbox评估中得分更高。
在应用程序开发过程中，我试图将额外的依赖项保持在最低水平。
测试套件可以通过yarn test或npm test运行。该测试套件假设您的机器上安装了全局摩卡咖啡。
提前库本身具有与测试有关的开放问题= preactjs/preact＃658他们的解决方法是使用一个鲜为人知的库，称为https://github.com/developit/preakect-jsx-chai/不幸，不幸的是，图书馆似乎对我不起作用。
测试配置很痛苦。 Babel Configs被预先介绍所隐藏。无法访问配置。即使我将测试文件与组件本身相同的DIR，也会获得“意外的令牌”导入。”测试将不得不等待。再次完成，我必须实现另一种替代方案才能进行分离的功能测试。
关于测试的主题，这里有很多与之相关的问题：
preactjs/preeact-compat＃233
preACTJS/realeact＃146
https://gist.github.com/robertknight/88e9d10cff9269c555553e53e5fb8364f47（可悲的是，缺乏直觉的WebPack配置和设置仍然会导致使用这种方法失败）
preACTJS/preeact＃658（开放问题，难以提前测试设置是一个已知问题，没有当前解决方案。）
preactjs/preactct＃560（涉及预先反应的方式，并要求业力作为另一种依赖性。）
https://gist.github.com/developit/9b0bbb57b3e001de67814814c7f4f4de9cbfbf（这是我首先尝试的。也不运气。）
https://preactjs.com/guide/unit-testing-with-enzyme（它们的文档实际上是一个部分。没有提供其确切业力设置的替代方案。）
在覆盖上，ESLINT失败了。我缩进了4个空间。 ESLINT预先反应默认插件设置为标签，该插件导致错误被丢弃。无论如何，测试设置都可以运行，并且可以插入任何ESLINT配置设置。我可以立即重新配置此设置以匹配任何特定于客户的要求。
