Aplicação de notícias - Fase 3

React

Aplicação de notícias

Pedro Ferreira

Agenda

Estruturação, flex
Aprufundar CSS

API’s
Incorporar a API de notícias

01

02

Listagens de componentes
Manipular um array de
conteúdo

03

Estruturação

Propriedade flex

*Documentação

Flex

No fundo é como os components vão
“preencher” o espaço.

Neste exemplo temos três views que estão a
ocupar o ecrã todo, e temos o flex distribuído
em 1+2+3 = 6. Podemos verificar que a View
pintada a Vermelho ocupa 1/6 do espaço livre, a
laranja 2/6 e a verde 3/6.

Estruturação da página em três seções

-
Container para a navegação das páginas

-
Container para os artigos

-
Footer com a funcionalidade de terminar a
sessão

Container de navegação

Footer

Container das notícias

API de
notícias

Incorporar dados de fontes externas

*Documentação

Axios

-
Import Axios

-
Chamar o hook com o seguinte link:
https://inshorts.deta.dev/news?category=
all

-
Fazer console.log do data

Listas e

renderização
condicional

Dinamizar a renderização de componentes

*Documentação

Renderização condicional

Em React é possível encapsular
diferentes components, em que
cada um representa um
comportamento diferente, depois é
possível renderizar apenas alguns
deles. Em relação com o estado do
componente.

*Documentação

Renderização condicional

*Documentação

Renderização

condicional

Componente

Comportamento

Y

Comportamento

x

Listas

É possível utilizar os métodos de array, como
por exemplo “map()”, para construirmos
coleções de componentes.

Ou seja, renderizar componentes de forma
cíclica

*Documentação

Criar uma lista de “Small Articles”

•
Temos de garantir que a array
existe, antes de chamarmos o
método .map()

Implementar um comportamento de loading

•
Import

•
Se os dados estiverem a
“carregar”, o componente de
loading será renderizado

•
Senão renderiza a lista de
artigos

Desenvolvimento

não linear

Do idealizado ao necessário

O desenvolvimento de um componente React, em muitas das vezes
não é linear, e isto significa que em algumas situações será
necessário rebobinar a estrutura de um componente, para
conseguirmos acomodar os dados de uma forma mais eficiente.

Submeter atividade

Será criada uma atividade no classroom,
para o efeito.

●
https://reactjs.org/docs/lists-and-keys.html

●
https://reactjs.org/docs/conditional-rendering.html

●
https://reactnative.dev/docs/flexbox

Documentação