UI 框架与样式化组件在 React 中从头开始制作 UI？

Question

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

在开始之前，我使用 Bootstrap 通过使用按钮、模式视图、导航等预制组件来设计我的网站的 UI。但是，发现我不能再在 React 中使用它，但我可以使用 React-Bootstrap 代替。 React-Bootstrap 仍然是 React 中最流行的 UI 框架吗？我之所以这么问，是因为我发现了一些其他 UI 框架，例如 Semantic UI 或 React 的 Material UI。

另外，我找到了styled-components。但是，styled-components 让我觉得我需要自己制作每个组件才能使用，这听起来需要很长时间。

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

Answer 1

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

好吧，有些人一起或单独使用。这完全是关于你的项目或你的建筑风格。但我还是会说一些东西来表达观点。

另一方面； UI 框架 用于解决模块化问题。一个例子：即使styled-components，您也不能仅使用 css 创建 模态。你知道，你需要 JavaScript。

同时使用：

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

要使用独立的 Semantic-UI：

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

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

最后，

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

---

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