构建 React.js Web 应用程序​

更好的命名和文件组织系统React.js 的祸害和优点在于,它不会就如何构建组件和文件提出意见。做你想做的事,它就会成功。但对于每个新项目来说,这都是一个“白板”问题。本文是从构建(并最终重构)专为电影摄影爱好者设计的博客平台前端的人的角度撰写的。除了列出和显示文章外,该应用程序还提供管理控件和完整的富文本编辑套件,由 280 个文件和文件夹组成。有问题的应用程序是 Analog.Cafe。前言 1:“愚蠢”和“智能”组件:不是对文件进行排序的好方法。- app/ - components/ - containers/当我开始开发我的应用程序时,经过一年的 Ruby on Rails 构建 Archie.AI(一个相当固执己见的框架),我遇到了瓶颈,试图弄清楚如何使用 React 构建和命名大量文件。当时最常见的建议是将组件分为纯函数和有状态组件。这种方法的预期是您的组件将不可避免地在其他地方被重用。虽然这可能适用于许多项目,但我看不出所有应用程序都适用。此外,将功能拆分开并将执行相同功能的组件的各个部分放在文件系统的不同角落是适得其反且违反直觉的。通过一些实验

来源:Medium - Archie.AI

构建 React.js Web 应用程序​

构建 React.js Web 应用程序​

更好的命名和文件组织系统

更好的命名和文件组织系统 更好的命名和文件组织系统

React.js 的祸害和优点在于它不会就如何构建组件和文件提出意见。做你想做的事,它就会成功。但对于每个新项目来说,这都是一个“白板”问题。

本文是从构建(并最终重构)专为电影摄影爱好者设计的博客平台前端的人的角度撰写的。除了列出和显示文章外,该应用程序还提供管理控件和完整的富文本编辑套件,由 280 个文件和文件夹组成。所讨论的应用程序是 Analog.Cafe。

280 个文件和文件夹 Analog.Cafe

前言 1:“愚蠢”和“智能”组件:不是对文件进行排序的好方法。

- app/ - components/ - containers/
- app/ - components/ - containers/

当我开始开发我的应用程序时,我花了一年时间使用 Ruby on Rails 为 Archie.AI(一个相当固执己见的框架)构建,我遇到了瓶颈,试图弄清楚如何使用 React 构造和命名大量文件。当时最常见的建议是将组件分为纯函数和有状态组件。

Archie.AI

这种方法的预期是您的组件将不可避免地在其他地方被重用。虽然这可能适用于许多项目,但我看不出它如何适用于所有应用程序。此外,将功能拆分开并将执行相同功能的组件的各个部分放置在文件系统的不同角落是适得其反且违反直觉的。

经过一些实验,我提出了一个更好的系统(如下)。

前言 2:styled-components,它们不是 CSS;它们是组件。

​styled-components 是我在将 CSS 嵌入 React 项目时选择的库。它非常好。

styled-components styles.js 注意: 注意: