Primeiros passos com JSX
JSX é uma extensão de sintaxe para JavaScript. Ele parece com HTML, mas é usado dentro do código JavaScript. JSX torna a escrita de componentes React mais fácil e intuitiva.
Por que Usar JSX?
JSX ajuda a criar elementos React de forma simples. Ao invés de usar funções JavaScript, você usa uma sintaxe que se assemelha ao HTML. Isso torna o código mais legível.
Como Funciona o JSX?
JSX se transforma em chamadas React.createElement(). Esse processo é feito durante a compilação. Veja um exemplo básico:
const element = <h1>Hello, world!</h1>;Este código cria um elemento React h1 que exibe “Hello, world!”. Por trás das cenas, ele se transforma em:
const element = React.createElement('h1', null, 'Hello, world!');Embutindo Expressões JavaScript
Você pode usar expressões JavaScript dentro do JSX. Coloque as expressões entre chaves {}. Por exemplo:
const name = 'Alice';
const element = <h1>Hello, {name}!</h1>;Este código exibirá “Hello, Alice!”.
Atributos em JSX
Em JSX, você pode passar atributos aos elementos, como no HTML. Por exemplo:
const element = <img src="logo.png" alt="Logo" />;Note que alguns atributos HTML têm nomes diferentes em JSX. Por exemplo, class se torna className, e for se torna htmlFor.
Componentes e JSX
JSX também pode ser usado para representar componentes React. Por exemplo:
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Sara" />;Aqui, o componente Welcome recebe uma propriedade name e a utiliza para exibir uma mensagem de boas-vindas.
Conclusão
JSX facilita a criação e manipulação de elementos React. Ele combina a facilidade do HTML com o poder do JavaScript. Agora, pratique criar seus próprios elementos e componentes usando JSX.
