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:

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

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

@{
    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>

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:

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')
);

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!!!