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.
Esse curso inclui:
Suporte em tempo real
Certificado
Carga horária:
19 horas
Curso de React Online (10 aulas)
Aula 1 - Introdução
Neste curso desenvolveremos uma Single Page Application com React. Para isso aprenderemos a criar componentes, usar rotas e consumir web service RESTful.
Aula 2 - 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.
Aula 3 - 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.
Aula 4 - 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.
Aula 5 - 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.
Aula 6 - 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.
Aula 7 - 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.
Aula 8 - 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.
Aula 9 - 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.
Aula 10 - 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.
Veja outros cursos de JavaScript
JavaScript: Input
JavaScript: Aplicação em camadas
JavaScript: Objeto Literal e coleção de objetos