Neste tutorial vamos aprender os essenciais de React.js ao construir uma aplicação muito simples. Vamo-nos focar apenas nos básicos desta biblioteca de JavaScript, deixando de parte tudo aquilo que não for essencial.

Porquê Usar React.js?

Com a quantidade de plataformas open-source existentes, a questão sobre porquê utilizar React.js e não outra biblioteca é legítima. É difícil justificar a aprendizagem de uma nova framework quando ainda não se sabe se vai “colar” ou se vai ser apenas mais uma rapidamente ultrapassada.

No entanto, existem algumas razões que fazem com que aprender React.js seja viável:

Simplicidade — A verdade é que React.js é fácil de entender rapidamente. Usa JavaScript simples, é baseado em componentes e tem um ciclo de vida bem definido. Apesar de poder ser utilizado apenas com JavaScript, o React.js usa maioritariamente uma sintaxe própria chamada JSX, que permite a mistura de HTML e de JavaScript.

JSX é mais fácil de utilizar do que JavaScript, mas a framework permite o uso das duas sintaxes.

Fácil de Aprender — Qualquer pessoa com conhecimento em programação consegue aprender a trabalhar com React.js rapidamente. Outras linguagens, como Angular e Ember, são muito mais difíceis de aprender. Com React só é preciso ter um conhecimento básico de CSS e HTML.

— Qualquer pessoa com conhecimento em programação consegue aprender a trabalhar com React.js rapidamente. Outras linguagens, como Angular e Ember, são muito mais difíceis de aprender. Com React só é preciso ter um conhecimento básico de CSS e HTML. Abordagem Nativa — Podemos utilizar React para criar aplicações móveis e o código pode ser reutilizado. Isto significa que podemos fazer aplicações web, Android e iOS ao mesmo tempo.

— Podemos utilizar React para criar aplicações móveis e o código pode ser reutilizado. Isto significa que podemos fazer aplicações web, Android e iOS ao mesmo tempo. Fácil de Testar — As React views podem ser tratadas como funções de estado, por isso é possível manipular o estado que passamos à React view e verificar o output.

O Setup

Para começar a trabalhar com React.js devemos utilizar o setup mais básico possível. Esse setup é um ficheiro HTML que importa as bibliotecas React e ReactDOM utilizando tags de script:

<html>

<head>

<script src="https://unpkg.com/react@15/dist/react.min.js"> </script><script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js">

</script>

<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

</head>

<body>

<div id="root"></div>

<script type="text/babel">



/*

ADD REACT CODE HERE

*/



</script>

</body>

</html>

Também importámos Babel, uma vez que o React utiliza JSX para o markup. Vamos ter de transformar este JSX em JavaScript para que o navegador o possa entender.

Existem mais duas coisas que é preciso saber:

O div com a id de #root é o ponto de entrada da nossa aplicação. Toda a aplicação vai existir aí. A tag no corpo <script type="text/babel"> é onde vamos escrever o nosso código React.js

Componentes

Tudo em React é um componente. Estes componentes tomam normalmente a forma de classes de JavaScript. Podemos criar um componente aumentando a classe React-Component .

Vamos criar um componente chamado Hello :

class Hello extends React.Component {

render() {

return <h1>Hello world!</h1>;

}

}

Depois, é preciso definir os métodos para o componente. No nosso exemplo só temos um método, o render () .

Dentro do render () vamos colocar uma descrição daquilo que queremos que o React desenhe na página. No nosso exemplo só queremos mostrar uma tag h1 com o texto Hello World! .

Para que a nossa aplicação possa ser desenhada no ecrã temos que utilizar ReactDOM.render () :

ReactDOM.render(

<Hello />,

document.getElementById("root")

);

É aqui onde ligamos o componente Hello com o ponto de entrada da aplicação ( <div id="root"></div> ).

A sintaxe similar a HTML que vimos é o código JSX que mencionámos anteriormente. Não é mesmo HTML, mas o que se escreve lá acaba como tags HTML no DOM.

O próximo passo é fazer com que a aplicação lide com os dados:

Lidar com os Dados

Existem dois tipos de dados em React: props e state . A diferença entre os dois é algo complicada de se perceber nas fases iniciais, por isso não nos devemos preocupar se a acharmos confusa. Vai tudo começar a fazer sentido à medida com que se trabalha com React.

