I have question on react application architecture. I have some helper files and I don't want to use them as component, because they don't render anything. What I currently have is working, but I want to know opinions of my solution from professional react developers (or what should be better practice). I didn't find any solution on internet for my case...
I have several type of helper files:
constants.ts - contains constants like:
export enum ComponentType {
TextField,
SelectBox,
...
}
types.ts - contains types and interfaces, for example:
export type DBObject = {
id: number,
DBOClass: string,
attributes: Array<DBObjectAttr>,
editedAttrs: Array<DBObjectAttr>,
isEdited: boolean
}
export interface BreadcrumbState {
items: Array<BreadcrumbItemDef>
}
utils.ts - contains standalone helper functions like:
const getEnvironmentDomain = () => {
some string operations...
}
XMLParser.ts - contains class XMLParser, which contains static method for parsing XML definition of form to javascript object:
export class XMLParser {
...
public static parseXMLFormDefinitions = async (xmlStringDef: string): Promise<FormDefs> => {
...
}
...
}
DBManager.ts - contains class DBManager for database manipulations; is full of static functions:
export class DBManager {
...
public static fetchFormDefinitions = async (): Promise<FormDefs> => { ... }
public static getDBObjectDefinition = (DBOClass: string): DBObject => { ... }
public static insertToDB = async (body: any, reload: boolean = true): Promise<any> => { ... }
...
}
As you can see, I export everything from that files and as you can imagine - I then import it in components where needed. But is it best practise how I designed that? And what is best place for them in project structure? Currently I have:
<src>/
├── <components>/
│ ├── <header>/
│ ├── <card>/
│ ├── ...
├── <pages>/
│ ├── <photos>/
│ ├── <docs>/
│ ├── ...
├── <store>/
│ ├── <reducers>/
│ ├── BreadcrumbReducer.ts
│ ├── DBObjectReducer.ts
│ ├── ...
│ ├── index.ts
│ ├── sagas.ts
├── constants.ts
├── types.ts
├── utils.ts
├── XMLParser.ts
└── DBManager.ts
Thanks!
As far as how I understood the questions this my answer.
I don't think there is the best practice, You can structure files how You want to, there are some conventions for structuring, and you don't have to use it if you don't want to.
And about 'helper' components, how you call them, You said in question
I don't want to use them as component, because they don't render anything
Not rly sure what you do with them but they may be converted to custom hooks.
A custom hook allows you to extract some components logic into a reusable function.
Quote above is from this link
Or if you use them just as containers, div-s of some kind then think about using react Fragments. Read about fragments on react docs