UI框架与样式化组件在React中从零开始创建UI？

Question

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

在进入之前，我使用Bootstrap通过使用预制组件（例如按钮，模式视图，导航等）来设计网站的UI。但是，发现我不能再在React中使用它，但是我可以React-Bootstrap代替使用。是React-Bootstrap仍然是最流行的UI框架作出反应呢？我之所以这样问是因为我找到了其他一些UI框架，例如语义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）
• 如果只使用div而不是特定的组件，当项目变大时你会感到困惑。我建议您为每个有意义的元素创建。
• 您可以将开源社区的 UI 部分与您自己的CSS结合起来。
• 使用时不需要CSS（Less、Sassstyled-components ）文件。这意味着，您将只处理JS文件而不是CSS文件，因此您可以在组件中执行动态操作。styled-components支持几乎所有CSS功能。

要使用独立的语义 UI：

我Semantic-UI-React更喜欢ReactJS引导框架。

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

最后，

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

这是我在 Stackoverflow 上的第一个回答。希望以上的回答能够帮助到您解决您的疑虑。