7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. React

Começando com React e JSX

Read Time: 5 mins

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

Nesse tutorial, veremos como começar em React criando um app e tentando entender o básico do JSX. O tutorial assume que o entendimento em HTML e JavaScript é bom.

O Que É React?

React é uma biblioteca JavaScript criada pelo Facebook para administrar interfaces de usários para aplicações web facilmente. Um dos destaques da React é que ela ajuda a criar componentes UI administráveis, facilitando a criação de aplicações web em larga escala. React usa o conceito de DOM Virtual, mantendo um espelho da DOM verdadeira. Quando uma mudança ocorre, React executa uma comparação, identifica a mudança e atualiza a DOM verdadeira. O conceito de DOM Virutal torna a renderização do app mais rápida e aprimora a performance.

O Que É JSX?

JSX é uma extensão da sintaxe do JavaScript que lembra XML. Eis um exemplo:

JSX parece HTML mas é uma mistura de JavaScript e HTML. O código acima renderiza a mensagem dentro da tag h1 no elemento container. JSX é mais rápido que JavaScript por aplicar otimizações ao compilar o código fonte. Também é preferível JSX já que é mais fácil que usar JavaScript puro.

Da documentação oficial:

JSX é uma extenção de sintaxe similar ao XML para o ECMAscript sem semântica definida. Não é para ser implementada por motores ou navegadores. Não é uma proposta incorporar JSX na especificação ECMAScript em si. Intenciona-se usá-lo com vários pré-processaores (transpiladores) para transformar esses tokens em ECMAScript padrão.

Por Que Usar JSX?

Não é obrigatório usar JSX ao criar apps com React. Podemos usar código JavaScript puro. Mas seu uso tem suas vantagens:

1. É mais fácil escrever JSX que JavaScript puro. É tão simples quanto abrir e fechar tags XML. Eis um exemplo de JSX:

Eis o código React compilado:

2. JSX garante legibilidade e manutenabilidade mais fáceis.

3. JSX otimiza o código ao compilar, executando mais rápido se comparado a código JavaScript equivalente.

Iniciando

Aprendamos mais, escrevendo um pouco de JSX e renderizando-o no navegador. Para começar a criar app em React, criemos um arquivo index.html simples com a estrutura a seguir:

Como visto no código acima, referenciamos os scripts react e react-dom na página index.html. Também referenciamos o script babel, que transforma código JSX em chamadas de função do react. Por exemplo, consideremos o código JSX a seguir:

Babel transformaria o código JSX na função react requerida, como:

Criando Componentes React Usando JSX

Criemos um componente React que mostre uma mensagem de boas vindas. Eis como o código ficaria:

Message é um componente react que retornar o código JSX acima e que é compilado numa função React usando Babel. Usando ReactDOM.render, renderizamos o componente dentro do elemento div main.

Salve o documento acima e abra o arquivo index.html no seu navegador, e poderá ver a mensagem Welcome to TutsPlus.

Passando Atributos para Componentes

Na maior parte do tempo, é preciso passar dados para os componentes, que são avaliados, modificados e renderizados. Vejamos como podemos passar atributos para nossos componentes mostrarem os dados.

Suponhamos que queremos passar um nome para o componente Message mostrá-lo na mensagem. Primeiro, adicionaremos o atributo customizado ao componente.

O atributo passado pode ser lido dentro da função render do componente usando this.props na chave do componente. Modifiquemos o código como abaixo:

Salvemos as mudanças, vejamos o arquivo index.html e poderemos ver a mensagem.

Criando um Componente React do Google Maps com JSX

Agora que somos familiarizados com JSX e já criamos componentes React usando JSX, tentemos criar um componente para mostrar um mapa do Google Maps.

Comecemos adicionando a referência à API do Google Maps no index.html.

Crie um componente MyMap como abaixo:

Adicionemos um método chamado componentDidMount no componente React e dentro dele definamos variáveis maps, como visto abaixo:

O método componentDidMount é invocado imediatamente após a renderização inicial e os objetos mapas são inicializados dentro desse método. ReactDOM.findDOMNode encontra uma referência ao nodo DOM do componente e cria o objeto mapa. marker foi defino para configurar as propriedades do marcador como, map, position e animation.

Tentemos renderizar o componente dentro da div #main.

Salvando as mudanças acima e abrindo index.html, podemos ver ver o Google Maps em ação.

Resumindo

Nesse tutorial, vimos uma introdução básica ao React e JSX. Vimos como criar componentes React usando JSX e também criamos um componente React para Google Maps. Nos próximos tutorias, focaremos em mais funcionalidades do React.

O código do tutorial está disponível no GitHub.

Você já criou algum componente React? Gostaríamos de ouvir sobre sua experiência. Deixe suas ideias nos comentários abaixo.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.