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

Question

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

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

此外，我还发现了styled-components。然而，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 结合起来。
• 使用 styled-components 时，您不需要 CSS(Less、Sass)文件。这意味着，您将仅处理 JS 文件而不是 CSS 文件，因此您可以在组件中执行动态操作。 styled-components支持几乎所有 CSS 功能。

要使用独立的语义 UI:

I prefer Semantic-UI-React instead of ReactJS bootstrap frameworks.

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

最后，

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

<小时/>

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