Is there any best practice in structure React app? Sometimes, I need to move universal functions to separate files. But, where? It's not a node_module.

src/
├─ actions/
├─ components/
├─ reducers/
├─ utils/           ← This is my utils folder.
│  ├─ DateUtils.js
│  ├─ NumberUtils.js
│  ├─ StringUtils.js
├─ views/
.git
.gitignore
node_modules/
package.json

The another way is creating Base react component that will contain all utils. All another react files will be child of this component.

class MyBaseComponent extends React.Component {

    dateUtilsMethod() {
       ...
    }

    stringUtilsMethod(myString) {
        ...
    }

}

class MainPageView extends MyBaseComponent { ... }

What is the best solution?

Is there any best practice in structure React app? Sometimes, I need to move universal functions to separate files. But, where? It's not a node_module.

src/
├─ actions/
├─ components/
├─ reducers/
├─ utils/           ← This is my utils folder.
│  ├─ DateUtils.js
│  ├─ NumberUtils.js
│  ├─ StringUtils.js
├─ views/
.git
.gitignore
node_modules/
package.json

The another way is creating Base react component that will contain all utils. All another react files will be child of this component.

class MyBaseComponent extends React.Component {

    dateUtilsMethod() {
       ...
    }

    stringUtilsMethod(myString) {
        ...
    }

}

class MainPageView extends MyBaseComponent { ... }

What is the best solution?

• javascript
• reactjs
• project-structure

1 Answer 1

I think that you are on the right track, though it is arguable.
One thing that is missing in my opinion is an index file in the utils folder that exposes each util file via export.
for example:

//utils/index.js:  

 export { default as DateUtils} from './DateUtils';
 export { default as StringUtils} from './StringUtils';
 export { default as NumberUtils} from './NumberUtils';

And you will import them from other files like so:

import { DateUtils, NumberUtils} from '../utils ';

Or import all as alias:

import * as utils from '../utils ';