5 erros que cometi ao iniciar meu primeiro projeto React

Você sabe como é aprender uma nova linguagem ou estrutura. Às vezes, há uma ótima documentação para ajudá-lo a encontrar o caminho. Mas mesmo a melhor documentação não cobre absolutamente tudo. E quando você trabalha com algo novo, é provável que encontre um problema que não tem solução escrita.

Foi assim para mim na primeira vez que criei um projeto React — e React é um daqueles frameworks com documentação notável, especialmente agora com os documentos beta. Mas eu ainda lutei para passar. Já faz um bom tempo desde aquele projeto, mas as lições que aprendi com ele ainda estão frescas em minha mente. E embora haja muitos tutoriais de "como fazer" do React por aí, pensei em compartilhar o que gostaria de saber quando o usei pela primeira vez.

Então, é isso que este artigo é - uma lista dos primeiros erros que cometi. Espero que eles ajudem a tornar o aprendizado do React muito mais fácil para você.

Usando create-react-app para iniciar um projeto

TL;DR Use Vite ou Parcel.

Criar aplicativo React (CRA) é uma ferramenta que ajuda você a configurar um novo projeto React. Ele cria um ambiente de desenvolvimento com as melhores opções de configuração para a maioria dos projetos React. Isso significa que você não precisa gastar tempo configurando nada sozinho.

Como iniciante, essa parecia uma ótima maneira de começar meu trabalho! Nenhuma configuração! Basta começar a codificar!

O CRA usa dois pacotes populares para conseguir isso, webpack e Babel. O webpack é um empacotador da web que otimiza todos os recursos do seu projeto, como JavaScript, CSS e imagens. Babel é uma ferramenta que permite usar recursos JavaScript mais recentes, mesmo que alguns navegadores não os suportem.

Ambos são bons, mas existem ferramentas mais recentes que podem fazer o trabalho melhor, especificamente parafuso e Compilador Web Rápido (SWC).

Essas alternativas novas e aprimoradas são mais rápidas e fáceis de configurar do que webpack e Babel. Isso torna mais fácil ajustar a configuração que é difícil de fazer em criar-reagir-aplicativo sem ejetar.

Para usar ambos ao configurar um novo projeto React, você deve ter certeza de ter Node versão 12 ou superior instalada e execute o seguinte comando.

npm create vite

Você será solicitado a escolher um nome para o seu projeto. Depois de fazer isso, selecione Reagir na lista de estruturas. Depois disso, você pode selecionar qualquer um Javascript + SWC or Typescript + SWC

Então você terá que mudar de diretório cd em seu projeto e execute o seguinte comando;

npm i && npm run dev

Isso deve executar um servidor de desenvolvimento para seu site com o URL localhost:5173

E é tão simples quanto isso.

utilização defaultProps para valores padrão

TL;DR Em vez disso, use parâmetros de função padrão.

Os dados podem ser passados ​​para os componentes do React por meio de algo chamado props. Estes são adicionados a um componente como atributos em um elemento HTML e podem ser usados ​​na definição de um componente tomando os valores relevantes do objeto prop passado como um argumento.

// App.jsx
export default function App() { return <Card title="Hello" description="world" />
} // Card.jsx
function Card(props) { return ( <div> <h1>{props.title}</h1> <p>{props.description}</p> </div> );
} export default Card;

Se um valor padrão for necessário para um prop, defaultProp propriedade pode ser usada:

// Card.jsx
function Card(props) { // ...
} Card.defaultProps = { title: 'Default title', description: 'Desc',
}; export default Card;

Com JavaScript moderno, é possível desestruturar o props objeto e atribuir um valor padrão a tudo no argumento da função.

// Card.jsx
function Card({title = "Default title", description= "Desc"}) { return ( <div> <h1>{title}</h1> <p>{description}</p> </div> )
} export default Card;

Isso é mais favorável porque o código pode ser lido por navegadores modernos sem a necessidade de transformação extra.

Infelizmente, defaultProps requerem alguma transformação para serem lidas pelo navegador, já que JSX (JavaScript XML) não é suportado imediatamente. Isso pode afetar o desempenho de um aplicativo que está usando muito defaultProps.

Não use propTypes

DR Use TypeScript.

No React, o propTypes A propriedade pode ser usada para verificar se um componente está recebendo o tipo de dados correto para seus props. Eles permitem que você especifique o tipo de dado que deve ser usado para cada prop, como uma string, número, objeto, etc. Eles também permitem que você especifique se um prop é necessário ou não.

Dessa forma, se um componente receber o tipo de dados errado ou se uma propriedade necessária não estiver sendo fornecida, o React lançará um erro.

// Card.jsx
import { PropTypes } from "prop-types"; function Card(props) { // ...
} Card.propTypes = { title: PropTypes.string.isRequired, description: PropTypes.string,
}; export default Card;

TypeScript fornece um nível de segurança de tipo nos dados que estão sendo passados ​​para os componentes. Então, com certeza, propTypes foram uma boa ideia quando eu estava começando. No entanto, agora que o TypeScript se tornou a solução ideal para segurança de tipo, eu recomendo usá-lo em vez de qualquer outra coisa.

// Card.tsx
interface CardProps { title: string, description?: string,
} export default function Card(props: CardProps) { // ...
}

TypeScript é uma linguagem de programação que se baseia em JavaScript adicionando verificação de tipo estático. O TypeScript fornece um sistema de tipo mais poderoso, que pode detectar mais erros em potencial e melhora a experiência de desenvolvimento.

Usando componentes de classe

TL;DR: Escrever componentes como funções

Os componentes de classe no React são criados usando classes JavaScript. Eles têm uma estrutura mais orientada a objetos e também alguns recursos adicionais, como a capacidade de usar o this métodos de palavra-chave e ciclo de vida.

// Card.jsx
class Card extends React.Component { render() { return ( <div> <h1>{this.props.title}</h1> <p>{this.props.description}</p> </div> ) }
} export default Card;

Prefiro escrever componentes com classes em vez de funções, mas classes JavaScript são mais difíceis para iniciantes entenderem e this pode ficar muito confuso. Em vez disso, recomendo escrever componentes como funções:

// Card.jsx
function Card(props) { return ( <div> <h1>{props.title}</h1> <p>{props.description}</p> </div> )
} export default Card;

Componentes de função são simplesmente funções JavaScript que retornam JSX. Eles são muito mais fáceis de ler e não possuem recursos adicionais como o this palavra-chave e métodos de ciclo de vida o que os torna mais eficientes do que os componentes de classe.

Componentes de função também têm a vantagem de usar ganchos. Ganchos de reação permitem que você use o estado e outros recursos do React sem escrever um componente de classe, tornando seu código mais legível, sustentável e reutilizável.

Importando React desnecessariamente

TL;DR: Não há necessidade de fazer isso, a menos que você precise de ganchos.

Como o React 17 foi lançado em 2020, agora não é necessário importar o React na parte superior do arquivo sempre que você criar um componente.

import React from 'react'; // Not needed!
export default function Card() {}

Mas tivemos que fazer isso antes do React 17 porque o transformador JSX (a coisa que converte JSX em JavaScript normal) usava um método chamado React.createElement isso só funcionaria ao importar React. Desde então, foi lançado um novo transformador que pode transformar JSX sem o createElement método.

Você ainda precisará importar o React para usar ganchos, fragmentos, e quaisquer outras funções ou componentes que você possa precisar da biblioteca:

import { useState } from 'react'; export default function Card() { const [count, setCount] = useState(0); // ...
}

Esses foram meus primeiros erros!

Talvez “erro” seja uma palavra muito dura, já que algumas das melhores práticas surgiram mais tarde. Ainda assim, vejo muitos casos em que a maneira “antiga” de fazer algo ainda está sendo usada ativamente em projetos e outros tutoriais.

Para ser sincero, provavelmente cometi mais de cinco erros ao começar. Sempre que você buscar uma nova ferramenta, será mais como uma jornada de aprendizado para usá-la com eficácia, em vez de apertar um botão. Mas são essas coisas que ainda carrego comigo anos depois!

Se você já usa o React há algum tempo, quais são algumas das coisas que gostaria de saber antes de começar? Seria ótimo fazer uma coleção para ajudar outras pessoas a evitar as mesmas lutas.

• Conteúdo com tecnologia de SEO e distribuição de relações públicas. Seja amplificado hoje.
• Platoblockchain. Inteligência Metaverso Web3. Conhecimento Ampliado. Acesse aqui.
• Fonte: https://css-tricks.com/5-mistakes-starting-react/