Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

77
Visualizações
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 Respostas
Responde à pergunta

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda