Avançar para o conteúdo principal

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.


Comentários

Mensagens populares deste blogue

Vamos fazer um carro com o Unity 3D

Neste artigo vamos fazer um carro, simples, com o Unity 3D. A ideia é utilizar o motor de física do Unity 3D para simular o comportamento do carro. Os passos a seguir são: [1] - Criar um projeto novo

C# IEnumerable e IEnumerator

Neste artigo vamos aprender como utilizar a interface IEnumerator por forma a permitir utilizar um ciclo foreach num conjunto ou coleção de dados. A maior parte das coleções (listas e outras) já implementam a interface, mas neste caso vamos personalizar a maneira como percorremos a lista. Quando utilizamos código assim: foreach(Class c in Collection) { ... } O compilador converte este código em algo assim: IEnumerator cc = Collection.GetEnumerator() while(cc.MoveNext()) { c=(Class)cc.Current; ... } Ao implementar a interface IEnumerable significa que a classe implementa uma versão da função GetEnumerator() que deve devolver uma classe que implemente a interface IEnumerator. Vamos explorar um exemplo. Começamos pela classe client Esta classe permitirá guardar os dados dos clientes, existindo um campo para indicar se o cliente ainda está ativo ou não. De seguida temos uma classe que define uma lista de clientes e que implementa a interface IEnumerable que de