Blog fellyph cintra - react js

Por que REACT JS?

React JS é o assunto do momento no Brasil e Europa, nos EUA já faz sucesso a mais de um ano o framework do Facebook apenas confirma a sua força este ano.

React JS é a tecnologia chave requisitadas nas principais vagas de front aqui na Europa tirando o espaço do Angular ainda bastante forte. Como parte dos meus estudos traduzirei alguns artigos e tutorias que ando a ler. O primeiro deles é uma breve introdução utilizarei como base o “Why React?” e “Getting Started“.

Por que React?

React JS é uma biblioteca JavaScript para criar interfaces do Facebook e Instagram. O React foi criado para resolver o problema: criar largar aplicações com dados que mudam a cada segundo.

React JS é Simples

Simplesmente expressar como a sua aplicação deve olhar para qualquer ponto no tempo, e React vai automaticamente administrar todas atualizações da sua interface quando os seus dados mudam.

Declarativo

Quando os dados mudam, React conceitualmente dispara o botão refresh e sabe quando atualizar os dados que mudaram.

Construindo ambiente “componentizável”

React é todo construído sobre componentes reutilizáveis. Na verdade, com React a única coisa que você precisa é construir componentes. Visto que eles são encapsulados, componentes podem fazer o seu código reutilizável, “testável” e com fácil separação de interesses.

Iniciando os trabalhos

Primeiramente baixaremos o “Starter Pack”, nesse pacote possui as versões prebuilt do React JS e React DOM para o seu navegador, como também uma coleção de exemplos para o seu estudo. Então depois que baixar e descompactar o zip com o starter pack, temos a seguinte estrutura:

Estrutura de pastas de um projeto React JS
Estrutura de pastas de um projeto React JS

Criando primeiro exemplo com React JS

Criaremos o nosso primeiro arquivo helloworld.html na pasta raiz.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="build/react.js"></script>
    <script src="build/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

O exemplo acima foi retirado da documentação, explicaremos alguns pontos. Para executar o React precisamos de três arquivos básicos react.js , react-dom.js e o browser.min.js(babel). Adicionamos uma div com id “example” na linha seguinte adicionamos uma tag script com o tipo “text/babel” esse parâmetro é utilizado pelo Babel.

Para quem não conhece ele é um compilador genérico multi funcional de JavaScript. “What?” Compliquei? na real ele compila as versões mais recentes do JavaScript(ES2015 e ES2016) e React JS para uma versão que rode nos browsers atuais. Se quiser saber mais dá uma conferida no link: https://github.com/thejameskyle/babel-handbook/blob/master/translations/pt-BR/user-handbook.md#toc-introduction

Na tag script podemos ver uma mistura de JavaScript com HTML essa sintaxe é conhecida como JSX, no exemplo acima utilizamos uma função que renderiza o JSX “ReactDOM.render” ela recebe dois parâmetros: o nosso código JSX e o elemento que adicionaremos o código renderizado(O h1 com hello world).

Claro esse é um exemplo de introdução, não é obrigatório o código JSX ficar no HTML podemos criar um arquivo JavaScript separado sem problemas.

Exibindo os dados

A utilização mais básica numa interface é exibir algum dado. O foco do React JS é facilitar essa tarefa e manter as interfaces atualizadas em tempo real quando os dados mudam.

Vamos criar uma segundo exemplo com alguma interação.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Timer React</title>
    <script src="https://fb.me/react-15.1.0.js"></script>
    <script src="https://fb.me/react-dom-15.1.0.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel" >
      var Relogio = React.createClass({
        render: function() {
          return (
            <p>
              Olá, são exatamente: {this.props.date.toTimeString()}
            </p>
          );
        }
      });

      setInterval(function() {
        ReactDOM.render(
          <Relogio date={new Date()} />,
          document.getElementById('example')
        );
      }, 500);
    </script>
  </body>
</html>

No exemplo acima criamos um componente, classe utilizando a função “React.createClass” temos e várias maneiras de criar componentes e cada caso tem uma particularidade, no caso do createClass passamos um objeto como parâmetro e o atributo render possui um JSX como valor. Isso não determina que o JSX será compilado nesse momento. Apenas deixa pre-definido o que será “renderizado” quando chamarmos o componente “Relogio” mais a frente dentro do nosso JSX temos um ponto importante “{this.props.date.toTimeString()}” as chaves especificam que esse item é uma variável no caso quem chamar o componente precisa passar o atributo “date”.

Após o createClass temos um setInterval que irá chamar a cada 500 milissegundos ReactDOM.render e chamamos o componente que criamos anteriormente e passamos um parâmetro date. Se tudo e correr bem teremos na nossa tela o texto:

Olá, são exatamente: XX:XX:XX(hora atual)

Se quiser saber mais sobre React, dê uma conferida na documentação: https://facebook.github.io/react/index.html

Próximo Post irei abordar mais esse ponto de criar componentes e o modo de pensar no conteúdo utilizando React.

Conteúdo Relacionado


Publicado

em

,

por

Comentários

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *