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

Começando com React

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

Portuguese (Português) translation by Rafael Corrêa Gomes (you can also view the original English article)

Final product image
What You'll Be Creating

MVC é um paradigma muito popular em desenvolvimento web e estêve ao redor por muito tempo. O React framework é uma parte poderosa do trindade que é o Model-View-Controller, porque concentra-se puramente no View sozinho. React é escrito em JavaScript e criado por equipes de desenvolvimento do Facebook e Instagram.

React está sendo usado em tudo através da web para criar aplicativos web rápida que são fáceis de manter devido à forma como é feita a estrutura na View do React framework.

O React pode fazer?

  1. Construção rápida, ágil, isomórfica de web apps, agnósticas do framework. React não faz nenhuma suposições sobre as tecnologias de stack.
  2. Manipulação de Virtual DOM fornece um modelo de programação simples, que pode ser processado no navegador, no servidor ou desktop com React Native.
  3. As ligações de fluxo de dados com React são concebidas como um fluxo de dados unidirecional reativa. Isto reduz os requisitos de clichê e é mais fácil de trabalhar do que os métodos tradicionais.

Hello World

Para começarmos, aqui está um exemplo simples de React retirado os exemplos oficiais:

Este exemplo irá processar 'Hello John' em um container de <div>. Tome conhecimento da sintaxe de XML/HTML que é usado nas linhas 3 e 8. Isto é chamado JSX.

O que é JSX?

JSX é uma sintaxe XML/HTML que é usada para processar HTML de dentro do código JavaScript. React transforma JSX nativa JavaScript para o navegador, e com as ferramentas fornecidas, você pode converter código HTML dos seus sites existentes em JSX!

JSX facilita código-conviver como se sente assim como escrever HTML nativo, mas de dentro JavaScript. Combinado com Node, isto faz para um fluxo de trabalho muito consistente.

Com JSX não é necessário usar React — você pode apenas usar JS simples — mas é uma ferramenta muito poderosa que torna mais fácil para definir estruturas de árvore com e atribui, então eu recomendo o seu uso.

Para processar uma tag HTML em reagir, basta usar nomes de marca minúscula com alguns JSX da seguinte forma:

Instalando o React

Existem várias maneiras de usar o React. A maneira recomendada oficialmente é da npm ou Facebook CDN, mas além disso você pode clonar de git e construir o seu próprio. Também você pode usar o starter kit ou economizar tempo com um gerador de scaffolding do Yeoman. Vamos cobrir todos esses métodos para que você tenha uma compreensão completa.

Usando o Facebook CDN

Para a maneira mais rápida de ir embora, só incluem as bibliotecas React e React Dom do fb.me CDN como segue:

Instalação via NPM

O manual do React recomenda o uso de React com um sistema de módulo de CommonJS como Browserify ou Webpack.

O manual do React também recomenda usar os pacotes npm React e React-dom. Para instalar estas no seu sistema, execute o seguinte no prompt de terminal bash dentro do diretório do projeto, ou criar um novo diretório e cd para ele primeiro.

Agora você será capaz de ver a instalação de React dentro do diretório node_modules.

Instalação via Git

Dependências

Você precisa ter Node v4.0.0+ e npm v2.0.0+. Você pode verificar sua versão do Node com node version e npm com npm version

Atualizando o Node via NVM

Eu recomendo usar o nvm - gerenciador de versão Node para atualizar e selecione sua versão do Node. É fácil de adquirir nvm simplesmente executando:

Este script clona o repositório nvm para ~/.nvm e adiciona a linha fonte para seu perfil (~ /. bash_profile, ~/.zshrc ou ~ /. Profile).

Se você deseja instalar manualmente nvm você pode fazer isso através do git, com:

Para ativar o nvm com esse método, você precisa de fonte shell com:

Nota: Adicione esta linha ao seu ~ /. bashrc, ~ /. Profile ou ~/.zshrc respectivamente arquivos para tê-lo automaticamente originados no login.

Usando o NVM

Com nvm agora instalado, pode obter qualquer versão do Node que exigimos e pode verificar a lista de versões instaladas com node list e os disponíveis com node ls-remote. Precisamos de uma versão superior 4.0.0 para trabalhar com a React.

Instalar a versão mais recente e defini-lo como a versão padrão com o seguinte:

Node é atualizado e npm é incluído. Agora você está pronto para continuar com a instalação.

Desenvolva React a partir do código Git

Clone do repositório com git em um diretório chamado react em seu sistema com:

Depois de ter clonado o repositório, agora você pode usar grunt para desenvolver React:

Neste ponto, um diretório build/ foi preenchido com tudo que você precisa usar o React. Dê uma olhada no diretório /examples para ver alguns exemplos básicos de trabalhar!

