用于创建ReactJS前端的方法或模式是什么，该前端基本上是一系列可以打开/关闭的组件

Question

首先，如果这是错误的Exchange来发布这个问题，很抱歉。

用于创建ReactJS前端的方法或模式是什么，它或多或少是一系列可以动态打开/关闭的组件。在过去的几年里，我与一些较大的公司合作过，其中一些公司建立了某种模式，允许他们创建可以模块化并分散在不同团队中的组件。你不需要整个产品来进行开发，只需要分配给你的模块化部分。从那里你可以用本地服务覆盖远程提供的服务。

我想为我自己的项目基于这种方法构建，但不知道从哪里开始阅读他们用来为每个组件构建npm包的逻辑，然后为了开发的缘故用本地覆盖远程。

Answer 1

老实说，ReactJS是一个强大的框架，它意味着在网站的整个页面中都是可重用和模块化的，无论何时需要在渲染输出中有更改，都可以请求新组件，这就是react超越Angular的地方。如果您正在考虑可重用的方法，以使您的项目开发更快和更容易，Brad frost的原子设计是执行此任务的最佳方法.here是关于原子设计的一个简短示例：考虑一个网站(最多30个页面)；整个网站的每个组件基本上可以分为原子、分子、生物、模板和页面，其中页面构成了网站

原子：原子是任何网页的基本构件例如:文本、链接、图像、图标、按钮和分子：由重复的原子(有时是分子)组成例如:一个标题和一个副标题标签

具有相同的样式，可以在其他页面或按钮和文本等中重复

有机体：有机体是页面的单独部分，主要由原子和分子组成，在极少数情况下甚至由其他有机体组成。它们在同一页或多页中重复，例如:页眉或页脚

Templates ：模板由原子、分子和有机体组成，它们提供了内容在每个页面中显示的基本结构，这对于大多数网站来说通常是相同的，例如:页眉和页脚在一起

pages：以上所有组件的组合

下面的React代码片段包含bootstrap原子设计、BEM方法的一部分

render(){
  return (
    <div className="card  ch-molc-body-card">
      <CardList name="card-body ">
        <h1 class="ch-atom-h1 ch-molc-body-card__h1">hello there</h1>
        {
      this.state.monsters.map(monster =>(<h1 key={monster.id}>{monster.name}</h1>
      ))}
      </CardList>
      
  </div>
  );
  }

​