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:
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.
Deixe um comentário