Usando o Starter Kit

Primeiro baixe o starter kit.

Extraia o zip e na raiz, crie um helloworld.html, adicionando o seguinte:

Neste exemplo, React usa Babel para transformar o JSX em JavaScript simples através do <script type="text/babel">.

Usando um arquivo JavaScript separado

Criar um novo arquivo no src/helloworld.js e coloque o seguinte código dentro dele:

Agora tudo que você precisa fazer é referência no seu HTML, então abra o helloworld.html e carregar o script que você criou usando uma tag script com um atributo de tipo de texto/babel, assim:

Atualize a página e você verá o helloworld.js sendo processado pelo babel.

Nota: Alguns navegadores (por exemplo Chrome) falhará carregar o arquivo, a menos que é servido através de HTTP, então certifique-se você estiver usando um servidor local. Eu recomendo o projeto browsersync.

Transformação Offline

Você também pode usar a linha de comando (CLI) para transformar seu JSX usando as ferramentas de linha de comando de babel. Isto é facilmente adquirido através do comando npm:

O --global ou -g instalará o pacote babel globalmente para estar disponível em todos os lugares. Esta é uma prática muito boa com o uso de Node para vários projetos e ferramentas de linha de comando.

Agora que babel é instalado, vamos fazer a tradução do helloworld.js que acabamos de criar nas etapas anteriores. No prompt de comando do diretório raiz onde você descompactou o starter kit, execute:

Agora o arquivo build/helloworld.js será ser gerado automaticamente sempre que você fizer uma alteração! Se você estiver interessado, leia a documentação de Babel CLI para obter um conhecimento mais avançado.

Agora que babel gerou o build/helloworld.js, que contém apenas JavaScript, atualize o HTML sem quaisquer marcas de script habilitado para babel.

Então, recapitulando, com babel que podemos carregar JSX diretamente dentro de uma tag de script via o atributo do tipo de texto/babel. Isto é bom para fins de desenvolvimento, mas para que a produção, nós podemos fornecer um arquivo JavaScript gerado que pode ser armazenado em cache na máquina local do usuário.

Geração desta cópia é feita na linha de comando, e como se trata de uma tarefa repetitiva eu recomendo automatizando o processo através de --watch. Ou você pode ir um passo além e utilizam webpack e browsersync para automatizar totalmente o seu fluxo de trabalho de desenvolvimento. Para fazer isso no caminho mais fácil possível, nós podemos automatizar a instalação de um novo projeto com um gerador Yeoman.

Instalando com Scaffolding Yeoman

