现代 React.js 开发的正确“工作流程”是什么？ [关闭]答案

【问题标题】：What is the proper 'workflow' of modern React.js development? [closed]现代 React.js 开发的正确“工作流程”是什么？ [关闭]
【发布时间】：2017-04-16 06:02:14
【问题描述】：

假设我是一个不错的 JS 程序员。我可以轻松地进行 React.js 开发。我也可以在一定程度上编写 HTML 和 CSS。但是，我无法从头开始构建网页，即定义 HTML 结构（比如根据 React 组件或纯 HTML），添加一些 CSS 并获得全光彩的响应式现代外观精美网页。因此，我与一位设计师合作，他使用某种黑魔法（或者可能是所见即所得的工具，或者 wix.com 之类的服务）来制作网页原型。

所以，我得到的是一堆 html 文件、图像、css 样式，也许还有一些 javascript。

现在我需要将所有这些转换为 React 的组件层次结构。我确信我可以做到这一点，完成工作后，我得到了一个闪亮的新网站，从技术和美学的角度来看都很漂亮。但是，我们都知道我们在敏捷环境中工作。后来，一位设计师想让我改变一些东西。 “添加黑色边框”他说。事情在这里失控了。我应该这样做（手动查找css中的样式并添加边框）吗？如果需要的更改更复杂怎么办？比如交换页眉和页脚？他应该这样做吗？（再次重新生成那些源 htmls/css/images）之后会发生什么？我应该区分整个网站以了解发生了什么变化并重新实现整个组件结构以反映变化吗？是否有任何公认的方法来解决这个邪恶的循环？也许是一个将输入的丑陋 html 代码映射到正确完成的 React 代码的工具？或者也许我完全错了，我应该自己学习设计艺术？

编辑：好的，因为每个人都误解了这个问题，这里是较短的版本。如果 Templater 更改了已经在 React 站点中实现的模板，除了手动 diff 和修补源 css/html 文件的所有更改外，我还能做什么？

【问题讨论】：

你应该这样做。这是 web 开发的本质，如果有 css 更改，则更改 css。如果需要交换页眉和页脚，则移动组件。没有要避免的“邪恶圈子”，如果发生变化，那就去做吧。你为什么要区分整个网站？设计师应该能够指出设计中的更改，而您只需进行这些更改。如果你做不到，那么不要担心学习设计艺术，而是学习 html 和 css。
我投票结束这个问题，因为它应该在 Software Engineering SE 上。
我投票结束这个问题，因为它应该在 Software Engineering SE 上
这个问题是题外话，因为它不在适用于本网站的问题范围内，如What topics can I ask about here? 中定义的那样，另请参阅：What types of questions should I avoid asking? 您也许可以在 @ 上获得帮助987654323@.

标签： reactjs frontend wysiwyg agile methodology

【解决方案1】：

对我来说，你听起来有点粗略。如果您想建立一个网站，尤其是维护它，您必须了解 CSS 和 HTML。设计师可能不会永远在你身边，你最终会陷入困境。

您描述的那种流程，设计师创建所有结构并为您提供完整的 html 和 css 代码，这仅在 jQuery 时代有效。您的脚本插件非常简单，不需要太多更改，因为它与实际的 html 分离，您可以使用 dom id 进行定位。

它在 Uber 是如何运作的，但我确信在很多其他公司中，设计师负责设计，但仅此而已，剩下的就看你了。您必须在他之后进行第二次通过才能实际实施。

由于复制可能非常困难和近似，您可以使用Invision，设计师将在其中创建模型，但作为开发人员，您可以获得元素的所有 css 属性，从而使集成更容易（不知道wix是否具有相同的功能）。

如果您的设计师更新了设计的一部分，您就可以直接知道发生了什么变化以及需要更新哪些组件。这是拥有代码而不是从别人那里获取代码的好处之一（尤其是如果它是自动生成的）。

【讨论】：

我在问如果设计师以后更新设计会发生什么。我应该重做所有（或部分）已经完成的工作吗？
不，只是更新的部分。使用 react 组件架构，并且由于您拥有最关键部分的代码，因此很容易知道需要更改的内容。
在我的回答中添加了这部分。
好吧，我不是要求设计师做我的工作。我知道 HTML/CSS 足以将 html 文件的更改部分复制并粘贴到 React 组件中。但是，我不想每次设计人员希望更新按钮形状时都想要这样做，因为我基本上需要再次执行相同的工作。（复制 - 适应 React - 粘贴一段 HTML/CSS）。
如果设计师更新了按钮形状，你就不用去适应，也不需要粘贴html。您只需要更新所述按钮的样式属性。那会很快。

