React.js : uma introdução com o famoso Hello Word com ASP.NET MVC

O ReactJS é uma biblioteca para construção de interfaces de usuários com JavaScript concorrente mais ou menos ao Angular e Knockout, digo mais ou menos porque o ReactJS está no patamar de biblioteca e os outros já estão como frameworks, ainda vou estudar mais a fundo isso.

Foi criado pelo Facebook e liberado pela primeira vez em 2013, hoje é usado também por empresas como Instagram, Yahoo, Github e até o NetFlix. Segundo o que estou lendo na internet o ReactJS é mais eficiente e tem uma biblioteca mais veloz que seus concorrentes.

Esse estudo está na página do pessoal do The Dapper Developer onde eles fazem uma comparação entre ReactJs, Angular e Knockout, bem interessante e vale a pena dar uma olhada.

É interessante dar uma olhada nesse framework, ele é utilizado pelo pessoal do Codecademy, e essas ferramentas que dão certo em cases de sucesso como o Codecademy sempre me chamam a atenção no sentido de estudar e ver como posso utilizar nos meus projetos do dia a dia.

É o mesmo caso do Dapper para acesso a dados que começei a utilizar depois de descobrir que foi criado e utilizado pelo pessoal do StackOverFlow.

A infoQ tem um livro disponivel em pdf para download que explica o cenário de uso do ReactJS no projeto da Codeacademy, muito legal é só baixar e ler o artigo.

Bom vamos ao exemplo básico:

• Crie um novo projeto no Visual Studio do tipo WebApplication;
• Instale o ReactJS através do comando Install-Package react.js lá no Package Manager Console;
• Instale o ReactJS.NET através do comando Install-Package React.Web.Mvc4;
• Adicione uma pasta nova na pasta de Scripts chamada jsx é nesta pasta que irão ficar os arquivos do reactJs, eles possuem uma extensão .jsx;
• Crie na pasta um arquivo chamado HelloWord.jsx;
• Dentro do arquivo escreva o seguinte código:

[javascript]
var HelloWorld = React.createClass({
render: function(){
return (
<div>Hello {this.props.name}</div>
);
}
});
React.render( <HelloWorld name="World" />,
document.getElementById(‘container’));
[/javascript]

• Altere o arquivo index.cshtml para o código abaixo:

[javascript]
@{
ViewBag.Title = "Index";
}
<h2 id="container"></h2>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/react/react.min.js"></script>
<script src="~/Scripts/jsx/HelloWorld.jsx"></script>
[/javascript]

Rode a aplicação e veja o resultado, clique com o botão direito do mouse e veja o código fonte da página, se você clicar no arquivo HelloWorld.jsx deve aparecer o arquivo jsx compilado pelo ReactJS.NET:

Agora vamos buscar a uma informação do servidor usando JQuery e uma chamada Json.
Altere o código do arquivo HelloWord.jsx para:

[javascript]
var HelloWorld = React.createClass({

getInitialState: function() {
return { name:”};
},
componentDidMount: function() {
$.ajax({
url: this.props.url,
dataType: ‘json’,
success: function(data) {
this.setState(data);
}.bind(this),
error: function(xhr, status, err) {
console.error(this.props.url, status,
err.toString());
}.bind(this)
});
},
render : function(){
return (
<div> Hello {this.state.name} </div>
);
}
});

React.render(
<HelloWorld url="/home/getname" />,
document.getElementById(‘container’)
);
[/javascript]

Ao rodar novamente o código veremos que a mensagem mudou, agora buscando a informação via Ajax em um controle
que devolve o resultado em json, esse retorno pode ser observado na janela do console, na imagem abaixo utilizo o firebug para ver o retorno.

No código foi criado um objeto com o React com o nome de HelloWorld, este objeto possui duas funções: getInitialState que é executado apenas uma vez durante o ciclo de vida do componente, e a função componentDidMount que efetivamente efetua a chamada ao método do controler e retorna a informação via json. Esta função é executada toda a vez que o componente é processado.

O comando React.render chama a função HelloWord passando a url do controller e o id do elemento html onde queremos renderizar o resultado.

Este é o primeiro post do meu estudo, vamos voltar a falar sobre o ReactJS com outros exemplos, como disse no começo do post estou começando a estudar e pretendo ir fazendo exemplos mais complexos e dividindo com todos os resultados.

O código fonte se encontra no meu GitHub.

Este artigo foi originalmente escrito em TechBrij

Agradeço a todos..e “Got some give some” quem se beneficia tem que contribuir!!!