Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprenda Noções Básicas de JSX no React | Noções Básicas de React e Primeira Interface do Usuário
Introdução ao React

bookNoções Básicas de JSX no React

No React, utilizamos uma extensão de sintaxe do JavaScript chamada JSX (JavaScript XML) para construir nossas interfaces de usuário. O JSX permite que componentes React descrevam como a interface do usuário deve ser. Para isso, o React utiliza uma sintaxe chamada JSX.

JSX se assemelha ao HTML, mas é escrito dentro do JavaScript. Ele permite descrever elementos de interface diretamente no código do componente, em vez de construí-los passo a passo com JavaScript.

Embora o JSX pareça HTML, ele não é HTML. Internamente, o JSX é convertido em JavaScript que o React entende. Isso torna o JSX expressivo e poderoso, permanecendo parte da linguagem JavaScript.

No JSX, é possível incorporar expressões JavaScript diretamente na marcação. Isso facilita a exibição de dados dinâmicos e o controle do que aparece na tela. Abaixo está o mesmo componente de antes, agora mostrado com JSX:

function Welcome() {
  const name = "React";
  return <h1>Welcome to {name}</h1>;
}

Aqui, o JSX é utilizado para descrever a interface. A sintaxe {name} permite inserir valores JavaScript na interface. O React atualiza automaticamente a saída exibida quando os dados mudam.

question mark

O que melhor descreve o JSX?

Select the correct answer

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 1. Capítulo 3

Pergunte à IA

expand

Pergunte à IA

ChatGPT

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

bookNoções Básicas de JSX no React

Deslize para mostrar o menu

No React, utilizamos uma extensão de sintaxe do JavaScript chamada JSX (JavaScript XML) para construir nossas interfaces de usuário. O JSX permite que componentes React descrevam como a interface do usuário deve ser. Para isso, o React utiliza uma sintaxe chamada JSX.

JSX se assemelha ao HTML, mas é escrito dentro do JavaScript. Ele permite descrever elementos de interface diretamente no código do componente, em vez de construí-los passo a passo com JavaScript.

Embora o JSX pareça HTML, ele não é HTML. Internamente, o JSX é convertido em JavaScript que o React entende. Isso torna o JSX expressivo e poderoso, permanecendo parte da linguagem JavaScript.

No JSX, é possível incorporar expressões JavaScript diretamente na marcação. Isso facilita a exibição de dados dinâmicos e o controle do que aparece na tela. Abaixo está o mesmo componente de antes, agora mostrado com JSX:

function Welcome() {
  const name = "React";
  return <h1>Welcome to {name}</h1>;
}

Aqui, o JSX é utilizado para descrever a interface. A sintaxe {name} permite inserir valores JavaScript na interface. O React atualiza automaticamente a saída exibida quando os dados mudam.

question mark

O que melhor descreve o JSX?

Select the correct answer

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 1. Capítulo 3
some-alt