Usando JSX no React (instalado via NPM)

Por: Angelo Luis Ferreira | 14/09/2020 Acessos: 5.527

Neste tutorial vamos mostrar como utilizar a extensão JSX em aplicações com React.

Atenção:

O exemplos apresentados neste tutorial são aplicáveis apenas quando se usa o React instalado no computador (Windows, Linux e Mac), pois o pacote de instalação da biblioteca já vem com o software Babel, que é um "transpiler" interno que faz a comunicação com os diferentes navegadores. Para instalar o React no Windows, leia o tutorial: Como instalar e utilizar o React no Windows.

Se você deseja adicionar o React pontualmente em apenas algumas partes de um site, leia o tutorial: Como renderizar elementos do React em um site.

Observações:

a) O Babel é um compilador fonte a fonte (transpilador), que permite que se escreva códigos JavaScript mais recentes, como o JSX por exemplo, interpretando sintaxes incompatíveis ou ainda não disponíveis na forma nativa nos diferentes navegadores de internet. Para saber mais, acesse o site Babel.

b) As aplicações depois de desenvolvidas no computador (servidor local) poderão ser transferidas definitivamente para um servidor de hospedagem Windows ou Apache Linux (servidor web).

c) Para pequenas aplicações localizadas em apenas algumas partes de um documento web, podemos inserir o React via CDN (links disponíveis no site https://reactjs.org/). Neste caso, também será preciso adicionar os links do "transpiler", sendo o Babel, o interpretador mais utilizado (links disponíveis no site https://babeljs.io/). Caso deseje adicionar o React em apenas algumas partes de um site, leia o tutorial: Como adicionar elementos do React em um site.

d) Para criar códigos JSX recomendamos a utilização de um editor ou um IDE apropriado para o React. Neste tutorial, utilizaremos o Visual Studio Code como editor. Para instalar o Visual Studio Code, acesse o link: https://code.visualstudio.com/

O que é JSX?

JSX nada mais é do que uma extensão da sintaxe do JavaScript criada para ajudar a dar forma aos elementos de "front-end" de uma aplicação desenvolvida em React. Veja abaixo algumas considerações sobre o JSX quando utilizado junto com o React:

• O React não requer o uso do JSX, porém a sua utilização é quase que obrigatória (auxilia e muito os desenvolvedores);
• JSX é muito similar ao HTML e XML, mas não é HTML e nem XML (lembre-se sempre disso);
• Diferentemente do HTML, o JSX não é interpretado pelo navegador e por isso é necessário a utilização de um "transpilador" (o React instalado no computador via NPM já possui um "transpilador" interno instalado);
• JSX pode lembrar uma linguagem de template, mas ele vem com toda a força e o poder do JavaScript;
• JSX parece HTML, mas é uma mistura de JavaScript e HTML, entretanto, é mais rápido e mais fácil que o JavaScript puro;
• O JSX permite colocar estruturas do tipo HTML dentro do JavaScript.
• O JSX foi criada pela equipe de desenvolvimento do React.

Por que usar JSX?

Observando as considerações acima podemos concluir que devemos utilizar o JSX em aplicações com React pelos seguintes fatos:

• Pela similaridade com o HTML, o JSX oferece aos desenvolvedores uma forma mais simples e intuitiva para programar com React.
• Com o JSX é possível aproveitar todo o poder do JavaScript em uma estrutura tipo HTML.
• Evita a necessidade de aprender ou de utilizar outras linguagens.

1. Entendendo a estrutura do React instalado via NPM

1.1. Para utilizarmos o React com o JSX precisamos primeiro entender um pouco a sua estrutura.

1.1.1 No tutorial Como instalar e utilizar o React no Windows vimos que o React instalado a partir do NPM (Node Package Manager) é constituído basicamente da seguinte estrutura:

• node_modules - pasta responsável por guardar todas as dependências do projeto. Essa pasta é criada pelo NPM no momento em que uma biblioteca, como o próprio React, é adicionada ao projeto.
• public - pasta pública da aplicação web. Nela ficam guardados os arquivos iniciais da aplicação, como o index.html que é interpretado pelo navegador, imagens e um arquivo JSON com os parâmetros de configuração do site.
• src - pasta responsável pelo código fonte da aplicação: Aqui ficarão todos os arquivos JavaScript e CSS que irão compor a nossa aplicação.

1.2. Abrindo a pasta src que contém todo o código fonte da nossa aplicação, temos os seguintes arquivos principais:

1.2.1. App.js que define o componente principal da aplicação.

1.2.2. index.js que é responsável pela renderização do código, ou seja, visualização de toda a aplicação.

 1.3. Portanto, todo o código fonte de uma aplicação deverá ser gerenciado pelo componente principal <App> e renderizado pelo arquivo index.js:

1.3.1. Observe que App, definido pelo arquivo App.js, nada mais que um componente do React.

1.3.2. Como apenas o componente App é renderizado, todo código fonte deve ser inserido ou controlado pelo arquivo App.js.

2. Estrutura básica do componente App

2.1. Como vimos anteriormente, todo o código fonte deverá ser gerenciado pelo componente App. Para isso, devemos ter uma estrutura básica para iniciarmos uma aplicação com React.

2.1.1. Abra o arquivo App.js e exclua todas as linhas. Depois, reescreva a estrutura básica mínima do componente:

import React from 'react';

function App() {
  return (
    <>

    
  );
}

export default App;

 Veja a imagem no nosso editor Visual Studio:

2.2. Agora que já temos a nossa estrutura mínima, podemos iniciar o nosso código JSX.

2.2.1. Lembre-se, o componente App somente poderá retornar um único elemento, ou seja, todo o código JSX deverá estar inserido entre as tags <> e </>.

2.2.1. Se desejar, poderá substituir as tags <></> pelas tags <div></div>.

3. Escrevendo nosso primeiro código React - "Olá, Mundo!"

3.1. Agora que já conhecemos um pouco da estrutura do React, podemos escrever nosso primeiro código: Olá Mundo!!!

3.1.1. Dentro do arquivo App.js, acrescente o código JSX abaixo:

<h1>Olá, Mundo!</h1>

3.1.1.1. Veja abaixo como fica o nosso App.js

Obs.: Lembre-se, o código que inserimos acima é muito parecido com HTML, mas não é HTML.

3.2. Para ver a aplicação no navegador, abra o terminal do editor ou prompt de comando do Windows.

3.2.1. Utilizando o comando cd acesse a pasta onde está localizada a sua aplicação React.

3.2.2. Depois, digite o comando npm start + [Enter].

3.2.3. Aguarde alguns instantes para a compilação completa do aplicativo.

3.2.4. Uma janela no navegador é aberta exibindo sua aplicação.

4. Adicionando variáveis no JSX

4.1. No JSX é possível trabalharmos diretamente com variáveis. No JSX, uma variável, assim como qualquer expressão JavaScript, deverá estar inserida entre chaves {}. Veja o exemplo abaixo onde criamos as variáveis JavaScript "name" e "age":

function App() {
  let name = 'Santos Dumont';
  let age = 90;

  return (
    <>
      <h1>Olá, Mundo!</h1>
      <div>
        <p>O nome dele é {name}.</p>
        <p>Ele tem {age} anos.</p>
      </div>
    </>
  );
}

4.1.1. Veja que em JSX chamamos as variáveis dentro de chaves: {name} e {age}.

4.2. Veja o resultado do nosso exemplo:

5. Usando valores dinâmicos em JSX (funções e objetos)

5.1. Podemos usar funções e objetos JavaScript em JSX, inserindo-os também entre chaves. Veja o exemplo abaixo onde utilizaremos uma função.

5.1.1. Observe que criamos a função JavasCript fora do componente App().

function nomeCompleto(user) {
  return user.nome + ' ' + user.sobrenome;
}

function App() {
  let user = {
    nome: 'Alberto',
    sobrenome: 'Santos Dumont',
    idade: 90
  };

  return (
    <>
      <h1>Olá, Mundo!</h1>
      <div>
        <p>O nome dele é <b> {nomeCompleto(user)} </b>.</p>
        <p>Ele tem {user.idade} anos.</p>
      </div>
    </>
  );

5.2. Entendendo a estrutura do código:

5.3. Veja o resultado do código acima:

6. Inserindo links e imagens (atributos em JSX)

6.1. Assim como no HTML, podemos utilizar atributos para definirmos valores em determinados elementos em JSX. Da mesma forma que os exemplos anteriores, os atributos também deverão estar inseridos entre chaves {}.

6.1.1. Veja no exemplo abaixo onde utilizaremos os atributos: href, src, rel e target

function App() {
  let url = 'https://www.visualdicas.com.br/images/banners/visual%20dicas%20logo%20portal%20111.jpg';


  return (
    <>
      <h1>Olá, Mundo!</h1>
      <div>
        <a href={'http://visualdicas.com.br'} target={'_blank'} rel={"noopener noreferrer"}>
          <img src={url} alt={'Clique aqui'} />
        </a>
        <p>Clique na imagem acima para abrir o site.</p>
      </div>
    </>
  );
}
      

6.1.2. Veja o resultado abaixo:

Documentação Oficial

1. [https://nodejs.org/en/ ] » Sobre instalar a plataforma de desenvolvimento node.js.

2. [https://pt-br.reactjs.org/tutorial/tutorial.html ] » Introduzindo JSX - React