React - Introdução

 Neste post vamos fazer uma breve introdução ao React.

React é uma framework javascript e por isso é importante ter conhecimentos desta linguagem de programação para melhor compreender o seu funcionamento.

O que é necessário?

Para construir páginas com React é necessário ter instalado a framework Node e o seu instalador de packages o npm.

Com o Node instalado basta abrir uma janela da linha de comandos, eu aconselho utilizar o novo Windows Terminal ou o Cmder.

Na sua linha de comando escolhida execute o comando:

npx create-react-app Tutorial01

Este comando vai criar uma pasta com o nome Tutorial01 e instalar dos os ficheiros necessários para construir a sua primeira aplicação React dentro dessa pasta.

De seguida entramos na pasta criada com o comando:

cd Tutorial01

E iniciamos a aplicação com o comando:

npm start

Deve conseguir ver uma página com o seguinte aspeto:

A partir daqui, até fechar a linha de comando, todas as alterações feitas aos ficheiros da sua aplicação são automaticamente carregadas no browser sem necessidade de fazer o refresh manualmente.

Para editar o código será necessário abrir um editor de texto, eu vou utilizar o Visual Studio Code.

Assim basta digitar o comando:

Code .

Dentro da pasta da aplicação para abrir o VS Code.

A pasta da app React tem a seguinte estrutura:

A pasta public tem os ficheiros html e imagens publicas do projeto, a pasta src tem o css e js.

Com o React podemos criar os nossos próprios componentes e inseri-los no html com a inclusão de tags com o nome do componente.

O objetivo de utilizar o React passa por criar componentes para compor a página web e reutiliza-los sempre que possível promovendo a reutilização do código.

Como é referido na página criada por default para a nossa aplicação devemos começar por editar o ficheiro app.js que está dentro da pasta src:

Como podemos verificar pelo código acima apresentado trata-se de um ficheiro que contém um função com o  mesmo nome do ficheiro e que é exportada como um módulo na última linha de código.

O código dentro da função utiliza a função return para devolver um conjunto de tags que nem são html nem é uma string, não tem ' ' ou " ".

Este código chama-se JSX e é uma extensão do javascript. É assim que a interface da página, e os seus componentes, são descritos em React.

Vamos alterar esta função para ficar assim:

Com esta alteração a nossa página fica assim:

Como é que a página é composta?

Se analisarmos o ficheiro index.html que está na pasta public podemos verificar que para além de ter uma estrutura simples, comum a qualquer página web, contém somente uma div com o id root.

Esta div será a tag onde todos os componentes da nossa app serão renderizados.

O componente App é incluído na página devido ao código que está no ficheiro index.js na pasta src:

Como podemos ver este ficheiro executa a função render do React que permite manipular o DOM ao incluir o componente App na div root.

É a partir daqui que toda a página é construída, como podemos verificar basta a tag <App /> para inserir o componente na página, sendo necessário importar primeiro, como se pode ver pela linha:

import App from './App'

Para desenvolver a nossa React App devemos agora criar os nossos componentes, que mais tarde serão incluídos no componente App.

Os componentes podem ser criados com base numa função ou através da utilização de classes, tirando partido da versão ES6 do javascript.

Cada componente inclui a camada de visualização, interface, e a camada lógica ou o código que controla o comportamento do componente.

Componente Hello World

Anteriormente fizemos uma alteração ao componente App para mostrar a mensagem Hello World. Tipicamente queremos criar vários componentes que podem ser integrados para criar uma página mais complexa.

Vamos criar um componente para mostrar a mensagem Hello World, para isso começamos por criar um ficheiro novo, na pasta src, com o nome hello.js, primeiro fazemos uma versão com uma função depois fazemos com uma classe.

Versão  com uma função

Agora alteramos o ficheiro App.js para incluir este componente, assim:

Versão com uma classe

A classe é derivada da classe component do React e deve implementar a função render que devolve o conteúdo a incluir quando o componente é inserido na página.

A inserção é igual, basta a tag, neste caso, <Hello2 />

Neste momento a página está assim:

Os componentes, como já vimos, tiram partido do JSX para implementar a interface mas também podem combinar código com as tags html desde que dentro de { }

 Assim podemos alterar o componente Hello2 para 

Como é possível verificar no browser aparece o resultado da operação 2+2.

Também podemos executar funções dentro dos elementos html. Vamos ver um exemplo:

Neste exemplo a classe implementa um construtor que pode receber propriedades diretamente do html na tag em que é incorporada, vamos ver isso mais à frente.

O construtor define duas propriedades que a função JuntarNomes devolve numa string só, essa função é incorporada dentro da tag <h1>.

A função também pode receber valores diretamente, assim:

Neste caso a função JuntarNomes verifica que recebeu parâmetros e em caso afirmativo junta os nomes passados.

Não esquecer de alterar o ficheiro App.js para incluir uma tag para cada um destes componentes.