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.

Tecnologias:

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

Joel Rodrigues

Mais Cursos DevMedia

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

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