O que é JSX? \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 21 Horas 09 Min 16 Seg Tempo restante da oferta: 21 09 16 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) O que é JSX? [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) # O que é JSX? Veja neste artigo o que é o JSX. [ Ana Paula de Andrade ](https://www.treinaweb.com.br/blog/autor/ana-paula-andrade) 7 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/02/05141731/JSX-1.png) Criado pela equipe de desenvolvimento do [React](https://www.treinaweb.com.br/blog/conheca-o-react-biblioteca-para-desenvolvimento-web/ "React"), o JSX é uma forma de criar elementos para serem utilizadas como templates de aplicações React. Basicamente, os elementos criados com o JSX são bem similares com código [HTML](https://www.treinaweb.com.br/blog/o-que-e-e-como-comecar-com-html-e-css/ "HTML") e fornecem aos desenvolvedores uma forma mais simples e intuitiva de criar os componentes de uma aplicação. Porém, apesar de muito similar ao HTML, o JSX não é interpretado pelo navegador. Por este motivo, deve-se utilizar um “transpilador” para essa conversão. Atualmente, o mais conhecido deles é o Babel, do qual falaremos em outro artigo. [ ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/10/E-BOOK-GRATUITO-COMECANDO-JS.png) ](https://www.treinaweb.com.br/ebook/guia-javascript) ## Sintaxe do JSX Como dito anteriormente, o JSX possui uma sintaxe muito semelhante ao HTML. O código abaixo demonstra claramente esta característica. Apesar de muito parecido, o código a seguir não é HTML e sim um trecho de código JSX. ```javascript const nav = ( Início Sobre Contato ) ``` Porém, como dito acima, este código não conseguirá ser lido pelo navegador, e é papel do “transpilador” convertê-lo para a sintaxe do React. Sendo assim, o código acima será “transpilado” para o seguinte código: ```javascript var nav = React.createElement( "nav", { className: "links" }, React.createElement( "ul", null, React.createElement( "li", null, React.createElement( "a", { href: "#" }, "Inicio" ) ), React.createElement( "li", null, React.createElement( "a", { href: "#" }, "Sobre" ) ), React.createElement( "li", null, React.createElement( "a", { href: "#" }, "Contato" ) ) ) ); ``` Todo este processo facilita a criação de aplicações React, já que é muito mais simples criar um código similar ao HTML do que vários elementos React. A partir daí, é papel do React exibir a estrutura no navegador. [ ![Desenvolvedor React Native Sênior](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/react-native.svg) Formação Desenvolvedor React Native Sênior Conhecer a formação ](https://www.treinaweb.com.br/formacao/desenvolvedor-react-native-senior) - [ #JavaScript ](https://www.treinaweb.com.br/blog/tag/javascript) - [ #JSX ](https://www.treinaweb.com.br/blog/tag/jsx) Autor ![Ana Paula de Andrade](//secure.gravatar.com/avatar/76297b487187c82ae476e823018dbfc0?d=mm) ## Ana Paula de Andrade Graduanda em Sistemas de Informação pelo Instituto Federal da Bahia. É responsável pelo atendimento ao cliente, gerenciamento de redes sociais e revisão de cursos, além da redação de artigos para o blog da TreinaWeb. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/ana-paula-andrade) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/10/react-17-conheca-o-que-vai-mudar-no-jsx-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 6 anos atrás ## [ React 17 - Conheça o que vai mudar no JSX ](https://www.treinaweb.com.br/blog/react-17-conheca-o-que-vai-mudar-no-jsx) Veja o que teremos de diferente no JSX a partir do React 17 e como isso irá influenciar suas aplicações daqui para frente. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/03/REACT-ROUTER-400x280.jpg) [ React ](https://www.treinaweb.com.br/blog/categoria/react) 4 anos atrás ## [ Gerenciamento de Rotas no React com React Router ](https://www.treinaweb.com.br/blog/gerenciamento-de-rotas-no-react-com-react-router) Neste artigo vamos abordar um conceito importante dentro de aplicações com o React, O gerenciamento de Rotas no React com React Router. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/09/TYPESCRIPT-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 5 anos atrás ## [ Como instalar o TypeScript ](https://www.treinaweb.com.br/blog/como-instalar-o-typescript) Neste artigo veremos como instalar o TypeScript, conhecer o arquivo tsconfig, executar nosso primeiro código no Node.js e no navegador. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/04/24110903/O-QUE-E-REACT-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 7 anos atrás ## [ Conheça o React, biblioteca para desenvolvimento Web ](https://www.treinaweb.com.br/blog/conheca-o-react-biblioteca-para-desenvolvimento-web) Veja neste artigo o que é o React, biblioteca JavaScript para desenvolvimento web. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/02/vs-code-melhores-extensoes-para-front-end-400x280.png) [ Ferramentas ](https://www.treinaweb.com.br/blog/categoria/ferramentas) 6 anos atrás ## [ VS Code - Melhores extensões para Front-End - Parte 1 ](https://www.treinaweb.com.br/blog/vs-code-melhores-extensoes-para-front-end-parte-1) Conheça as melhores extensões disponíveis do VS Code para Front-End e melhore a eficiência dos seus trabalhos. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/06/CSS-IN-JS-400x280.jpg) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 3 anos atrás ## [ CSS in JS ](https://www.treinaweb.com.br/blog/css-in-js) Veja neste artigo o CSS in JS, a técnica que permite escrever estilos CSS no JavaScript, deixando a aplicação flexível e modularizada. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/12/EXECUTAR-CODIGO-REACT-400x280.jpg) [ React ](https://www.treinaweb.com.br/blog/categoria/react) 4 anos atrás ## [ Como instalar e executar o React ](https://www.treinaweb.com.br/blog/como-instalar-e-executar-o-react) Veja neste artigo como instalar e executar o React, então confira neste artigo como instalar o React por CDN (Link) e CLI (Linha de comando) Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2017/11/06145813/react-16-400x280.jpg) [ Padrões de Projeto ](https://www.treinaweb.com.br/blog/categoria/padroes-de-projeto) 4 anos atrás ## [ Boas práticas para o React ](https://www.treinaweb.com.br/blog/boas-praticas-para-o-react) Veja neste artigo algumas das dicas e boas práticas para utilizar em uma aplicação React e tenha um código mais limpo na sua aplicação. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/ang_ignore-1-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 10 anos atrás ## [ Perdendo o preconceito com o novo Angular ](https://www.treinaweb.com.br/blog/perdendo-o-preconceito-com-o-novo-angular) Vou citar alguns itens que me desanimavam sobre o novo Angular e o motivo de eu ter mudado de ideia. Quem sabe você considere utilizá-lo em seu próximo projeto? Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2024/04/sistemas-mensageria-min-400x280.png) [ Arquitetura de Software ](https://www.treinaweb.com.br/blog/categoria/arquitetura-de-software) 3 anos atrás ## [ O que é e quais as diferenças entre Kafka, RabbitMQ e AWSSQS ](https://www.treinaweb.com.br/blog/o-que-e-e-quais-as-diferencas-entre-kafka-rabbitmq-e-awssqs) Confira nesse artigo o que são sistemas de mensageria, o que são e quais as diferenças entre Kafka, RabbitMQ e AWSSQS. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/12/TS-ZOD-400x280.jpg) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 3 anos atrás ## [ O que é o Zod? ](https://www.treinaweb.com.br/blog/o-que-e-o-zod) Neste artigo vamos ter uma introdução sobre o Zod, uma biblioteca de declaração e validação de dados em TypeScript e criar um exemplo de como utilizá-la. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/11/Clean-Architecture-400x280.png) [ Arquitetura de Software ](https://www.treinaweb.com.br/blog/categoria/arquitetura-de-software) 3 anos atrás ## [ O que vem a ser a Clean Architecture? ](https://www.treinaweb.com.br/blog/o-que-vem-a-ser-a-clean-architecture) Confira nesse artigo uma introdução do que é a Clean Architecture, quais seus componentes e os benefícios ao utilizar essa arquitetura. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **21h 09min 16s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58