Série da semana: Angular, API RESTful e Banco de Dados

Veja mais

curso Minha Primeira Single Page Application com React

Neste curso aprenderemos a desenvolver uma Single Page Application utilizando o React, uma das principais bibliotecas JavaScript da atualidade. Veremos aqui conceitos fundamentais como componentes e rotas, além de como consumir um web service RESTful utilizando a Fetch API do JavaScript. E para estilizar visualmente e dar à nossa interface a característica de responsividade, utilizaremos o Bootstrap 4.

Precisa saber mais sobre esse tema antes de iniciar o curso?
Consulte os Guias abaixo:

Assine e tenha acesso completo Carga Horária No Certificado - 19H

Curso de React Online

Aula 1 - mvp

Introdução

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

Criando o projeto

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.
mvp
Aula 3 - mvp

Instalando o Bootstrap

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.
mvp
Aula 4 - mvp

Criando o menu superior

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.
mvp
Aula 5 - mvp

Exibindo o menu superior

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.
mvp
Aula 6 - mvp

Conhecendo o web service RESTful

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.
mvp
Aula 7 - mvp

Criando o componente Resumo

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.
mvp
Aula 8 - mvp

Definindo a interface do resumo

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.
mvp
Aula 9 - mvp

Obtendo dados do web service

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.
mvp
Aula 10 - mvp

Definindo classes CSS dinamicamente

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.
mvp
Aula 11 - mvp

Criando o componente Consultas

Seguiremos agora o mesmo procedimento usado para criar o componente de Resumo e adicionaremos ao projeto o componente Consultas, que consumirá dados do endpoint /consultas.
mvp
Aula 12 - mvp

Definindo a interface das Consultas

Tendo criado o componente Consultas, definido seu state e como ele deve consumir o web service, podemos montar a estrutura de HTML e CSS na qual os dados das consultas devem ser exibidos.
mvp
Aula 13 - mvp

Criando o componente Faturamento

Criaremos agora o último componente: o Faturamento. Ele obterá seus dados do endpoint /faturamento e os exibirá em uma tabela com duas colunas.
mvp
Aula 14 - mvp

Instalando o react-router-dom

Para trabalhar com rotas em uma aplicação React devemos instalar o pacote react-router-dom, que traz componentes que nos permitirão alternar entre as seções da aplicação de acordo com a URL.
mvp
Aula 15 - mvp

Configurando as rotas

Tendo instalado o pacote react-router-dom e adicionando o BrowserRouter no index.js, devemos agora definir onde os componentes serão renderizados quando cada rota for acessada. Isso será feito com usando as classes Switch e Route dentro do App.js.
mvp
Aula 16 - mvp

Adicionando os links das rotas

Adicionaremos agora os links na navbar para que possamos navegar com facilidade entre as rotas definidas anteriormente. Para isso usaremos o componente Link do pacote react-router-dom.
mvp

Autor do curso

Certificado Devmedia

Todos os nossos cursos oferecem certificado com carga horária. Eles são aceitos em todas as faculdades e orgãos públicos do Brasil. Assim que finalizar um curso já emita o seu.

Suporte ao aluno em tempo real

Todos os cursos possuem professores online para ajudar em qualquer dúvida que for necessária para o completo entendimento do curso.

Desafios do curso

React: Criando uma lista com os dados de uma requisição

Comprar
Saiba Mais Exclusivo para assinantes

React: Corrigindo o código de um componente

Comprar
Saiba Mais Exclusivo para assinantes

React: Definindo as propriedades e o estado de um componente

Comprar
Saiba Mais Exclusivo para assinantes

React: Efetuando uma requisição HTTP

Comprar
Saiba Mais Exclusivo para assinantes

Avaliação do curso

Acesse todos os nossos cursos sendo um assinante mvp

Benefícios MVP
  • Guias de Carreira
  • Suporte em tempo real
  • Assista o conteúdo offline
  • Emissão de certificado
  • #JOBS - Diversas vagas de emprego
  • Web-currículo
SEJA MVP
R$ 69,90 /mês *Tempo mínimo de assinatura: 12 meses.
Assine agora e tenha acesso ao curso
15 anos de treinamento online
700 mil cadastros
200 mil fãs no facebook
100 mil certificados emitidos