Dissecando React - Parte 1: JSX
Tags: react, javascript, frontend, ptbr
Published: 2019-07-01 01:18:35

---
title: Dissecando React - Parte 1: JSX
published: true
description: Uma série com o objetivo de explicar os conceitos de React a fim de dar fundamento nas partes básicas para pessoas com pouca experiência com a biblioteca.
tags: React, JavaScript, Front-End, PT-BR
series: Dissecando React
---

# Uma breve retratação ao leitor

Este texto pode conter algumas leves imprecisões para fins didáticos. Alguns conceitos podem não abrangir a sua totalidade para simplificar um conceito a fim de tornar-se mais tangível à realidade do leitor, considerando-se que o publico-alvo deste texto é especificamente direcionado para quem não teve nenhum - ou muito pouco - contato com desenvolvimento, especialmente em React.

Dito isto, espero que a leitura esteja a altura de grandes nomes que me inspiram diariamente e que essa série de introduções, por assim dizer, auxiliem na jornada de pessoas que se interessem em começar no vasto campo do desenvolvimento.

# Elaborando nosso sumário

Esta é uma primeira parte introdutória sobre uma série de textos que pretendo elaborar a fim de explicar de uma forma simplificada - porém entrando em detalhes - as características de uma aplicação em React, perpassando por componentes, estados, props, hooks e suas particularidades no geral.

Com isto em vista, esse sumário será atualizado neste e nos demais textos a medida que novos artigos forem publicados. Daremos nosso _Hello World_ com a parte mais introdutória que é entender um componente e suas características principais.

**1. JSX**
[2. Renderização e Imutabilidade](https://dev.to/viniciusersouza/dissecando-react-parte-2-renderizacao-e-imutabilidade-3hh0)

# Meu Deus, o que é JSX?

Antes de partirmos para o que interessa, precisamos entender uma ferramenta que tornará nossa vida mais fácil quando se trata de criar uma aplicação em **React**.

No ramo de desenvolvimento, existe um termo muito comum chamado _"Syntax sugar"_, que significa, basicamente um facilitador de sintaxe que nos permite acelerar nossa produção, seja tornando um código mais legível, mais simplificado ou mais fácil de escrever.

O **JSX** é uma extensão de JavaScript (JSX significando JavaScript XML, para os curiosos) que nos permite invocar, por assim dizer, elementos do React. Vejamos:

```javascript
    const Felino = <img src="./foto-do-meu-pet.png" />
```

O que temos escrito acima não é nem uma *template string* ou *HTML*. É tudo **JavaScript**. O JSX é capaz de interpretar o que escrevemos como se fossem tags de HTML e "traduzir" isto para a criação de um elemento em React.

Diferente de outros modelos de desenvolvimento que separam suas funções e html em arquivos diferentes, a proposta do React foi de unificar a lógica geral: manipulação de eventos, renderização dos componentes, mudança de estados - tendo em vista que estas etapas estão muito atreladas no comportamento de um componente.

### Uau, mas e agora?

Vejamos o seguinte trecho de código:

```javascript
    const Felino = {
    	name: "Julieta",
    	photo: "./foto-do-meu-pet.png",
    	subtitle: "Miau"
    };
    
    const CartaoDoPet = (
    	<h1>{Felino.name}</h1>
    	<img src={Felino.photo} />
    	<p>{Felino.subtitle}</p>
    );
```

Muita informação? Não se desespere. Vamos no passo-a-passo.

Primeiro declaramos um objeto com as informações do nosso pet.

```javascript
    const Felino = {
    	name: "Julieta",
    	photo: "./foto-do-meu-pet.png",
    	subtitle: "Miau"
    };
```

Queremos embutir - ou no jargão, *embeddar* - estas informações dentro de um componente.

```javascript
    const CartaoDoPet = (
    	<h1>{Felino.name}</h1>
    	<img src={Felino.photo} />
    	<p>{Felino.subtitle}</p>
    );
```

Aqui é onde inserimos as informações do nosso objeto dentro do JSX. As chaves abrem espaço para que qualquer expressão válida de JavaScript possa ser ali inserida. Pode ser uma operação matemática (`1 + 1`), dados de um objeto ou até mesmo uma função.

No exemplo acima, nós acessamos os dados de um objeto que contem as informações do pet que preencherá nosso componente `CartaoDoPet`.

E tem muito mais. Imagine se não tivéssemos os dados da gatinha Julieta para preencher nosso cartão e, para estes casos, quiséssemos que uma mensagem fosse exibida para o usuário.

```javascript
    const CartaoDoPet = {
    	if(Felino) {
    		return (
    			<h1>{Felino.name}</h1>
    			<img src={Felino.photo} />
    			<p>{Felino.subtitle}</p>
    		)
    	}
    	return <h1>Nenhum felino encontrado.</h1>
    }
```

Se `Felino` for `verdadeiro`, ele retorna com o nosso componente e seus dados preenchidos. Para demais casos, a mensagem será apresentada!

Isso porque JSX, no final das contas, é JavaScript - e será traduzido para tal quando rodarmos o projeto. E isto nos traz a uma segunda questão do JSX:

```javascript
    const NomeDoPet = <h1 className="fonteAzul">{Felino.name}</h1>
```

Parece HTML, mas escrevemos `className` ao invés de `class`, e está em camelCase. Por quê?

Isso se dá porquê convencionou-se que, por se tratar de JavaScript e não HTML, utiliza-se camelCase. Tanto é que `class` é um termo reservado e, por isso, precisamos utilizar `className` para referenciar ao `class` de HTML.

### Uma pausa para recapitular e respirar

Já sabemos embutir valores dentro de nosso elemento e sabemos que no final das contas, tudo vira JavaScript - e que aquele HTML que escrevemos com JSX na verdade é JavaScript disfarçado pra facilitar a criação de um elemento React.

Em outras palavras, veja o comparativo do código a seguir:

```javascript
    const item = <h1 className="titulo">Meu titulo</h1>;

    const item = React.createElement(
    	'h1',
    	{ className: 'titulo' },
    	'Meu titulo'
    );
```

Ambos representam **a mesma coisa.** O JSX é interpretado pelo Babel, uma ferramenta que nos auxilia a escrever javascript moderno e transforma nosso elemento "html" em um `React.createElement`, uma função de criação de elemento pertencente ao React.

Essa função é importante pelo seguinte papel: Ela quem passa ao React o que será renderizado no DOM (Document Object Model - ou, em outras palavras, o que seu navegador vai entender e mostrar na tela), o que será atualizado, desmontado e tudo mais!

`'Meu Titulo'` representa o elemento `Children` do nosso elemento. Então quando inserimos um conteúdo dentro das nossas tags, ele é passado como este elemento `Children`. Salve isto em mente, pois futuramente, veremos algumas utilidades para manipular o conteúdo que estiver dentro do elemento `Children`.

# Conclusão

A fim de não deixar a leitura muito extensa e dar um espaço para a _digestão_ do conteúdo, encerro esta parte por aqui. Há muito mais sobre o comportamento do JSX na própria documentação do React, tudo muito bem detalhado.

No próximo texto, apresentarei um pouco sobre as formas que um componente React pode se apresentar e convenções, a fim de que assim tenhamos um primeiro contato com as propriedades e ciclo de vida de um componente.

Agradeço a leitura de todos, e seu feedback é muito importante pra que eu possa melhorar no conteúdo aqui apresentado.

Até a próxima!