Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React
Code

Usando JSX e React

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called Getting Starting with React.
Data Persistence and Sessions With React

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

Final product image
What You'll Be Creating

JSX parece uma mistura de XML e HTML. Usamos JSX com React para facilmente criar componentes para nossos apps. JSX vira JavaScript quando o React compila o código.

A beleza de React é que podemos criar código reutilizável e estruturar facilmente nossa app com componentes em mente. Por fim, a distância entre mock up/wireframe e implementação nunca esteve tão curta.

Nossa Primeira Experiência com JSX

Eis um exemplo de JSX usado para renderizar um HTML:

Para criar um componentes, basta usar uma variável local que inicia com uma letra maiúscula, por exemplo:

Nota: Temos diversas palavras reservadas no JSX, é JavaScript no final das contas—assim, as palavras chave class e for são desencorajada como nomes de atributos. Os componentes React esperam que esses nomes sejam className e htmlFor, por exemplo.

Aninhando Tags

Especifiquemos filhos dentro de nosso JSX, assim:

Testando JSX

Usando Babel REPL para testar nosso JSX:

Sub-Componentes e Espaços de Nome

Criação de formulários é fácil com JSX e sub-componentes, por exemplo:

Para fazer isso funcionar, precisamos criar os sub-componentes como atributos do componente principal:

Expressões

Para usar JavaScript para criar algo a ser usado em algum atributo, React apenas precisa envolvê-lo em chaves {}, assim:

Podemos apenas passar um booleano para atributos de formulário, como disabled, checked e outros. Esse valores também podem ser fixos se preferimos criá-los em HTML puro.

Atributos de Ampliação

Quando quisermos configurar vários atributos, é melhor fazê-lo durante a declaração do componente, nunca depois. Fazê-lo depois é um anti-padrão perigoso que significa que podemos não ter esse dado até muito mais tarde na execução.

Adicionemos múltiplas propriedades ao componente dessa forma, usando o novo operador de ampliação (spread) ....

Comentários em JSX

Podemos usar // e /*...*/ dentro de nosso JSX. Por exemplo:

Armadilhas Comuns em JSX

Existem algumas coisas que podem confundir algumas pessoas no JSX, como quando adicionamos atributos a elementos HTML nativos que não existem na especificação HTML.

React não renderizará qualquer atributo em elementos HTML nativos que não esteja na especificação a não ser os data-*:

Além disso, renderizar HTML com conteúdo dinâmico pode ser bem confunso pelo escapamento e proteção XSS que o React tem embutido. Por isso, o React provê dangerouslySetInnerHtml.

Exemplo de Aplicação de Chat

Talvez conheçam o app Gitter. É uma aplicação web de chat em tempo real focada em desenvolvedores. Muitas pessoas a usam para discutir seus projetos no GitHub, dada a fácil integração com GitHub e pela possibilidade de criação de canal para nossos repositórios.

Esse tipo de aplicação pode, facilmente, ser criada em React, implementando a API WebRTC para criar um chat p2p no navegador. Para isso usaremos os módulos PeerJS e socket.io do Node.

Para dar uma idei da arquitetura da aplicação, eis um diagrama UML de baixo nível e básico:

file

ChatServer recebe mensagem sinal com PeerJS e cada cliente a usa como um procurador para cuidar da travessia do NAT.

Começaremos o app do zero para dar uma boa ideia de como criar uma aplicação React. Primeiro, criemos um novo diretório para a aplicação e o arquivo package.json dentro.

Esse arquivo será usado pelo npm para configurar facilmente a aplicação. Especificaremos nossas dependências: express, uma framework web que servirá nosso app; peer, o servidor peerjs que usaremos para sinalização; socket.io, que usaremos para agrupamento e a implementação webRTC. react-bootstrap e bootstrap são pacotes para usar o framework CSS do Twitter para estilizar o app.

Precisaremos de alguns pacotes adicionais e para isso usaremos bower.

Criemos bower.json e adicionemos o seguinte:

Com essa configuração, traremos react, jQuery, bootstrap, eventEmitter para lançar eventos e e a versão cliente de peerJS para envolver a API da WebRTC.

Configuremos .bowerrc, especificando onde instalar as coisas:

Daqui, apenas esperemos as dependências insralarem com:

Uma vez terminado, veremos os diretórios node_modules e src/lib. Eles contem os módulos prontos para uso.

Agora, criemos app.js na pasta principal, junto do arquivo package.json. Essa será a porta de entrada da aplicação.

Isso criará um servidor Express, tornando os arquivos em src/ obtidos com bower, acessíveis via HTTP. Então, uma instância de socket.io será criada para observar o objeto expressServer. Isso será usado para agrupar e facilitar o próximo passo para PeerServer, que fará a parte real do WebRTC.

Para configurar um PeerServer, precisamos especificar a porta e o caminho que o servidor executará e então configurar os eventos com o método .on. Usaremos um arquivo separado, Events.js, para especificar os eventos do app.

Aqui usamos o evento events.CONNECT para especificar quando uma usuário se conectou ao app. Isso será usado pelos estados dos componentes da visão para atualizar em tempo real.

Para isso, precisamos criar um servidor para as conexões peer-to-peer onde as procuraremos.

Criemos um arquivo src/Serve.js e adicionemos o seguinte:

Isso é o cérebro da aplicação. Aqui configuramos o objeto ChatServer com todas as funções.

Primeiro usamos socket.io para estabelecer um sinal de um novo usuário conectado via events.CONNECT:

Então, para conectar ao PeerServer, usamos o seguinte:

Entäao observamos por eventos através do método on:

Também temos nosso JSX dentro de componentes na pasta components/chat. Tomemos um tempo para olhar todos no repositório. Focaremos no componente ChatBox por hora:

Essa classe lança mão do ChatServer criado anteriormente, utilizando-o como procurador do componente ChatBox.

Os componentes e bibliotecas são, por fim, renderizados na página index.html e servidos via node, com express.

Para iniciar o app, executemos npm start e visitemos http://localhost:3001 para ver o chat.

Publicando no Heroku

Publicar nas núvens é bem fácil com Heroku. Criemos uma conta gratuita e então instalemos o conjunto de ferramentas heroku no nosso sistema. Para mais informações sobre como configurar heroku, vá em Heroku Dev Center.

Agora que heroku está disponível, acessemos e criemos um novo projeto, assim:

Aqui, obteremos um nome aleatório do Heroku para a URL do app—no nosso exemplo é http://sharp-rain-871.herokuapp.com/. Heroku também cria um repositório git para o app.

Agora, é tão simples quanto enviar o código para heroku:

Quando o envio terminar, podemos iniciar o serviço web com o seguinte:

Agora, visitemos a URL fornecida ou, como atalho, usemos o comando open:

Conclusões

Aprendemos a criar componentes JSX e integrá-los ao React, com um examplo detalhado de uma aplicação de chat. Tome um tempo lendo o códgo e veja como React e o diretório components/chat funcionam.

Combinado à publicação no Heroku, podemos começar a hackear e criar nossos próprios apps React na núvem!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.