React é uma das bibliotecas mais populares para desenvolvimento web. Com sua abordagem baseada em componentes, React é conhecido por ser flexível e escalável. No entanto, como em qualquer tecnologia, existem melhores práticas que podem ajudar a evitar problemas comuns e melhorar a qualidade do código. Neste artigo, vamos discutir algumas das melhores práticas no React.
Diminua o trabalho, use Componentes personalizados e Hooks -
Um dos principais benefícios do React é a capacidade de criar componentes personalizados e Hooks. Existe o uso de classes, mas em sua maioria acabam tendo tamanho superior a de componente que fará o mesmo. O uso de Componentes personalizados e Hooks torna mais fácil entender e testar o código, além de facilitar a reutilização em diferentes partes do projeto. Vejamos um exemplo:
class NasaData extends React.Component {
constructor(props) {
super(props);
this.state = {
data: [],
};
}
componentDidMount() {
fetch("https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY")
.then((res) => res.json())
.then((json) => {
this.setState({
data: json,
});
});
}
render() {
const { data } = this.state;
if (!data.length)
return (
<div>
<h1> Fetching data.... </h1>{" "}
</div>
);
return (
<>
<h1> Fetch data using Class component </h1>{" "}
{data.map((item) => (
<div key={item.id}>{item.title}</div>
))}
</>
);
}
}
O mesmo código pode ser executado usando componentes de classe bem mais encurtado:
const NasaData = () => {
const [data, setdata] = useState(null);
useEffect(() => {
fetch("https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY")
.then((res) => res.json())
.then((json) => {
setdata(json);
});
}, [data]);
return (
<>
<h1> Fetch data using Class component </h1>{" "}
{data.map((item) => (
<div key={item.id}>{item.title}</div>
))}
</>
);
};
Use o padrão de nomenclatura de componentes adequado -
Ao criar componentes, é importante seguir um padrão de nomenclatura adequado. Nomes de componentes devem começar com uma letra maiúscula e usar CamelCase. Além disso, os nomes devem ser descritivos e representar com precisão a função do componente.
Utilize as propriedades corretamente -
Propriedades (ou "props") são uma das principais maneiras de passar dados entre componentes no React. É importante lembrar que as propriedades devem ser imutáveis e que um componente não deve modificar as propriedades que recebe. Em vez disso, um componente pode enviar uma função de retorno de chamada como uma propriedade para permitir que o componente pai manipule os dados.
Diminuir o uso de States -
O estado React acompanha os dados que, quando alterados, acionam o componente React para renderizar novamente. Ao criar aplicativos React, evite usar o estado o máximo possível, pois quanto mais estado você usar, mais dados você terá para acompanhar em seu aplicativo.
Em vez de fazer isso:
const [username, setusername] = useState('')
const [password, setpassword] = useState('')
Que tal fazer isto:
const [user, setuser] = useState({})
Organize os arquivos relacionados ao mesmo componente em uma pasta -
Ao decidir sobre uma estrutura de pastas para seu aplicativo React, opte por uma estrutura centrada em componentes. Isso significa armazenar todos os arquivos referentes a um componente em uma pasta.
Se você estiver criando um componente Navbar, por exemplo, crie uma pasta chamada Navbar contendo o arquivo do componente, a folha de estilo e outros arquivos JavaSript e ativos usados no componente.
Uma única pasta contendo todos os arquivos de um componente facilita a reutilização, o compartilhamento e a depuração. Se você precisa ver como um componente funciona, você só precisa abrir uma única pasta.
Siga as devidas nomenclaturas -
Você sempre deve usar PascalCase ao nomear componentes para diferenciá-los de outros arquivos JSX não componentes. Por exemplo: TextField, NavMenu e SuccessButton.
Use camelCase para funções declaradas dentro de componentes React como handleInput() ou showElement().
Renderizar matrizes dinamicamente usando mapa -
Use map()
para renderizar dinamicamente blocos HTML repetidos. Por exemplo, você pode usar map()
para renderizar uma lista de itens em tags
const List = () => {
return (
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
<li>Item5</li>
</ul>
);
};
Embora funcional, é um tanto repetitivo e é necessário fazer alterações manuais, vejamosa solução utilizando map()
:
const Items = () => {
const arr = ["item1", "item2", "item3", "item4", "item5"];
return (
<>
{arr.map((elem, index) => {
<li key={elem+index}>{elem}</li>;
})}
</>
);
};
Evite códigos repetitivos -
Essa não é em específico para um desenvolvedor React, mas vale lembrar sobre ela, que é um dos fundamentos de um programador. Se você perceber que está escrevendo código duplicado, converta-o em componentes que possam ser reutilizados.
Por exemplo, faz mais sentido criar um componente para seu menu de navegação em vez de escrever repetidamente o código em cada componente que requer um menu. Essa é a vantagem de uma arquitetura baseada em componentes. Você pode dividir seu projeto em pequenos componentes que podem ser reutilizados em seu aplicativo.
O React é uma biblioteca poderosa para desenvolvimento web, mas é importante seguir as melhores práticas para evitar problemas comuns e melhorar a qualidade do código. Com essas práticas em mente, você pode criar aplicativos React escaláveis e confiáveis, além de aprimorar suas habilidades em outras linguagens
Top comments (0)