Learn more: react-app structure

azinit commented 3 years ago

Redux

App

[x] google: pages vs features?
[ ] atomic design?
[ ] features?
[ ] pages?
[ ]
[ ]
[ ]
[ ]

azinit commented 3 years ago

WIP: Итоги

API

api/

Store

redux-thunk
redux-saga

Components

pages/ (- features/)
components/

azinit commented 3 years ago

https://www.smashingmagazine.com/2016/09/how-to-scale-react-applications/

Differentiate between containers and components.

Не всегда нужно, порой проще использовать хуки

Structure your files by feature.

Изучаем) Главный аргумент - "все лежит вместе, и легко масштабируется в дальнейшем"

While this works fine for examples, once you have hundreds or potentially thousands of components, development becomes very hard. To add a feature, you would have to search for the correct file in half a dozen different folders with thousands of files. This would quickly become tedious, and confidence in the code base would wane.

Use CSS modules and PostCSS Auto Reset.

Много минусов
Use redux-saga to:
- have readable and testable asynchronous flows,
- tie together your decoupled components.
  
  Надо будет глянуть

azinit commented 3 years ago

https://jaysoo.ca/2016/02/28/organizing-redux-application/

Rule #1: Organize by feature

to focus on the feature at hand, instead of having to worry about navigating the entire project.

It may seem reasonable to group similar objects together like this (controllers with controllers, components with components), however as the application grows this structure does not scale.

When you add and change features, you’ll start to notice that some groups of objects tend to change together. These objects group together to form a feature module. For example, in a todo app, when you change the reducers/todos.js file, it is likely that you will also change actions/todos.js and components/todos/*.js.

On the surface, organizing by feature may seem like an aesthetics concern, but as we will see in the next two rules, this way of structuring projects will help simplify your application code.

Rule #2: Create strict module boundaries

complexity as the complecting (or interleaving) of things.

The relevence of complexity to project structure is that when you place objects in close proximity to one another, the barrier to couple them lowers dramatically.

By artificially creating strict module boundaries, we can simplify our application code, and in turn increase the maintainability of our application. Instead of haphazardly reaching inside other modules, we should think about forming and maintaining contracts between them.

Rule #3: Avoid circular dependencies

azinit commented 3 years ago

https://redux-toolkit.js.org/tutorials/advanced-tutorial https://jaysoo.ca/2016/02/28/organizing-redux-application/ https://jaysoo.ca/2016/02/28/applying-code-organization-rules-to-concrete-redux-code/ https://jaysoo.ca/2016/12/12/additional-guidelines-for-project-structure/

azinit commented 3 years ago

https://jaysoo.ca/2016/02/28/applying-code-organization-rules-to-concrete-redux-code/

todos/
  /** react components */
  components/
  /** Actions & Action creators */
  actions.js
  actionTypes.js
  /** consts for reducers */
  constants.js
  /** for managing public API of module */
  index.js
  /** things that are related to the module’s state */
  model.js
  /** module reducer */
  reducer.js
  /** memoized selectors (from `reselect`) */
  selectors.js
index.js
rootReducer.js

Index and constants - The public API and constants.
Actions and action creators - Information that flow through the application.
Model - Types and utilities for the model.
Reducers - Updates module state.
Selectors - Queries module state.

azinit commented 3 years ago