Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Guide how to organize your app code in modular way

NotificationsYou must be signed in to change notification settings

modularcode/modular-styleguide

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 

Repository files navigation

An opinonated guide about how to organize your app code in modular way

Naming conventions

UsePascalCase for the component-related filenames and their directories, usecamelCase for the rest of the files.

# Badsrc/  Main.js  someComponent/    someComponent.jsx
# Goodsrc/  main.js  otherNonComponentFile.js  SomeComponent/    SomeComponent.jsx

There can be an exceptions for this rule though when declaring TypeScript interfaces

# badsrc/  user.ts
# goodsrc/  User.ts
# even bettersrc/  _types/    User.ts

Use file extensions that make more sense (assuming SomeComponent containsJSX markup)

# Badsrc/  SomeComponent/    SomeComponent.js
# Goodsrc/  SomeComponent/    SomeComponent.tsxsrc/  SomeComponent/    SomeComponent.jsx

Name the test files with.test.{extension} or.spec.{extension}

# Badsrc/  someFile.js  someFileTest.js  SomeComponent/    SomeComponent.jsx    SomeComponentTest.jsx
# Goodsrc/  someFile.js  someFile.spec.js  SomeComponent/    SomeComponent.jsx    SomeComponent.spec.jsx

UseBase,The,App naming convention for reusable components

# BadButton/Dropdown/Footer/Header/Icon/Sidebar/Typography/
# GoodBaseButton/BaseDropdown/BaseIcon/BaseTypography/TheFooter/TheHeader/TheSidebar/
# GoodAppFooter/AppHeader/AppSidebar/BaseButton/BaseDropdown/BaseIcon/BaseTypography/

Underscore the aggregational non-component directories

# Badsrc/  config/  layouts/  OtherComponent/  services/  SomeComponent/  styles/
# Goodsrc/  _config/  _layouts/  _services/  _styles/  OtherComponent/  SomeComponent/

In the bad example we need to spend more time figuring out what type of directories are responsible for which things. Also the ordering is messed up, we have organizational directories likeservices/ in between two component directories.

In contrast in the good example we can immediately visually distinguish ComponentDirectories from non-component directories. The IDEs will show the directories with underscore on top of the project file explorer which is very convenient.

Code organization

Keep components self-contained

# Badsrc/  assets/    MyComponentRelatedImg.svg  MyComponent/    MyComponent.jsx  styles/    MyComponent.scsstests/  unit/    MyComponent.spec.jsxstorybook/  MyComponent.stories.mdx
# Goodsrc/  MyComponent/    MyComponent.jsx    MyComponent.scss    MyComponent.spec.jsx    MyComponent.stories.mdx    MyComponentRelatedImg.svg
# Goodsrc/  MyComponent/    _tests/      MyComponentMocksData.jsx      MyComponentMocks.jsx      MyComponent.spec.jsx      MyComponent.jsx    MyComponent.scss    MyComponent.stories.mdx    MyComponentRelatedImg.svg

In the bad example the component related files are scattered across the project directories, so when working on that component we will have to jump back and forth through directories which is super inefficient.

In contrast in the good example all the files related to the component are under the hand, which makesMyComponent more maintainable and self-contained.

Place reusable components into_common or_components directory

# Badsrc/  components/    BaseButton.jsx    TheHeader.jsx
# Badsrc/  components/    BaseButton/      BaseButton.jsx    TheHeader/      TheHeader.jsx
# Goodsrc/  _components/    BaseButton/      BaseButton.jsx    TheHeader/      TheHeader.jsx
# Goodsrc/  _common/    BaseButton/      BaseButton.jsx    TheHeader/      TheHeader.jsx

The hierarchy of components should represent the app hierarchy

# Badsrc/  components/    Button/    Title/      pages/    AuthPage/    AuthLoginPage/    AuthSignupPage/    BlogPage/    BlogArticlesPage/    BlogArticlePage/    BlogArticleEditPage/    DocsPage/    TutorialPage/    TutorialItemPage/      templates/    Header/    Sidebar/    Footer/      utils/    auth.js
# Goodsrc/  _common/    BaseButton/    BaseTitle/    TheHeader/    TheSidebar/    TheSidebar/      AuthPage/    _common/      AuthHeader/    _services/      authService.js    AuthLoginPage/    AuthSignupPage/      BlogPage/    BlogListPage/    BlogItemPage/    BlogEditorPage/      DocsPage/    TutorialsPage/    TutorialsListPage/    TutorialsItemPage/

About

Guide how to organize your app code in modular way

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published
[8]ページ先頭
©2009-2025 Movatter.jp