As práticas mais recomendadas para Desenvolvedores React

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>
  );
};

const Items = () => {
  const arr = ["item1", "item2", "item3", "item4", "item5"];

  return (
    <>
      {arr.map((elem, index) => {
        <li key={elem+index}>{elem}</li>;
      })}
    </>
  );
};