Boas práticas e convenções

Hierarquização de pastas

src/

Renderização inicial do projeto através do App e index.

default: index e App alocados na raíz da pasta.

src/index.tsx

src/App.tsx

Convenções de código:

App: Deve ser responsável por renderizar os Providers (ContextAPI), juntamente com o componente inicial.

src/assets/

Qualquer tipo de arquivo auxiliar do projeto (imgs, fonts, svgs...)

default: separação por pastas e categorias

assets/imgs/banners/banner-header.png

assets/fonts/rubrik/rubrik-medium.woff

src/pages/

Componentes tratados como páginas individuais do projeto

default: index alocado na raíz da pasta, importando e exportando todos as páginas

src/pages/Login

src/components/

Qualquer tipo de componente do sistema que não é uma página. Ex: Header, Footer

default: index alocado na raíz da pasta, importando e exportando todos os componentes

src/components/Header

src/router

Configuração de rotas do projeto, para componentes páginas e seus respectivos filhos, declarando-os como protegidos ou não

default: index alocado na raíz da pasta, no qual as configurações de rotas são exportados e criados no mesmo

src/router/index.tsx

src/store
 Componentes ou configurações globais do projeto, utilizando ContextAPI. Trata-se de qualquer tipo de dado que tende a circular pelo
projeto como um todo. Os dados são compartilhados entre os componentes.

default: index alocado na raíz da pasta, importando e exportando todos os Providers

src/store/useLoadScreen

src/store/useAuthentication

src/hooks

Funções de configuração ou comportamento auxiliares. Diferentemente do Provider, ele não compartilha o mesmo dado entre os
componentes, seu objetivo é compartilhar uma lógica de código.

default: index alocado na raíz da pasta, importando e exportando todos os hooks customizados

src/hooks/useInput

src/hooks/useMath

Definições e configurações de código

Alocados em src:

App: Deve ser responsável por renderizar os Providers (ContextAPI), juntamente com o componente inicial.

Exemplo de código:

1 import Router from "src/router";

2
3 import { AuthProvider } from "src/store/useAuth";
4 import { LoadScreenProvider } from "src/store/useLoadScreen";
5 import { ModalProvider } from "src/store/modal/useModal";
6
7 export default function App() {
8 return (
9 <LoadScreenProvider>
10 <ModalProvider>
11 <AuthProvider>
12 <Router></Router>
13 </AuthProvider>
14 </ModalProvider>
15 </LoadScreenProvider>
16 );
17 }
18

index: Deve ser responsável SOMENTE por renderizar o BrowserRouter (provém das configurações de rotas) envolvendo o <App/>, e
importar módulos globais (bootstrap, configurações aws).

Exemplo de código:
 1 import React from "react";
2 import ReactDOM from "react-dom/client";
3
4 import { BrowserRouter } from "react-router-dom";
5
6 import App from "./App";
7
8 import "src/index.css";
9 import "bootstrap/dist/css/bootstrap.min.css";
10 import "@aws-amplify/ui-react/styles.css";
11
12 import { Amplify } from "aws-amplify";
13 import aws_exports from "src/aws-exports";
14 Amplify.configure(aws_exports);
15
16 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
17 // <React.StrictMode>
18 <BrowserRouter>
19 <App />
20 </BrowserRouter>
21 // </React.StrictMode>
22 );
23

OBS: O <React.StrictMode/> é responsável por renderizar duas vezes o componente instanciado em ambiente localhost. Por via de
testes, esse código pode ser previamente comentado.

Exportação e importação de código geral:

Exemplo: src/components/index.tsx

1 export {default as Header} from "./Header"

Atenção

Ao importar um componente ou módulo criado dentro do projeto, não é necessário utilizar dot walking, use a pasta src como
referência.

Maneira Incorreta:

1 //incorrect way of importing

2 import {Header} from "../../components";

Maneira Correta:

1 //using src as reference

2 import {Header} from "src/components";

Convenções e padronizações

Componentes:

Estrutura:
 1 criar pasta do componente: src/components/Header
2
3 dentro da pasta do componente:
4 index.tsx: Contém o próprio componente
5 style.tsx: Contém definições de estilização do componente

Por que não criar um arquivo com o nome do componente?

Ao declarar o componente como index, o compilador do IDE, ao importar o módulo, compreende que é necessário importar o
arquivo index da pasta raíz, evitando redundância de código.

Exemplo:

Maneira Incorreta:

1 //not using index.tsx

2 export {default as Header} from "./Header/Header"

Maneira Correta:

1 //using index.tsx
2 export {default as Header} from "./Header"

Declaração de estilização em style.tsx:

