Code Style

We want to follow a common code style convention across all projects to maximize reusability and facilitate collaboration. We have chosen carefully so that it allows us to write robust, secure and performant applications with more concise and readable code.

Code Style

  • Functional JavaScript.

  • React Hooks.

  • Separate by Concern.

  • Descriptive Naming.

  • Declarative Programming.

  • Avoid Hasty Abstractions.

  • Isolated Component State.

  • Self-documenting. Clean Code.

  • No semis, no var, use const.

  • Component Error Boundaries.

Hooks

Hooks solve a wide variety of seemingly unconnected problems in React that we’ve encountered over five years of writing and maintaining tens of thousands of components.

  • It’s hard to reuse stateful logic between components.

  • Complex components become hard to understand.

  • Classes confuse both people and machines

Source https://reactjs.org/docs/hooks-intro.html#motivation

Some advantages of react hooks in conjunction with context api.

  • Prevents prop drilling.

  • Allows to follow single responsibility principle.

  • Improves composability and reusability.

  • More extensibility and maintainbilty.

  • It's more readable code ( It's easier to reason about and removes clutter ).

  • Easier to debug and test.

File Structure

.
├── index.js ......................... Entry Point
├── components ....................... Reusable Components
│ ├── AdminContainer.js
│ ├── AdminHeader.js
│ ├── AdminProvider.js
│ └── ...
├── hooks ........................... Reusable Hooks
│ ├── useWallet.js
│ └── ...
├── routes .......................... Container Components by Route
│ ├── index.js
│ ├── admin.js
│ ├── user.js
│ ├── profile.js
│ └── ...
└── library ......................... APIs
└── somelib.js

Component Reducer Pattern ( useContext + useReducer )

This pattern is commonly used across the codebase to manage the state of the different components. Unlike traditional Redux architecture where you use a global store, in Component Reducer Pattern each component is responsible for handling it own state. That allows better separation of concerns, makes the codebase much concise and understable and easier to update and maintain, as you know everything is self-contained and changes won't have side effects in other components.

See more https://github.com/blockmatic/react-dapp-stack