Yeoman é uma ferramenta muito útil para começar projetos rapidamente e com uma configuração de fluxo de trabalho e a ferramenta ideal. A idéia é para deixá-lo passar mais tempo no desenvolvimento do que a configuração da área de trabalho do projeto e para minimizar tarefas repetitivas (estar ciente disto — RSI é a razão número um codificadores parem de codificação). Como prática recomendada, economizando tempo com ferramentas implementar D.R.Y (Don't Repeat Yourself) no seu dia a dia irá aumentar a sua saúde e eficiência e deixá-lo passar mais tempo fazendo o código real, ao invés de configuração.

Há um monte de andaimes lá fora, chegando em muitos sabores para diferentes escalas de projeto. Para este primeiro exemplo estaremos usando a react-fullstack scaffolding do Yeoman; Você pode ver uma demonstração de como se parece o resultado final.

Nota: Esta é uma configuração fullstack, que provavelmente é um exagero para os projetos de pequenos. A razão pela qual que eu seleciono este andaime é dar-lhe um ambiente totalmente de pronto, assim você pode ver como o starter kit apura em um aplicativo maior. Há um cabeçalho e rodapé, e você pode ver onde um login de usuário e registrar apresentam vontade ir, embora eles não são codificados, ainda no exemplo.

Uso

Para usar o yeoman, primeiro instale se você não tiver gulp, bower e grunt-cli, instale assim:

Agora instale o React scaffolding com:

Agora crie um diretório para seu projeto e use cd para acessar:

Finalmente, use o yo  com o React-fullstack scaffolding  para criar seu aplicativo react dentro do diretório:

Yeoman agora irá criar os diretórios e arquivos necessários; Você será capaz de ver atualizações sobre isso na linha de comando.

Com os andaimes agora configurado, vamos construir o nosso projecto:

Por padrão, começamos no modo de depuração, e para ver é só adicionar -- release, por exemplo, npm run start -- release

Você verá agora o compilação inicial e  também inicializando webpack. Depois disso, você verá a saída webpack dizendo que você verá informações detalhadas sobre a compilação e as URLs para acessar.

Acesse seu aplicativo através de URLs listados no final da saída, com o seu navegador por padrão no http://localhost:3000/. Para acessar a interface de administração de sincronização do navegador, vá para http://localhost:3001.

Nota: Você pode precisar abrir a porta no seu servidor para a porta do desenvolvimento. Para ubuntu / debian usuários com ufw, faça o seguinte:

Convertendo seu site existente para JSX

Facebook oferece uma ferramenta on-line se você precisa converter só um trecho do seu HTML em JSX.

Para maiores requisitos há uma ferramenta no npm por isso chamado htmltojsx. Baixe com:

Use via linha de comando é tão simples como:

Por que o htmltojsx é um módulo do nó, você também pode usá-lo diretamente no código, por exemplo:

Exemplo de lista

Vamos começar a trabalhar na criação de uma lista de tarefas básicas para que possa ver como funciona o React. Antes de começarmos, por favor, configure sua IDE. Eu recomendo usar o Atom.

No prompt do bash, instale os línters para React via apm:

Nota: a versão mais recente do linter-eslint estava fazendo meu MacBook Pro muito lento, então eu desativei.

Depois disso, podemos ir andando sobre a criação de uma lista básica dentro do andaime que fizemos na etapa anterior com Yeoman, para te mostrar um exemplo de trabalho de fluxo de dados.

Certifique-se de seu servidor é iniciado com npm start e agora vamos começar a fazer algumas mudanças.

Em primeiro lugar, existem três arquivos de modelo jade fornecidos neste scaffolding. Nós não usá-los para o exemplo, então comece por limpar o arquivo index.jade é apenas um arquivo vazio. Uma vez que você salvar o arquivo, verifique seu navegador e terminal de saída.

A atualização é exibida instantaneamente, sem qualquer necessidade de atualizar. Esta é a configuração de webpack e browsersync que o scaffolding proporcionou a entrada em vigor.

Em seguida, abra o diretório de componentes e criar um novo diretório:

Agora, dentro do diretório de UserList, crie um arquivo package.json com o seguinte:

Além disso, ainda dentro do diretório de UserList, crie o arquivo UserList.js e adicione o seguinte:

Agora, para terminar, precisamos adicionar alguns dados para esta lista. Vamos fazer isso dentro de components/ContentPage/ContentPage.js. Abra esse arquivo e definir o conteúdo a ser da seguinte forma:

Agora, quando salvamos, reconstruirá a webpack e browsersync irá exibir as alterações no seu navegador. Dê uma olhada no código-fonte para ver como ela foi processada.

Resumo

Nós usamos o Yeoman scaffolding gerador react-fullstack para iniciar um aplicativo de web de reagir baseado o starter kit. Para uma explicação adicional sobre o layout de arquivo e diretório, confira o readme no repositório git reagir starter kit.

Daqui nós editado o arquivo index.jade para que ele foi anulado para fora e começou a criar nossa própria visualização, fazendo um novo componente chamado UserList.

Dentro components/UserList/UserList.js, definimos como será processada a lista com:

Aqui é importante notar que reagir requer tudo iteradas itens para ter um identificador exclusivo fornecido sob o atributo key.

Para exibir a lista podemos incluí-lo dentro do arquivo ContentPage.js com import UserList from '.../UserList'; e definir alguns dados de teste com:

Dentro ContentPage.js, chamamos o componente UserList com o JSX < UserList dados = {listData} / >.

Agora o componente UserList pode acessar o atributo data através de this.props.data.

Qualquer momento que podemos passar um valor com um atributo de um componente, ele pode ser acessado via this.props. Você também pode definir o tipo de dados que devem ser fornecidos usando a variável estática de propTypes dentro de sua classe.

Estendendo Componentes vs. Sintaxe React.createClass 

Finalmente, um ponto importante a observar é que este exemplo fez uso de componentes estendidas. Isso tem um monte de benefícios para semanticamente estruturar seu código. Mas você pode desejar acessar uma abordagem mais de esqueleto, como fazem muitos outros exemplos.

Então em vez de classe ComponentName estende o Compent que você viu antes neste tutorial, você criar uma classe React com a seguinte sintaxe por exemplo:

Bem, isso envolve-nos para esta introdução para reagir. Agora você deve ter uma boa compreensão das seguintes opções:

  • Obtendo o React
  • como usar Babel com React
  • usando JSX
  • Criando um componente através de métodos estendidos
  • usando seu componente e passando dados

Nas próximas partes, vamos discutir como usar JSX ainda mais, como trabalhar com um banco de dados como uma fonte de dados persistentes e também como reagir funciona com outras tecnologias de web populares como PHP, Rails, Python e .NET.

Advertisement
Advertisement
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.