Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

82
Vistas
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 Respuestas
Responde la pregunta

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 Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda