[Sugestão] Vantagem do TSX sobre o JSX

Vamos analisar um exemplo típico de código TSX para te ajudar a entender melhor como ele funciona e o que significam alguns dos termos que você pode encontrar. Aqui está um código simples de TSX para um componente React:

import React from 'react';

interface AppProps {
    title: string;
}

const App: React.FC<AppProps> = ({ title }) => {
    return <div className="App">
        <h1>{title}</h1>
    </div>;
}

export default App;

Análise do Código

• Importação do React

import React from 'react';

• React: O objeto base do pacote React, necessário para criar componentes e utilizar recursos do React.

Definição de Interface

interface AppProps {
    title: string;
}

• interface: Uma construção de TypeScript que permite definir a forma de um objeto. Aqui, AppClaimProps define que qualquer objeto usado como props neste componente deve ter uma propriedade title que é uma string.
• AppProps: Nome da interface, que descreve as props (propriedades) que o componente App espera receber.

Declaração do Componente

const App: React.FC<AppProps> = ({ title }) => {

• React.FC: Uma abreviação de React.FunctionComponent. React.FC indica que App é um componente funcional do React que aceita props definidas pela interface AppProps.
• App: Nome do componente.
• { title }: Uma desestruturação do objeto props, permitindo acessar diretamente a propriedade title dentro do componente.

Retorno JSX

return <div className="App">
    <h1>{title}</h1>
</div>;

• return: Especifica o que o componente deve renderizar.
• JSX: A sintaxe que se parece com HTML. No exemplo, o componente renderiza um div contendo um h1 que mostra o valor da prop title.
• {title}: A sintaxe de chaves {} permite a incorporação de expressões JavaScript dentro do JSX, aqui usada para inserir a propriedade title.

Exportação do Componente

export default App;

• export default: Torna o componente App disponível para ser importado e usado em outros arquivos.

Conceitos Principais

• Componentes: Blocos de construção básicos do React, que podem ser funcionais (como neste caso) ou de classe. Eles encapsulam parte da interface do usuário e podem ser reutilizados.
• Props: Curto para propriedades, são como parâmetros de função para componentes. Eles permitem que você passe valores de um componente pai para um componente filho.
• JSX: Uma extensão de sintaxe para JavaScript recomendada pelo React para escrever o que a interface do usuário deve aparecer. Embora pareça com HTML, tem capacidades completas de JavaScript.

Esses são alguns dos conceitos básicos que você encontrará ao trabalhar com TSX em projetos React. Entender esses conceitos te ajudará a ler e escrever código React mais eficientemente!