Aprende React, 2ª Edição

Capítulo 5. React com JSX

Este trabalho foi traduzido com recurso a IA. Agradecemos o teu feedback e comentários: [e-mail]

No último capítulo, nós nos aprofundamos em como o React funciona, dividindo nossas aplicações React em pequenos pedaços reutilizáveis chamados componentes. Esses componentes renderizam árvores de elementos e outros componentes. Usar a função createElement é uma boa maneira de ver como o React funciona, mas como desenvolvedores React, não é isso que fazemos. Não andamos por aí compondo árvores complexas e pouco legíveis de sintaxe JavaScript e chamamos isso de diversão. Para trabalhares eficientemente com o React, precisamos de mais uma coisa: JSX.

JSX combina o JS de JavaScript e o X de XML. É uma extensão JavaScript que nos permite definir elementos React usando uma sintaxe baseada em tags diretamente no nosso código JavaScript. Às vezes, o JSX é confundido com HTML porque eles são semelhantes. O JSX é apenas outra forma de criar elementos React, para que não tenhas de arrancar os cabelos à procura da vírgula em falta numa chamada complexa para createElement.

Neste capítulo, vamos discutir como usar o JSX para construir uma aplicação React.

Elementos React como JSX

A equipa React do Facebook lançou o JSX quando lançou o React para fornecer uma sintaxe concisa para criar árvores DOM complexas com atributos. Eles também esperavam tornar o React mais legível como HTML e XML. Em JSX, o tipo de um elemento é especificado com uma tag. Os ...