I recently read about the hiring process for TailwindCSS. Part of the process included a take-home test for candidates to complete over the space of two weeks.
我最近阅读了有关TailwindCSS的招聘过程的信息。 该过程的一部分包括对考生进行带回家的测试 ，以使其在两周内完成。
Bored of building to-do apps and with a growing appreciation of Tailwinds class-based system, that allows you to style components without using any custom CSS, I decided to give it a try to practice some of what I’ve been learning with React Hooks.
我厌倦了构建待办应用程序，并且对基于Tailwinds类的系统越来越满意，这使您可以在不使用任何自定义CSS的情况下对组件进行样式设置，因此我决定尝试通过React练习一些我学到的东西。 钩子 。
Screenshot of product layout UI 产品布局UI的屏幕截图In the article below, I mostly demonstrate how React Hooks can be used to manipulate state and implement the interactive functionality of the program (including styling changes).
在下面的文章中，我主要演示如何将React Hooks用于操纵状态和实现程序的交互功能(包括样式更改)。
Check out the project on GitHub. The live URL to my solution is here.
在GitHub上检查项目。 我的解决方案的实时URL在这里 。
I broke down the different sections to decide on which parts needed to be interactive or reactive, examining the elements of the concept and seeing if they met the criteria listed in the docs. The image gallery would change data over time based on user input, so fit the criteria for using state.
我细分了不同的部分，以决定哪些部分需要交互或React ，检查概念的元素并查看它们是否满足文档中列出的条件。 图片库会根据用户输入随时间更改数据，因此适合使用state的标准。
More specifically, the URL for the featured image of the gallery would be updated using React Hooks to which ever thumbnail the user clicked.
更具体地说，画廊的特色图片的URL将使用React Hooks更新，用户单击该缩略图即可。
The border for the active thumbnails was slightly trickier to implement as I wasn’t sure on what the design pattern would look be. For example, if we just needed to add a border to the thumbnail that was clicked, and didn’t need it to toggle, the functionality would be a lot easier!
活动缩略图的边框很难实施，因为我不确定设计模式会是什么样。 例如，如果我们只需要在单击的缩略图上添加边框，而无需切换边框，则功能会容易得多！
The solution I used was found by looking at tutorials on tabs components and involved creating a new state for active that would update to the clicked thumbnail (using the clickHandler function). The thumbnailSelect function would then compare the active thumbnail to the thumbnail index, using a ternary expression which, when it resolved true, resulted in using a border with a bolder outline.
通过查看选项卡组件上的教程找到了我使用的解决方案，并涉及为active创建一个新状态，该状态将更新为单击的缩略图(使用clickHandler函数)。 然后， thumbnailSelect函数将使用三元表达式将活动缩略图与缩略图索引进行比较，该三元表达式解析为true时，将使用带有粗体轮廓的边框。
Thumbnail Component Example 缩略图组件示例The other functionality that used React Hooks was for the product price, which would change in two places based on the user input of the form, including the product description component, and the footer. I created a state to manage the change for the price (ampPrice).
使用React Hooks的其他功能是针对产品价格的 ，该价格将根据表单的用户输入在两个地方更改，包括产品描述组件和页脚。 我创建了一个状态来管理价格( ampPrice )的更改。
Initially, I decided to approach the solution by breaking down the form options into three separate groups and focused on updating the price based on the input from just one group as a test.
最初，我决定通过将表单选项分为三个单独的组来解决该问题，并专注于根据一组测试的输入来更新价格。
In addition to the state for ampPrice, I also created one for active(same as the thumbnails for the gallery), which would update to whichever form option was selected. I also created a state for the cost associated with the option (costState) that would be added to the price. The updatePrice function, combined the total cost of all the options, across all of the groups.
除了ampPrice的状态ampPrice ，我还为active创建了一个active (与图库的缩略图相同)，该状态将更新为选择的任何一个表单选项。 我还为与选项相关的成本创建了一个状态( costState )，该状态将被添加到价格中。 updatePrice函数组合了所有组中所有选项的总成本。
Group Data Example 组数据示例I think whilst my solution for using React Hooks to build the gallery was reasonable robust, I would ideally like to organise the form groups into individual components to make them a little more reusable. Doing so, might involve updating the state from the child component that is two or three levels deep, which may take us into implementing redux in the program.
我认为，尽管我使用React Hooks构建画廊的解决方案相当健壮，但理想情况下，我还是希望将表单组组织到各个组件中，以使其更具可重用性。 这样做可能涉及从两个或三个级别的子组件中更新状态，这可能使我们能够在程序中实现redux 。
In general, though, I think React Hooks are an excellent way to build interactive web applications and React components work beatifully with Tailwind CSS. Having now used both React and Vue, I can honestly say that they are both viable options and think it’s good to have an awareness of both, as the trends are always changing.
不过，总的来说，我认为React Hooks是构建交互式Web应用程序的绝佳方法，并且React组件可以与Tailwind CSS完美结合。 现在已经使用了React和Vue，我可以坦白地说，它们都是可行的选择，并且由于趋势总是在变化，因此对这两者有所了解是一件好事。
Thank you for reading and please let me know in the comments if this article was helpful in any way.
感谢您的阅读，如果本文对您有帮助，请在评论中告知我。
翻译自: https://levelup.gitconnected.com/practicing-react-hooks-using-the-tailwindcss-ui-take-home-test-89ce27ef34c9
相关资源：cra-tailwindcss-in-js：使用css-in-js解决方案将Tailwind CSS集成到Create React App设置中-源码