DEV Community

Altencir Junior
Altencir Junior

Posted on

1

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>
        ))}
      </>
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

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>
      ))}
    </>
  );
};
Enter fullscreen mode Exit fullscreen mode

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('')
Enter fullscreen mode Exit fullscreen mode

Que tal fazer isto:

const [user, setuser] = useState({})
Enter fullscreen mode Exit fullscreen mode

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

  • Postmark Image

    Speedy emails, satisfied customers

    Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

    Sign up

    Top comments (0)

    👋 Kindness is contagious

    Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

    Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

    On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

    Okay