UI框架与Styled组件在React中从头开始创建UI？

Question

我最近跳进了React，所以我对许多事情感到很困惑。其中一个是关于大多数人如何在React中设计UI。

在进入之前，我使用Bootstrap通过使用预制组件（如按钮，模态视图，导航等）来设计我的网站的UI。但是，想通了我不能在React中使用它，但我可以使用React-Bootstrap代替。 React-Bootstrap仍然是React中最受欢迎的UI框架吗？我问的是因为我发现了一些其他UI框架，例如Seact UI或React的Material UI。

此外，我找到了styled-components。然而，样式组件让我觉得我需要自己制作每个组件来使用听起来像是花费太长时间。

作为一个非常初学者，我很好奇人们通常如何在React中使用UI？

Answer 1

首先，这个问题没有明确的答案。在styled-components的一般目的不意味着不要使用另一个ui framework。这些公司解决了他们的工程团队所特有的问题。他们有自己的架构。但是单独的程序员会选择一些开源解决方案。

好吧，有些人一起使用或单独使用。这完全取决于您的项目或您的建筑风格。但我仍然会说一些提供观点的东西。

另一方面; UI框架解决了模块化问题。一个例子：你不能创建一个只有css甚至styled-components的模态。你知道，你需要JavaScript。

要同时使用：

• 您可以在Elements Semantic-UI（ReactJS或className的直接元素）上使用，
• 您可以使用styled-components而不是css文件来处理项目的特定部分。例如：Main，Aside，Article，Post，TopNavigation等。
• 如果您更喜欢使用styled-components，也可以在React Native中使用相同的组件。 （React Native没有css文件支持。你需要inline CSS）
• 要仅使用qazxsw poi而不是特定组件，在项目变大之后你会感到困惑。我建议你为每个有意义的元素创建。
• 您可以将开源社区UI部分与您自己的CSS结合使用。
• 使用div时，您不需要CSS（Less，Sass）文件。这意味着，您只能使用JS文件而不是CSS文件，因此您可以在组件中执行动态操作。 styled-components支持几乎所有CSS功能。

要使用独立的Semantic-UI：

我更喜欢styled-components而不是ReactJS bootstrap框架。

• 你不能在React Native中使用Semantic-UI-React的CSS。您应该选择哪个是另一个解决方案，或者实际上是您自己的组件架构。
• 您已准备好使用Semantic-UI-React用于网站/移动网站的每个项目。
• 你必须学习少语的基础知识。
• 您可以更改Semantic-UI-React主题文件中的所有内容。

最后，

• 如果你有大项目或目标;尽管如此，我认为你应该在学习和适应过程中使用variables。
• 如果你仍然不确定你应该做什么，那么你必须尝试所有这些来找到你自己的架构。
• 我认为在学习过程中，你必须关注CSS之前的ReactJS需求（Redux，Router等）。

---

这是我在Stackoverflow的第一个答案。希望答案能帮助您解决问题。