Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

76
Views
How to create a non-component file in react

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!

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!