As práticas mais recomendadas para Desenvolvedores React
Tags: react, beginners, programming
Published: 2023-03-22 15:19:39

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 <li>.

```
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