Minha Primeira Single Page Application com React

Neste curso desenvolveremos uma Single Page Application com React. Para isso aprenderemos a criar componentes, usar rotas e consumir web service RESTful.

O primeiro passo no desenvolvimento da aplicação será criar um novo projeto com a ferramenta de linha de comando create-react-app. Ela cria para nós uma estrutura de pastas e arquivos e configura alguns pacotes necessários de forma automática.

O Bootstrap é um dos principais frameworks front-end do mercado. Ele tem como dependência a biblioteca jQuery e na versão 4 passou a depender também do Popper.js. Neste vídeo vamos ver como instalá-lo em uma aplicação React.

O menu superior será o primeiro componente do projeto. Ele utilizará o navbar do Bootstrap para exibir uma barra de navegação com links no topo da página.

Tendo criado o menu superior no vídeo passado, veremos agora como importar esse componente dentro do App.js e exibi-lo na página.

Cada página da aplicação será representada por um componente que consome dados de um web service RESTful. Neste vídeo conheceremos a estrutura dos dados que serão retornados por cada um desses endpoints.

O componente Resumo, que será criado neste vídeo, obterá seus dados do endpoint /resumo do web service e exibirá informações a respeito das consultas e do faturamento da empresa.

Na interface gráfica do componente de resumo vamos usar o sistema de grid do Bootstrap, além de cards e tables. Esses elementos serão usados para exibir as informações para o usuário de forma clara e responsiva.

Agora que temos a interface do componente pronta, vamos obter os dados do web service através de uma requisição HTTP GET. Para isso usaremos um método padrão dos componentes do React, o componentDidMount.

Da mesma forma que exibimos dados no HTML por meio de instruções JavaScript, também podemos definir classes CSS dinamicamente. Para isso, veremos como atribuir um valor à propriedade className de acordo com uma expressão condicional.