Structuring React.js Web Applications​ | by Dmitri | Archie.AI


A Better Naming and File Organization System

- app/
- components/
- containers/

styled-components is my library of choice when it comes to baking CSS into React projects. It’s very good.

The Interface Pattern is a reminder that we are building a front-end application, which is easier to understand and structure when it’s thought of as a compilation of visual interface elements. This pattern consists of suggestions on file and folder structure, preferred export types, commenting practices, and file size recommendations.

- app/
- core/
- admin/
- user/
- constants.js
- index.js
- store.js
- utils.js
- core/
- components/
- constants/
- store/
- utils/
- constants/
- messages-.js
- messages-article.js
- routes-article.js
- rules-submission.js
- utils/
- actions-session.js
- messages-profile.js
- store/
- actions-article.js
- actions-submission.js
- reducers-article.js
- reducers-submission.js
- components/
- controls/
- icons/
- pages/
- routes/
- forms/
- vignettes/
- controls/
- Card/
- index.js
- components/
- CardFigure.js
- CardHeader.js

A simple rule is to prefer named exports like export const function Name ()=>{} in constants/ utils/ and store/ — this will encourage you to balance the number of files in those folders nicely.

No more than 300 lines per file. Anything bigger than that warrants splitting it.

I used to think that more comments in the code is better. Until I learned otherwise. Plentiful comments could be useful when creating a tutorial, however, they tend to pollute application files and encourage bad variable naming practices. So if the code feels difficult to understand, it should be reviewed and corrected for a more comprehensible namings and style. Use tools like Prettier to your advantage.



Review Website

Leave a Comment