让我们假设我是一个不错的JS程序员。我可以轻松地做React.js开发。我也可以在某种程度上编写HTML和CSS。但是，我不能从头开始构建一个网页，即定义HTML结构（比如React组件或纯HTML），添加一些CSS并获得全闪亮的响应式现代外观花式网页。因此，我与一位设计师合作，他使用某种黑魔法（或者可能是WYSIWYG工具，或像wix.com这样的服务）来制作网页原型。
所以，我得到的是一堆html文件，图像，CSS样式，也许还有一些javascript。
现在我需要将所有这些转换为React的组件层次结构。我确信我能做到这一点，在工作完成后，我会从技术和美学的角度来看一个闪亮的新网站。 但是，我们都知道我们在敏捷环境中工作。后来，设计师要我改变一些东西。 ＆＃39;添加黑色边框＆＃39;他说。这里的事情失控了。 我应该这样做（手动查找css中的样式并添加边框）？如果需要更改更复杂怎么办？喜欢交换页眉和页脚？ 他应该这样做吗？ （再次重新生成那些源htmls / css / images）之后会发生什么？我应该对整个网站进行区分，以了解已经发生了哪些变化并重新实现整个组件结构以反映变化？ 是否有任何可接受的方法来解决这个邪恶的圈子？也许一个工具将输入丑陋的html代码映射到正确完成的React代码？ 或许我完全错了，我应该自己学习设计艺术？
编辑：好的，因为每个人都误解了这个问题，这是更短的版本。如果Templater更改了React站点中已经实现的模板，除了手动区分和修补源css / html文件的所有更改外，我该怎么办？
答案 0 :(得分：6)
你听起来有点粗略。如果您想构建网站，尤其是维护网站，您必须了解CSS和HTML 。设计师可能永远不会永远在你身边，你最终会陷入困境。
您描述的流程类型，设计人员创建所有结构并为您提供完整的html和css代码仅适用于jQuery时代。您的脚本插件非常简单，并且不需要进行太多更改，因为它与实际的html分离，您可以使用dom ID进行定位。
它如何在Uber工作，但我确信在很多其他公司中，设计师负责设计，但就是这样，其余部分取决于你。你必须在他之后再做一次实际的实施。
由于复制可能非常困难且近似，您可以使用Invision，设计人员将在其中创建模型，但作为开发人员，您可以获取元素的所有css属性，从而使集成更容易do（dunno，如果wix具有相同的功能）。
如果您的设计师更新了设计的一部分，您就可以直接了解更改内容以及需要更新的组件。这是拥有代码而不是从其他人那里获取代码的好处之一（特别是如果它是自动生成的）。
答案 1 :(得分：4)
通常，我要求Templater / HTML将他们的工作放到ReactComponents中，为此我设置了一个简单的空React应用程序，使用Routes定义，并使用它们，它肯定会为您节省大量时间，因为你可以并行应用某些逻辑或重新考虑应用程序的某些部分，并要求进行更改。
要真正有效，他们应该首先创建一个纯组件库，其中每个组件和它的样式都与应用程序的其余部分隔离，让它们将默认值放在里面，然后让它们使用在完成纯组件之后，您可以使用容器和逻辑来编排应用程序。
答案 2 :(得分：0)
当你从designer / html编码器中获得平面html和css页面时，你提到的第一个流程是正常的。
如果您正计划使用react / angular / vue创建那些页面......
您不需要设计师的任何javascript。
您需要采取的步骤：
1）从设计师那里获得html和css 2）在纸上设计您的块到组件：标题，导航栏，侧边栏，主要内容，页脚，帖子列表，帖子，评论列表，评论等 3）逐个开始构建这些组件
*我们假设我们正在使用react
4）确保每个组件都是独立的，可扩展的，以便将来轻松更新。 5）确保你有测试！学习TDD 6）运送你的应用程序
接下来更新周期......
1）您的设计师为您提供新设计的页面 2）您可以使用设计器html和css * PARTLY并在您的代码中使用它 3）确保扩展组件或正确更新 4）测试仍应正常工作
在开始深入研究所有工作之前的一些注意事项：
但是还有更多工作要做，祝你好运，这很有趣！ ：）
答案 3 :(得分：0)
这听起来像是一个来自php编程背景的问题，人们会问模板。 React的工作方式非常不同，如果您希望处于一个基础站点的位置，并希望对其进行更改，那么您需要设置一个开发环境，这样一旦您进行了更改，您就会＆ ＃39;运行构建＆＃39;这将从您的开发环境中的源代码生成捆绑的缩小的javascript文件，随时可用于生产，然后您可以像使用任何站点一样将其推送到服务器。
这样工作的原因被认为是前进的方向，因为它很容易将你的网站逻辑与它的aestetic分离。因此，为元素添加边框变得非常简单，只需添加一行css，运行构建，将最新版本的应用程序上传到服务器并完成。只要从正确开始写入，就应该能够确信视觉变化只会直观地影响您的网站。更改类名或移动元素不会破坏逻辑，因为逻辑应该在您的存储/操作（redux / flux存储方法）中或在组件代码（功能组件）的本地中。