基于React的项目是否有正式的风格指南或命名约定？

组件/字段/索引.js

导入React，{Component}来自“React”；
导出类输入扩展组件{
状态={值：'}；
handleChange=（{target:{value}}）=&gt{
this.setState（{value}）；
};
渲染=（）=&gt(
&lt；input type=“text”value={this.state.value}onChange={this.handleChange}/&gt；
);
}
导出类textarea扩展组件{
状态={值：'}；
handleChange=（{target:{value}}）=&gt{
this.setState（{value}）；
};
渲染=（）=&gt(
&lt；文本区域
type=“text”
value={this.state.value}
onChange={this.handleChange}
/&燃气轮机；
);
}

组件/App/index.js

导入React，{Fragment}来自“React”；
从“./字段”导入*作为字段；
常量应用=（）=&gt；(
&lt；碎片&gt；
&lt；fields.input/&gt；
&lt；fields.textarea/&gt；
&lt；碎片&gt；
);
导出默认应用程序；

作为一般的经验法则，我完全避免使用点符号。它感觉很笨拙，可能会让其他不知道字段是如何构造的开发人员感到困惑。另外，我不喜欢在一个文件中堆叠多个组件，然后将它们作为一堆导入。此外，该文件可能会变得非常大，并且导航和调试起来非常麻烦（下面将对此进行详细介绍）

也就是说，为了保持结构简单，我喜欢将主目录保持小写：

├── dist//要提供的已编译应用程序文件
|   ├── css
|   |   ├── main.[contenthash:8].css
|   |   └── main.[contenthash:8].css.map
|   ├── js
|   |   ├── main.[hash].js//根据应用程序大小，这可能包含多个用于代码拆分的js文件
|   |   └── main.[hash].js.map
|   ├── 媒体
|   |   └── [hash].[ext]//字体和图像等静态资产
|   └── 图标文件
|   └── index.html
|
├── config//支持“webpackdevserver”配置文件
|   ├── devServer.js
|   ├── envs.js
|   ├── optimization.js
|   ├── output.js
|   ├── path.js
|   ├── plugins.js
|   └── rules.js
|
├── 平民的
|   ├── 图标文件
|   └── index.html
|
├── src
|   ├── 动作//重复动作
|   ├── 组件//只显示“东西”的有状态和无状态可重用组件——有状态组件更改和操作UI
|   ├── 容器//利用可重用“组件”来CRUD数据和/或连接到redux的有状态组件
|   ├── 图像
|   ├── 页面//访问“/路线”时利用组件/容器显示某些内容
|   ├── 还原剂//还原剂
|   ├── root//aka“&lt；App/&gt；”，它将“路由”、redux和其他顶级支持文件组合到一个位置
|   ├── 路由//将“页面”分配给“/路由”
|   ├── 样式//所有“组件”使用的共享和/或全局样式
|   ├── 类型//重复类型
|   ├── utils//支持应用程序文件：如测试设置、自定义多边形填充、axios配置等
|   └── index.js//一个简单的文件，“ReactDOM.render”是“App”
|
├── server.js//express安装程序为“dist”文件夹提供服务
└── webpack.config.js

然后在component文件夹中，我将调用我的组件来表示如下内容：

└── 组件
└── 输入
├── __测验__
|   └── Input.test.js//“index.js”的jest单元测试
├── index.js//要导出的所有必需代码/样式
└── styles.scss//“index.js”所需的样式

为什么是这种结构？

• 可重用组件，可随时随地使用
• 与输入相关的所有内容都包含在此文件夹中。
因此，我可以把它交给别人，他们可以把它放在自己的应用程序中使用
• Webpack已设置为自动导入index.js，因此导入非常容易，无需遍历大量嵌套文件：从“组件/输入”导入输入（另外，无需指定要使用的确切的js文件，因为“index.js”包含所有必需的代码）

└── 组件
├── 输入//小写名称来描述它是一个“纯”函数——实际函数将是一个PASCALCASE“输入”
|   ├── input.test.js//“input.js”的jest单元测试
|   ├── input.js//要导出的所有必需代码/样式
|   └── styles.scss//“input.js”所需的样式
|
└── 侧边栏//因为它是一个“类”
├── Sidebar.test.js//“Sidebar.js”的jest单元测试
├── Sidebar.js//要导出的所有必需代码/样式
└── styles.scss//“Sidebar.js”所需的样式

&lt_默认值/&gt；

&lt_默认值/&gt；
&lt_默认值/&gt；
&lt_默认值/&gt；

&lt；输入className=“snake case”type=“text”value=”“onChange={this.handleChange}/&gt；

从“/styles.css”导入{camelCaseClassName}；

&lt；输入className={camelCaseClassName}type=“text”value=”“onChange={this.handleChange}/&gt；