A maior diferença é que state é privado e pode ser mudado dentro do próprio componente. Por outro lado, props são externas e não são controladas pelo componente em si. As ordens vêm de componentes mais acima na hierarquia que também controlam os dados.

Um componente pode mudar o seu estado interno diretamente, mas não pode mudar as props.

Antes de mais, vamos examinar as props:

Props

A nossa componente Hello é estática e renderiza a mesma imagem constantemente. Uma grande vantagem do React é a possibilidade de reutilizar componentes. Podemos escrever um componente uma vez e voltar a utilizá-lo em casos diferentes — como, por exemplo, para escrever mensagens diferentes.

Para que consigamos reutilizar componentes, temos de adicionar props. Destacámos a negrito a forma de passar props a um componente:

ReactDOM.render(

<Hello message="my friend" />,

document.getElementById("root")

);

Esta prop chama-se message e tem o valor de my friend . Podemos aceder à prop dentro do componente Hello ao referenciar this.props.message , assim:

class Hello extends React.Component {

render() {

return <h1>Hello {this.props.message}!</h1>;

}

}

A razão para o uso de chavetas em vez de colchetes em {this.props.message} é devido à necessidade de dizer ao JSX que queremos adicionar uma expressão em JavaScript. Isto é denominado de escaping.

Portanto, agora temos um componente reutilizável que pode desenhar qualquer mensagem que desejemos numa página.

Mas e se quisermos que o componente seja capaz de mudar os seus próprios dados? Nesse caso temos de utilizar state.

State

A outra forma de guardar dados em React é no estado do componente. Ao contrário dos props, que não podem ser mudados diretamente pelo componente, o state pode.

Por isso, se quisermos que a aplicação mude, por exemplo consoante a interação do utilizador, temos de guardar as alterações dentro do state de um componente algures dentro da aplicação.

Inicializar o State

Para inicializar o state apenas temos de colocar this.state no método constructor () da classe. O nosso state é um objeto que, no nosso caso, só tem uma chave, chamada message .

class Hello extends React.Component {



constructor(){

super();

this.state = {

message: "my friend (from state)!"

};

}



render() {

return <h1>Hello {this.state.message}!</h1>;

}

}

Antes de definirmos o state, é necessário chamar super () no constructor. Isto é devido ao facto de this não estar inicializado antes do super () ser chamado.

Alterar o State

Para modificar o state, temos apenas de chamar this.setState() , passando o novo objeto state como um argumento. Vamos fazer isto dentro de um método que vamos denominar de updateMessage :

class Hello extends React.Component {



constructor(){

super();

this.state = {

message: "my friend (from state)!"

};

this.updateMessage = this.updateMessage.bind(this); }



updateMessage() {

this.setState({

message: "my friend (from changed state)!"

});

}



render() {

return <h1>Hello {this.state.message}!</h1>;

}

}

Uma pequena nota: para fazer isto funcionar, tivemos de ligar a palavra this ao método updateMessage , caso contrário seria impossível de aceder ao this no método.

O próximo passo é criar um botão onde possamos clicar, para que se possa ativar o método updateMessage() .

Portanto, adicionemos um botão ao método render() :

render() {

return (

<div>

<h1>Hello {this.state.message}!</h1>

<button onClick={this.updateMessage}>Click me!</button>

</div>

)

}

Aqui, estamos a ligar um event listener ao botão, à espera do evento onClick. Quando isto for ativado, chamamos o método updateMessage.

Está aqui o componente na íntegra:

class Hello extends React.Component {



constructor(){

super();

this.state = {

message: "my friend (from state)!"

};

this.updateMessage = this.updateMessage.bind(this);

}



updateMessage() {

this.setState({

message: "my friend (from changed state)!"

});

}



render() {

return (

<div>

<h1>Hello {this.state.message}!</h1>

<button onClick={this.updateMessage}>Click me!</button>

</div>

)

}

}

O método updateMessage vai chamar this.setState() , que vai alterar o valor de this.state.message . E está feito!

Conclusão

Depois de tudo isto já conseguimos ter um entendimento muito rudimentar dos conceitos mais importantes em React.

Que parte de React quer que escrevamos sobre a seguir? Deixe-nos saber com um comentário.