React 17 - Conheça o que vai mudar no JSX \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 08 Horas 03 Min 49 Seg Tempo restante da oferta: 08 03 49 [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) React 17 - Conheça o que vai mudar no JSX [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) # React 17 - Conheça 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. [ Akira Hanashiro ](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) 6 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/10/react-17-conheca-o-que-vai-mudar-no-jsx.png) Olá Web Developers! O [React](https://www.treinaweb.com.br/blog/conheca-o-react-biblioteca-para-desenvolvimento-web/ "React") 17 foi lançado e não trouxe nenhuma funcionalidade nova. Porém, ele veio com algo que vai mudar como o [JSX](https://www.treinaweb.com.br/blog/o-que-e-jsx/ "JSX") funciona e um detalhe de como você lida com ele. ## Como o JSX funcionava até agora Os navegadores não entendem JSX. Portanto, é necessário que uma ferramenta como [Babel](https://www.treinaweb.com.br/blog/o-que-e-babel/ "Babel") faça a “tradução” do JSX para JavaScript comum. Isso significa que quando você escreve o seguinte código: ```jsx function MeuComponente(){ return Olá Web Developers!; } ``` Teremos o seguinte resultado: ```js function MeuComponente(){ return React.createElement('div', null, 'Olá Web Developers!'); } ``` Note que o `JSX` é substituído por `React.createElement()`. Por consequência, mesmo que você não fosse usar algo do React, era necessário importá-lo: ```jsx import React from 'react'; function MeuComponente(){ return Olá Web Developers!; } ``` Caso você não importasse, você teria um erro na hora da transpilação. E muitos iniciantes no mundo do React já tiveram esse mesmo problema, sem entender onde estavam errando. [ ![React - Despertando o Poder dos Hooks](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/react.svg) Curso React - Despertando o Poder dos Hooks Conhecer o curso ](https://www.treinaweb.com.br/curso/react-despertando-o-poder-dos-hooks) ## O novo JSX Transform do React 17 No React 17 em diante não vamos mais precisar importar o React para apenas usar JSX. A fim de simplificar as coisas, o novo transformador de JSX irá injetar automaticamente as funções necessárias. Então o seguinte código: ```jsx function MeuComponente(){ return Olá Web Developers!; } ``` Vai se tranformar em: ```js import {jsx as _jsx} from 'react/jsx-runtime'; function App() { return _jsx('div', { children: 'Olá Web Developers!' }); } ``` E o melhor de tudo: você não precisa mudar nada no seu código, pois isso é compatível com os códigos já existentes! Se acaso você quiser atualizar seu código, a própria equipe de desenvolvimento do React criou um [script que remove automaticamente as importações não usadas do React](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#removing-unused-react-imports "script que remove automaticamente as importações não usadas do React"). Basta executar `npx react-codemod update-react-imports`. ## Mas existe alguma vantagem no novo JSX Transform? Sim! Além de não precisarmos mais importar o React quando não formos usá-lo, também teremos uma melhora no tamanho dos arquivos. ```js // antigo function MeuComponente(){ return React.createElement('div', null, 'Olá Web Developers!'); } // novo function App() { return _jsx('div', { children: 'Olá Web Developers!' }); } ``` Além disso, também foi dito que o formato anterior não possibilitava certas melhorias e simplificações, que agora com o novo formato serão possíveis. De acordo com a equipe de desenvolvimento do React, esse novo formato também vai permitir futuras melhorias e até a redução do número de conceitos que as pessoas precisam saber para aprender React. [ ![Desenvolvedor React Sênior](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/react.svg) Formação Desenvolvedor React Sênior Conhecer a formação ](https://www.treinaweb.com.br/formacao/desenvolvedor-react-senior) - [ #JavaScript ](https://www.treinaweb.com.br/blog/tag/javascript) - [ #ReactJS ](https://www.treinaweb.com.br/blog/tag/reactjs) - [ #Novidades ](https://www.treinaweb.com.br/blog/tag/novidades) - [ #biblioteca ](https://www.treinaweb.com.br/blog/tag/biblioteca) - [ #react ](https://www.treinaweb.com.br/blog/tag/react) Autor ![Akira Hanashiro](//secure.gravatar.com/avatar/d107ca73135bc62770a67ebbfe4cf80d?d=mm) ## Akira Hanashiro Graduado em Análise e Desenvolvimento de Sistemas, Pós-graduado em Projetos e Desenvolvimento de Aplicações Web e MBA em Machine Learning. Especializado em Front End e curte desenvolvimento de jogos. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) ## 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/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/2019/10/11111424/react-flutter-400x280.png) [ Desenvolvimento Mobile ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-mobile) 7 anos atrás ## [ React Native ou Flutter: por qual começar? ](https://www.treinaweb.com.br/blog/react-native-ou-flutter-por-qual-comecar) Confira nesse artigo um pouco mais sobre essas duas tecnologias mobile e veja pontos que podem te ajudar a decidir por qual delas começar seus estudos. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/09/05155108/React-Hooks-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 7 anos atrás ## [ React: Conheça o Poder dos Hooks ](https://www.treinaweb.com.br/blog/react-conheca-o-poder-dos-hooks) Conheça o que os React Hooks podem fazer e como eles vão facilitar o processo de desenvolvimento da sua próxima aplicação. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2025/01/NOVIDADES-REACT-19-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 2 anos atrás ## [ 4 Novidades do React 19 ](https://www.treinaweb.com.br/blog/4-novidades-do-react-19) Descubra 4 novidades do React 19, incluindo novos hooks, otimizações de performance e uso prático das Actions para formulários. 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/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/2017/11/06145813/react-16-400x280.jpg) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 9 anos atrás ## [ O que há de novo no React 16? ](https://www.treinaweb.com.br/blog/o-que-ha-de-novo-no-react-16) O React, agora em sua versão 16, foi totalmente reescrito. Veja as melhorias e o que há de novo. 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) 3 anos atrás ## [ Criando aplicações React com Vite e TypeScript ](https://www.treinaweb.com.br/blog/criando-aplicacoes-react-com-vite-e-typescript) Neste artigo veremos como criar aplicações React com Vite, que permite desenvolvermos aplicações modernas com recursos como HMR, entre outros. 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/2020/10/5-motivos-para-estudar-react-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 6 anos atrás ## [ 5 motivos para estudar React ](https://www.treinaweb.com.br/blog/5-motivos-para-estudar-react) Confira neste artigo cinco motivos para você aprender a biblioteca JavaScript mais famosa da atualidade: o React. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/03/27113042/react-native-400x280.png) [ Desenvolvimento Mobile ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-mobile) 7 anos atrás ## [ O que é o React Native? ](https://www.treinaweb.com.br/blog/o-que-e-o-react-native) Veja neste artigo o que é o React Native. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/01/CICLO-VIDA-REACT-400x280.jpg) [ React ](https://www.treinaweb.com.br/blog/categoria/react) 4 anos atrás ## [ Ciclo de vida de componentes funcionais no React ](https://www.treinaweb.com.br/blog/ciclo-de-vida-de-componentes-funcionais-no-react) Como funciona o ciclo de vida de componentes funcionais no React para manipular a inicialização, atualização e limpeza de um componente React 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 **08h 03min 49s** - 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