reactjs - 现代 React.js 开发的正确 'workflow' 是什么?

标签 reactjs frontend wysiwyg agile methodology

假设我是一个不错的 JS 程序员。我可以轻松地进行 React.js 开发。我还可以在一定程度上编写 HTML 和 CSS。然而,我无法从头开始构建一个网页,即定义 HTML 结构(比如用 React 组件或简单的 HTML),添加一些 CSS 并获得 Shiny 的响应式现代外观的精美网页。因此,我与一位设计师合作,他使用某种黑魔法(或者可能是所见即所得工具,或者像 wix.com 这样的服务)来制作网页原型(prototype)。

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

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

编辑:好的,由于每个人都误解了这个问题,这里是较短的版本。如果 Templater 更改了 React 站点中已实现的模板,除了手动比较和修补源 css/html 文件的所有更改之外,我还能做什么?

最佳答案

你的身份对我来说听起来有点粗略。如果您想构建网站,尤其是维护网站,您必须了解 CSS 和 HTML。设计师可能不会永远为您服务,您最终会陷入困境。

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

在 Uber 的运作方式是设计师负责设计,但我相信在其他很多公司也是如此,但仅此而已,剩下的就取决于你了。您必须在他之后进行第二遍才能真正实现。

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

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

关于reactjs - 现代 React.js 开发的正确 'workflow' 是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43434236/

相关文章:

reactjs - Wordpress Gutenberg PluginDocumentSettingPanel 不适用于控件?

javascript - 仅在客户端导出 CSV 是一种不好的做法吗?

javascript - 如何用reactjs实现长滚动和分屏?

javascript - CKEditor 在旧版 Internet Explorer 中不显示

reactjs - 浏览器列表错误: Unknown browser query `dead` in React/Express App

javascript - 在 React/TypeScript 中的循环内切换 CSS 类

reactjs - react typescript : How to import component?

javascript - 加载 facebook 页面显示每个帖子的线框。为什么?

ide - 为什么源代码是纯文本的?

asp.net - 需要免费的 ASP.NET WYSIWYG 控件