Apresentação ao JSX
O React usa uma sintaxe especial conhecida como JSX (JavaScript XML). O JSX permite que você integre o HTML (ou componentes personalizados que você pode criar) e o JavaScript em um único arquivo ou até mesmo em uma única linha de código. Ao usar o JSX, você pode contar com a sintaxe JavaScript para a lógica. O Visual Studio Code fornece IntelliSense para arquivos JSX, portanto, é uma ferramenta útil quando você está trabalhando com o React.
Observação
O JSX se baseia na linguagem XML. A sintaxe XML é semelhante ao HTML. Em muitos casos, talvez você não note diferença. No entanto, o XML impõe algumas restrições importantes em sua sintaxe:
- Todos os elementos devem ser colocados dentro de um elemento pai.
- Todos os elementos devem ser fechados.
O processo de build
Os navegadores não dão suporte nativo a JSX. Portanto, JavaScript e HTML devem ser gerados dos arquivos JSX a serem renderizados por um navegador. Vários empacotadores e outras ferramentas podem executar as tarefas necessárias. Essas ferramentas incluem Webpack, Parcele Snowpack. Usaremos o Snowpack porque ele não requer código nem script extra.
Componentes
O desenvolvimento do React baseia-se em componentes. Os componentes são unidades autossuficientes de exibição e trabalho. Eles podem ser reutilizados em seu aplicativo. Use-os para dividir logicamente o aplicativo em partes (ou componentes) menores.