-
Webpack path alias should be added for top-level modules:
components
,screens
,store
, etc.Justification:
import { Scale } from 'components'
is more succinct thanimport Scale from './../../components/Scale'
. -
components/
should be a Node module: containindex.js
with import-export statement for each component submodule.Justification: this way, we would be able to
import { A, B, C } from 'components'
instead of writing three statements. -
Each subfolder of
components/
should be a Node module: containindex.js
with import-export statement for a component. -
For each Node module in
src/
, itsindex.js
should only contain import-export statements.Justification: in the Node.js world,
index.js
of a module is dedicated to define the module's interface. It's name doesn't speak for itself, so developer opening the file doesn't know exactly what to expect to find there. -
All the objects related to the Redux store should be consolidated in the
store/
module. -
If we did not decide to make screens the only container components,
containers/
module should be introduced. -
The networking code should be decoupled from the state management code and placed in
api/
module. -
services/
module should be eliminated in favor of two:api/
andutil/localStorage
. No need in thehistory
module: it's trivial and casually used. -
routes/
should be eliminated.PrivateRoute
andPublicRoute
should be contained incomponents/
.Justification:
PrivateRoute
andPublicRoute
are pure though not visual components. -
WithRole
HOC should be moved fromhelpers/
tocomponents/
.Justification: it's a HOC, not a helper function.
-
helpers/
should be renamed toutil/
and contain only utility functions and classes.
-
(minor issue) Exported pure components should be functions, not arrow functions.
Justification: official documentation follows this approach. Functions occupy less memory than bound function objects and are being constructed faster. Function definitions are hoisted and can be exported by default with a single statement.
-
RadioQuestionsOptions
is a standalone component on its own and should not be contained inAssessmentQuestions
. -
Checkbox
is a standalone component on its own and should not be contained inFormik
.
components/AssessmentQuestions
should be renamed tocomponents/AssessmentQuestionList
.pages/
should be renamed toscreens/
.
-
In
.env
REACT_APP_API_ENDPOINT=https://blueacademy-dev.azurewebsites.net/blueacademy/v1/
Should be:API_BASE_URL=...
Justification: The whole app is React-based, so
REACT_APP_
prefix is unnecessary. The value is not REST endpoint, but a base URL. -
stores/
should be renamed tostore/
Justification: there is a single store in a Redux-based app.
-
src/app.js
should be renamed toApp.js
, placed atcomponents/
and imported insrc/index.js
.Justification:
App
is a pure component.src/index.js
is the entrypoint of the app.
- ESLint and Prettier configs should be kept in
package.json
.