JSX (JavaScript XML — React)
JSX e uma extensao de sintaxe para JavaScript utilizada pelo React para descrever elementos de UI. Permite escrever marcacao semelhante a HTML diretamente no codigo JavaScript, que e transformado em chamadas de funcao React.
Tipo MIME
text/jsx
Tipo
Texto
Compressão
Sem perdas
Vantagens
- + Intuitive HTML-like syntax for UI component definitions
- + Full JavaScript power within markup expressions
- + Component composition is clear and readable
Desvantagens
- − Requires transpilation — cannot run directly in browsers
- − Mixes concerns (markup + logic) which some developers dislike
- − Must use className instead of class (React-specific)
Quando usar .JSX
Use JSX ao construir componentes React com JavaScript. Para projetos React com tipos, utilize TSX.
Detalhes técnicos
O JSX e transformado em chamadas React.createElement() pelo Babel ou compiladores semelhantes. Suporta expressoes JavaScript em chavetas, nao e HTML (utiliza className em vez de class) e requer um unico elemento raiz por expressao.
Histórico
O Facebook introduziu o JSX em 2013 juntamente com o React. Embora inicialmente controverso, o JSX tornou-se a forma padrao de escrever componentes React e inspirou abordagens semelhantes noutros frameworks.