Comece com React

As bibliotecas de JavaScript que se encarregam de manipular as visualizações e a forma como exibem as informações incluem cada vez mais funcionalidades que tornam o desenvolvimento de aplicações mais fácil para o desenvolvedor e mais agradável para os usuários que as utilizam.

Entre essas bibliotecas temos Reagir, que é uma biblioteca de JavaScript de código aberto focado principalmente na criação de interfaces de usuário para aplicativos de página única ou aplicativos de página única que são usados ​​por o Facebook e Instagram para tratar de tudo que se refere a visualizações, resolvendo o problema de grandes aplicações onde os dados mostrados ao usuário mudam constantemente.

Recursos de reação

Para resolver este problema que mencionamos Reagir baseia sua filosofia nas seguintes características:

SimplesEsta característica expressa como nosso aplicativo deve olhar em um determinado ponto e de que maneira ele o faz, e o que ele faz Reagir é que ele lida automaticamente com todas as atualizações na interface do usuário quando mudanças fundamentais são feitas no aplicativo.
DeclarativoQuando as informações mudam em nosso aplicativo Reagir desempenha a função de atualizar nossa página, mas apenas onde as informações foram alteradas.
Construção de componentes combináveisQuando falamos sobre Reagir, falamos principalmente da construção de componentes reutilizáveis, de facto com esta biblioteca o que fazemos na maior parte do tempo é construir componentes e graças ao facto de serem encapsulados, tornam extremamente a reutilização de código, testes e separação de funcionalidades simples.

Obtendo Reação

Agora que sabemos em que consiste Reagir e suas características, vamos obter a última versão da biblioteca e realizar uma implementação simples para mostrar o famoso Hello World.

Para obter a versão mais recente, baixamos um tablet com a biblioteca no link a seguir. Após o download, descompactamos e colocamos o conteúdo dentro de uma pasta chamada Hello_React e dentro de nós criamos um arquivo chamado hello_react.html que conterá o seguinte conteúdo:

Como podemos ver, é um código bastante simples que nos permite renderizar um texto em nossa visualização principal, graças à inclusão de react.js. Além disso, usamos JSX o que é sintaxe XML dentro de nosso JavaScript e então fazer a transformação no navegador, que podemos usar graças à implementação da segunda biblioteca chamada JSXTransformer.js

Além disso, podemos tornar nosso código mais legível e modular separando sua lógica, podemos fazer isso fazendo dois arquivos, para isso criamos um chamado hello_react.js e colocamos o seguinte código:

 React.render (, document.getElementById ('example_react'));

Então em nosso HTML o que fazemos é incluir nosso arquivo .js dentro da tag de script e teremos a mesma operação:

Vamos ver então quando executamos nosso exemplo no navegador, sua resposta:

Como podemos ver, a manipulação dos dados foi bastante simples, porém existe uma maneira melhor de implementar Reagir, já que do jeito que estamos fazendo, o código está usando o transformador de JSX do navegador, como veremos na mensagem que recebemos por meio do console.

Esta mensagem de console nos dá a solução para este pequeno aviso, e é fazer uma pré-compilação de nosso código .js, para isso usaremos o gerenciador de pacotes de Node.js para esta tarefa, então se não tivermos este ambiente instalado em nosso PC vamos à página oficial e baixamos, caso estejamos trabalhando em Windows e caso estejamos trabalhando em Linux podemos seguir os passos em este tutorial.

Pré-compilando nosso código

Para realizar esta tarefa, vamos ao nosso console Node.js e com a ajuda de npm nós instalamos a ferramenta Reagir para console de comando chamado react-tools para o qual precisamos apenas executar esta linha:

 npm install -g react-tools

Agora o que fazemos é traduzir nosso código para JavaScript puro da seguinte forma:

 jsx --watch hello_react.js

Isso não apenas traduz nosso código, mas gera automaticamente o arquivo hello_react.js Cada vez que uma alteração é feita em nosso aplicativo, vamos ver a resposta do console quando executamos este comando:

Finalmente, modificamos nosso HTML removendo a inclusão da biblioteca JSXTransformer.js já que não precisamos dele e fazemos a inclusão do nosso script de forma convencional, vejamos:

 Hello React!

Como mencionamos, a última operação que realizamos por meio do console gera automaticamente o arquivo toda vez que fazemos uma alteração em nosso aplicativo, portanto, se tivermos feito alterações, o console nos notificará da seguinte maneira:

Como podemos ver, temos duas notificações de que foram feitas alterações no arquivo, que foram efetivamente as que fizemos com relação à remoção da biblioteca e à inclusão convencional de um arquivo JavaScript.

Foi assim que terminamos este tutorial, onde poderíamos dar nossos primeiros passos com Reagir e a sua implementação nas nossas aplicações, esta para nos ajudar na construção de componentes para a visualização dos dados nas nossas vistas, verificando que não é apenas simples mas que nos fornece ferramentas que irão tornar o nosso desenvolvimento muito mais fácil.