【解决方案2】：

获取 html 文件
在 React 中创建路由器
将基本布局内容迁移到布局组件中
将页面内容迁移到 PagesComponents
将常用组件迁移到您的 ComponentsLibrary（导航、按钮等）中
用新创建的组件替换常用的 html 部分
应用逻辑，等等。重构，重构，重构...... :)

通常，我要求 Templater/HTML 将他们的工作放入 ReactComponents，为此我设置了一个简单的空 React 应用程序，带有路由定义，并使用它们，它肯定会为你节省很多时间，因为你可以并行应用一些逻辑或重新考虑应用程序的某些部分，并要求更改。

为了真正高效，他们应该从创建一个纯组件库开始，其中每个组件及其样式与应用程序的其余部分隔离，让他们将默认值放入其中，然后让他们使用props，纯组件完成后，你可以用容器和逻辑来编排你的应用程序。

【讨论】：

那么，有一个模板人吗？
是的，最好在同一个范围/git repo 中工作，而不是分离
到目前为止，这是最接近我预期的答案。
好吧，我不认为有一个大师级的处理方式，你的业务每天都在发展，所以第一天你会手动做，以后其他人会帮你做，一段时间后，您的团队会很好地做出反应，您无需将 HTML 创建外包，而是在内部进行。
所以，这里的最终答案是：设计师本人必须是 React 开发者。我说的对吗？

【解决方案3】：

您提到的第一个流程是可以的，当您从设计器/html 编码器中仅获得平面 html 和 css 页面时。

如果您打算使用 react/angular/vue 来创建这些页面...

您不需要设计师提供任何 javascript。

您需要采取的步骤：

1) 从设计师那里获取 html 和 css 2) 在纸上设计你的块到组件：页眉、导航栏、侧边栏、mainContent、页脚、PostsList、Post、CommentsList、Comment 等 3) 开始一个一个地构建这些组件

*假设我们正在使用 react

4) 确保每个组件都是独立的且可扩展的，以便将来轻松更新。 5）确保你有测试！学习 TDD 6) 发布您的应用

下一个更新周期...

1) 您的设计师为您提供新设计的页面 2）您可以使用设计器 html 和 css *PARTLY 并在您的代码中使用它 3）确保您扩展您的组件或正确更新 4) 测试应该仍然可以正常工作

开始深入研究所有工作之前的一些注意事项：

学习 html、css 以及如何正确构建简单页面
你可以试试bootstrap，超级好用
学习反应（如果那是你想要使用的）
您需要构建代码，因此您需要 webpack 或任何工具。

但是还有很多工作要做，祝你好运，这很有趣！ :)

【讨论】：

嗯，这基本上就是我要问的，重述。如果设计师更改了我已经重新格式化的 html/css 以适应我闪亮的新 React 结构，我将很难找出真正改变的内容并将其修补到工作代码中。那么，我想问是否有一种公认的技术可以最大限度地减少这种开销？

【解决方案4】：

这听起来像是一个来自 php 编程背景并使用模板工作的人会问的问题。 React 的工作方式非常不同，如果你想拥有一个基础站点并希望对其进行更改，那么你需要设置一个开发环境，这样一旦你进行了更改，你就会'运行一个构建'，它将从您的开发环境中的源代码生成您捆绑的缩小 javascript 文件，为生产做好准备，然后您可以像使用任何站点一样将其推送到服务器。

这样工作的原因被认为是前进的方向，因为它很容易将您的网站逻辑与其美学分离。因此，为元素添加边框就像添加一行 css、运行构建、将最新版本的应用程序上传到服务器并完成一样简单。只要一开始就写得正确，您就应该能够自信地工作，即视觉上的变化只会在视觉上影响您的网站。更改类名或移动元素不会破坏逻辑，因为逻辑应该在您的存储/操作（redux/flux 存储方法）或本地组件代码（功能组件）中。

【讨论】：

不，不是。请查看我的编辑。
根据您的编辑，我想我明白了。 React 应用程序背后的想法是，它只使用它提供的数据，如果要对其进行操作，那么它会向后端发送一条消息：“这里 - 用户 X 想做 Y”，然后服务器根据数据更新数据根据收到的指令，然后向每个客户端发送一条消息，说明数据已更新，他们应该重新呈现。话虽如此，您的想法是您不会区分服务器上的内容，而是将其擦除并替换为您对客户端应用程序进行更改时生成的新客户端包。