Explanation.md

React Structure

/src
  /components
    /Button
    /Notifications
      /__tests__
      /components
        /ButtonDismiss
          /__tests__
          /ButtonDismiss.tsx
          /index.ts
          /ButtonDismiss.scss
      /Notifications.tsx
      /index.ts
      /Notifications.scss
  /scenes
    /Users
      /scenes
        /UserOverview
          /components
            /UserListContainer
              /components
                /UserList
                  /index.ts
                  /UserList.tsx
              /index.ts
              /UserListContainer.tsx
          /index.ts
          /UsersOverview
    /Home
      /__tests__
      /components
        /ButtonLike
          /ButtonLike.tsx
          /index.ts
      /services
        /processData
      /Home.tsx
      /index.ts
      /Home.scss
    /Sign
      /__tests__
      /components
        /FormField
      /scenes
        /Login
        /Register
          /__tests__
          /Register.tsx
          /index.ts
          /Register.scss
  /services
    /users
      /actions.ts
      /api.ts
      /models.ts
      /reducer.ts
    /auth
      /actions.ts
      /api.ts
      /reducer.ts
    /localStorage (example)
  /App.tsx
  /index.tsx
  /store.ts

Rules

• Component can define nested components or services.
• Scene can define nested scenes, components, or services.
• Service can define nested services.
• Nested features can only use from its parent.

Note: By parent feature, I mean a parent, grandparent, great-grandparent etc… You cannot use a feature that is a “cousin”, this is not allowed. You will need to move it to a parent to use it.

Components

• Basic building blocks
• Root components are shared across whole app
• Nested components can only be used by parent
  • Example:
    • Button can be used anywhere
    • Notifications can be used anywhere
    • ButtonDismiss uses Button but can only be used in Notifications
• Components can contain components, and services

Scenes

• Pages of the application
• A component
• Scenes can contain scenes, components, and services

Services

• Not a copmonent
• Self-contained module
• E.g. core business logic
• Api requests should happen through a service

Redux

• To be able to better write acceptance tests, components that needs to show data should recieve it through it's properties. A container component shoud encapsulate the component. The role of this component will be to have a connection to the redux store.

An example could be the UserOverview scene under the Users scene. The overview contains a userlist. The userlist itself is a stateless component that takes a few properties that is being passed to it, throught the UserListContainer component.

Tests

• In a folder called __tests__
• Located next to the file under test.
  • Example: /scenes/Home/index.tsx has tests in /scenes/Home/__tests__/index.tsx

Note: Currently there's a warning with React 16

console.error node_modules\fbjs\lib\warning.js:33
      Warning: React depends on requestAnimationFrame. Make sure that you load a polyfill in older browsers. http://fb.me/react-polyfills

Source

How to better organize your React applications? How to use Redux on highly scalable javascript applications?