1 import styled from "styled-components";

2
3 export const HeaderWrapper = styled.div`
4 background: red;
5 `

Declaração do componente index.tsx:

1 import { HeaderWrapper } from "./style";

2
3 export default function Header() {
4 return <HeaderWrapper>My custom Header<HeaderWrapper/>;
5 };

OBS: Ao declarar um componente, NÃO é necessário utilizar (somente utilizar ao desenvolver um componente como módulo no NPM
package react-library, por exemplo):

1 import react from "React";

Variáveis e funções:

Ao declarar uma variável stateful, utilizar a sintaxe:

1 import { useState } from "react";

2
3 export default function Variables() {
4 const [array, setArray] = useState([]);
5 const [number, setNumber] = useState(0);
6 const [string, setString] = useState("");
7 }

OBS: Para mitigar problemas de renderização e compreensão, declare o estado inicial da variável ([], {}, ““, 0)

Atenção!
 Utilize useState SOMENTE para variáveis que precisam ser observadas e necessitem de modificações
Uma variável stateful só funciona dentro do contexto de um Componente, dado o exemplo acima.

Ao declarar uma função, utilizar a sintaxe com arrow function:

1 const foo = () => {

2 //logic here
3 };

Iterações de um Array:

Ao iterar sobre um array retornando componentes, o React necessita de uma propriedade key para referenciar as posições de cada
componente iterado. NÃO utilize o index como valor da propriedade key ao retornar, prefira criar uma chave id com valores únicos.
Exemplo de código:

Maneira Incorreta:

1 export default function Array() {

2 const [array, setArray] = useState([]);
3
4 useEffect(() => {
5 const newArray = [1,2,3,4];
6 setArray(newArray);
7 }, []);
8
9 return (
10 <ul>
11 {array.map((item, index) => <li key={index}>{item}</li>)}
12 </ul>
13 );
14 }

Maneira Correta:

1 export default function Array() {

2 const [array, setArray] = useState([]);
3
4 useEffect(() => {
5 const newArray = [
6 {value: 1, id: "one"},
7 {value: 2, id: "two"},
8 {value: 3, id: "three"},
9 {value: 4, id: "four"}
10 ]
11 setArray(newArray)
12 }, []);
13
14 return (
15 <ul>
16 {array.map(({value, id}) => <li key={id}>{value}</li>)}
17 </ul>
18 );
19 }

Renderizações:

Atenção!
 Verifique se o componente criado, ao utilizar váriaveis ou funções observadoras, está sendo renderizado diversas vezes
desnecessariamente. Um teste simples seria inserir no início de sua declaração, um console.log();

Estilizações em geral:

Evitar utilizar classes não objetivas na propriedade className, utilize somente definições específicas. Exemplo:

1 //instead of
2 <h1 className="d-flex justify-content-center p-1 m-3 align-items-center">Custom h1<h1/>
3
4 //use in style.tsx file
5 const CustomH1 = styled.h1`
6 dipslay: flex;
7 justify-content: center;
8 align-items: center;
9 `
10
11 //import and return
12 <CustomH1 className="p-1 m-3">Custom h1<h1/>

Evitar utilizar style in-line como propriedades em componentes. Utilize styled-components para aplicar propriedades CSS, assim evitando
má visualização de código. Exemplo:

1 //instead of
2 <h1 style={{background: "red", color: "white"}}>Custom h1<h1/>
3
4 //use in style.tsx file
5 const customH1 = styled.h1`
6 background: "red";
7 color: "white";
8 `
9 //import and return
10 <CustomH1>Custom h1<CustomH1/>

Provider (ContextAPI):

Estrutura:

1 criar pasta do provider: src/store/useAuth

2
3 dentro da pasta do provider:
4 index.tsx: Contém o próprio provider

Exemplo:

1 import { createContext, useContext } from "react";

2
3 const Context = createContext();
4
5 export const ApiProvider = ({ children }) => {
6 //inside provider, create logic and return to value prop
7 const foo = () => {}
8 let bar = [];
9
10 return <Context.Provider value={{foo, bar}}>{children}</Context.Provider>;
11 };
 12
13 export const useApi = () => useContext(LoadScreenContext);

Repos (CodeCommit):
Caso necessite de um repositório front-end previamente configurado, seguindo as padronizações comentadas, acesse os links:

Repositório com VITE: https://us-east-1.console.aws.amazon.com/codesuite/codecommit/repositories/react-vite-template/browse?

region=us-east-1

Repositório com NPX: https://us-east-1.console.aws.amazon.com/codesuite/codecommit/repositories/react-npx-template/browse?

region=us-east-1