Código fonte: Program 198 | 199 |
200 | 201 |

Código fonte: Projeto Conta Bancária 202 | 203 |

204 | 205 |

-------------------------------------------------------------------------------- /03_mssql/README.md: -------------------------------------------------------------------------------- 1 |

2 |

3 |

4 |

Bootcamp - C# Full Stack

5 | 6 |

Banco de Dados - SQL Server

7 | 8 | 1. Introdução a Banco de Dados com SQL Server 9 | 2. Banco de Dados com SQL Server - parte 01 10 | 3. Banco de Dados com SQL Server - parte 02 11 | 4. Diagrama Entidade Relacionamento (DER) no DB Designer 12 | 13 |

14 | 15 | 16 |

17 |

Home

18 | -------------------------------------------------------------------------------- /04_aspnet/03.md: -------------------------------------------------------------------------------- 1 |

Introdução ao Entity Framework

2 | 3 | 4 | 5 | Dentro de qualquer aplicação Orientada a Objetos que lida com uma Base de Dados Relacional, existe um problema de distanciamento de paradigmas entre as duas frentes diferentes. Isso em grande escala torna a aplicação suscetível a inconsistências (erros nos dados) em relação ao Banco de dados, ou vice e versa. 6 | 7 | Devido a esse distanciamento de paradigmas entre a Aplicação POO e a Base de Dados Relacional, surgiu conceito de ORM, Object Relational Mapping, que atua como um intermediador entre as duas frentes, mapeando os objetos e entidades da Aplicação para a Base de Dados, e vice e versa. 8 | 9 |
10 | 11 |

1. Mapeamento Objeto Relacional

12 | 13 | 14 | **Mapeamento Objeto Relacional** é a representação de uma Tabela de um Banco de dados Relacional (MySQL, PostgreSQL, Oracle, SQL Server e etc), através de Classes JavaScript/Typescript, que dentro do contexto da POO e seguindo o Modelo MVC, são implementadas na Camada Model (Entity). 15 | 16 | O ORM define uma técnica para realizar a conciliação entre os 2 modelos. Uma das partes centrais é através do mapeamento de linhas para objetos, ou seja, o ORM define o modo como os dados serão mapeados entre os ambientes, como serão acessados e gravados (persistidos). Isso diminui o tempo de desenvolvimento, uma vez que não é necessário perder tempo fazendo essa configuração. 17 | 18 | Na prática, o Mapeamento cria a Relação de equivalência abaixo: 19 | 20 | | Banco de dados | | Linguagem Orientada a Objetos | 21 | | -------------- | ----- | ----------------------------- | 22 | | Tabela | **🡪** | Classe | 23 | | Coluna | **🡪** | Atributo | 24 | | Registro | **🡪** | Objeto | 25 | 26 | Enquanto que no banco de dados temos Tabelas, Colunas e Registros, em uma linguagem Orientada a Objetos, como o C#, temos o equivalente com Classes, Atributos e Objetos. 27 | 28 |
29 | 30 |

2. Entity Framework

31 | 32 | 33 | 34 | **Entity Framework** é uma estrutura ORM de código aberto para aplicativos .NET com suporte da Microsoft. Ele permite que as pessoas desenvolvedoras trabalhem com dados usando objetos de classes específicas de domínio sem se concentrar nas tabelas e colunas subjacentes do banco de dados onde esses dados são armazenados. Com o Entity Framework, as pessoas desenvolvedoras podem trabalhar em um nível mais alto de abstração quando lidam com dados e podem criar e manter aplicativos orientados a dados com menos código em comparação com os aplicativos tradicionais. 35 | 36 | ***"O Entity Framework é um mapeador objeto-relacional (ORM) que permite que pessoas desenvolvedoras .NET trabalhem com um Banco de dados usando Objetos .NET, eliminando a necessidade da maior parte do código de acesso a dados que as pessoas desenvolvedoras geralmente precisam escrever.”*** 37 | 38 | A imagem a seguir ilustra onde o Entity Framework se encaixa no seu aplicativo: 39 | 40 |

41 | 42 | Conforme a imagem acima, o Entity Framework se encaixa entre as entidades de negócios (classes de domínio) e o banco de dados. Ele persiste os dados armazenados nas propriedades de entidades de negócios e também recupera os dados do banco de dados e os converte em objetos de entidades de negócios automaticamente, fazendo o papel da Camada Repository. 43 | 44 |
45 | 46 |

2.1. Recursos do Entity Framework

47 | 48 | 49 | 50 | - **Plataforma cruzada:** O Entity Framework Core é uma estrutura de plataforma cruzada que pode ser executada em Windows, Linux e Mac. 51 | - **Modelagem:** O Entity Framework cria um EDM (Entity Data Model) baseado em entidades do C#, com Atributos de diferentes tipos de dados e seus respectivos Métodos Get e Set. Ele usa esse modelo ao consultar ou persistir Objetos no Banco de dados. 52 | - **Consulta:** O Entity Framework nos permite usar consultas LINQ (Language Integrated Query) para recuperar os dados do Banco de dados. O provedor de banco de dados traduzirá essas consultas LINQ para a linguagem de consulta específica do banco de dados (por exemplo, SQL para um banco de dados relacional). 53 | - **Rastreamento de alterações:** O Entity Framework acompanha as alterações ocorridas nas instâncias de suas entidades (valores de propriedade) que precisam ser enviadas ao banco de dados. 54 | - **Salvamento (Persistência) dos dados:** O Entity Framework executa comandos INSERT, UPDATE e DELETE no Banco de dados com base nas alterações ocorridas em suas entidades quando você chama o Método **SaveChanges()**. O Entity Framework também fornece o Método **SaveChangesAsync()** para trabalhar com programação assíncrona. 55 | - **Simultaneidade:** O Entity Framework usa a Simultaneidade otimista por padrão para proteger as alterações de substituição feitas por outro usuário desde que os dados foram consultados no Banco de dados. 56 | - **Configurações do Banco de dados:** O Entity Framework nos permite configurar o modelo usando atributos de anotação de dados ou a **Fluent API** para substituir as convenções padrão. Através da Fluent API, por exemplo, podemos criar os Relacionamentos entre as Entidades, definir o nome das tabelas e dos atributos, entre outras configurações. 57 | - **Migrações:** O Entity Framework fornece um conjunto de comandos de migração (Migrations), que podem ser executados no Console do Gerenciador de Pacotes NuGet ou na interface de linha de comando para criar ou gerenciar o esquema de Banco de dados da aplicação. 58 | 59 | > **Fluent API** é uma API do Entity Framework, utilizada para configurar classes de domínio, Entre estas configurações podemos definir o nome da tabela, os Relacionamentos entre as tabelas, entre outras configurações. 60 | > 61 | > **Migrations** são uma forma de gerenciar as mudanças na estrutura do banco de dados de uma aplicação. Eles permitem que você crie, altere ou exclua tabelas, colunas, índices e outros elementos do banco de dados de forma consistente e controlada (semelhante ao GIT). 62 | 63 |
64 | 65 |

2.2. A Classe DbContext

66 | 67 | 68 | 69 | A Classe **DbContext** (Database Context ou simplesmente Context) é uma classe muito importante ao trabalhar com Entity Framework. O Contexto representa uma sessão com o Banco de dados da aplicação, onde serão executadas as operações do CRUD (Criar, Ler, Atualizar, Excluir). 70 | 71 | A Classe de Contexto no Entity Framework faz parte do Namespace `System.Data.Entity.DbContext` no Entity Framework. Uma instância da classe de contexto representa a Camada Repository (Repositório), em que pode combinar várias alterações em uma única transação no Banco de dados. 72 | 73 | A Classe de Contexto também é usada para Definir o Modelo de dados, Mapear os Relacionamentos entre as Tabelas do Banco de dados, entre outras tarefas. 74 | 75 |
76 | 77 |

2.3. O que é uma entidade no Entity Framework?

78 | 79 | 80 | 81 | Uma entidade no Entity Framework é uma Classe que mapeia uma Tabela no Banco de dados. Essa classe deve ser incluída como uma `DbSet` na Classe **DbContext** da aplicação. A API do Entity Framework mapeia cada entidade para uma tabela e cada propriedade de uma entidade para uma coluna no Banco de dados. Veja a imagem abaixo: 82 | 83 |

84 | 85 | Observe que a Classe Tema, foi convertida em uma Tabela chamada Tema. 86 | 87 |
88 | 89 |

2.4. O Fluxo de trabalho do Entity Framework

90 | 91 | 92 | 93 | Vamos compreender o Fluxo de Trabalho básico de cada operação do CRUD, criado com o Entity Framework: 94 | 95 | **Criar o Modelo** 96 | 97 |

98 | 99 | Ante de criar qualquer Query na sus aplicação, você precisa definir seu modelo de dados através das Classes do tipo Model. Na sequência, precisamos definir a Classe de Contexto, como uma Herança da Classe **DbContext**, que será responsável por criar o Modelo (Banco de dados e as Tabelas), Conectar com o Banco de dados e executar as Queries SQL (Interagir com o Banco de dados e o Modelo). Para finalizar, precisamos Criar o Banco e as Tabelas, que podem ser feitos de 2 formas: 100 | 101 | 1. Criar o Banco e as Tabelas a partir do próprio modelo; 102 | 2. Criar o Banco e as Tabelas utilizando Migrations. 103 | 104 | Uma vez o Banco e as Tabelas criadas, agora poderemos executar Queries SQL. 105 | 106 |
107 | 108 | **Persistir Dados (INSERT)** 109 | 110 |

111 | 112 | Para Inserir dados (persistir um Objeto no Banco de dados), adicione o Objeto de domínio ao contexto e chame o método **SaveChangesAsync()**. A API do Entity Framework criará a instrução SQL INSERT apropriada e o executará no Banco de dados. 113 | 114 |
115 | 116 | **Consultar Dados (SELECT)** 117 | 118 |

119 | 120 | Para Consultar dados, crie e execute uma consulta **LinQ**. A API do Entity Framework converterá essa consulta em uma instrução SQL SELECT e a executará. O resultado será transformado em Objetos da Entidade pesquisada, no formato JSON. 121 | 122 |
123 | 124 | **Atualizar e Deletar Dados (UPDATE e DELETE)** 125 | 126 |

127 | 128 | Para Atualizar ou Excluir dados, Atualize ou Remova o Objeto do Contexto e chame o método **SaveChangesAsync()** para efetivar a operação. A API do Entity Framework criará a instrução SQL UPDATE ou DELETE apropriada e a executará no Banco de dados. 129 | 130 |
131 | 132 |

Documentação: Entity Framework

133 | 134 |

135 | 136 |

Voltar

137 | -------------------------------------------------------------------------------- /04_aspnet/README.md: -------------------------------------------------------------------------------- 1 |

2 |

3 |

4 |

Bootcamp - C# Full Stack

5 | 6 |
7 | 8 |

Backend - ASP.NET

Anexos

38 | 39 | 1. Diagrama de Classes✔ 40 | 41 |

42 | 43 | 44 |

45 |

Home

46 | -------------------------------------------------------------------------------- /04_aspnet/uml.md: -------------------------------------------------------------------------------- 1 |

Diagrama de Classes

2 | 3 | A **Programação Orienteda à Objetos (POO)** é um paradigma baseado no conceito de envolver dados (**Atributos**), e comportamentos (**Métodos**), relacionados aqueles dados, em uma coleção chamada Objetos, que são construídos de um conjunto de “planos de construção” (**Métodos Construtores**), definidos por uma pessoa Desenvolvedora ou por um Analista de Sistemas, chamados de **Classes**. Uma Classe é como uma planta de construção que define a estrutura para objetos, que são instâncias concretas daquela Classe. 4 | 5 | Da mesma forma que o **DER**, Diagrama de Entidades e Relacionamentos apresentam o nosso Modelo de dados Relacional de forma gráfica, o **Diagrama de Classes** representam de forma gráfica as nossas Classes e as suas relações. A **UML** (Unified Modeling Language), que **significa** Linguagem Unificada de Modelagem, é a linguagem padrão para modelagem de sistemas que seguem o paradigma da Orientação a Objetos. A UML é utilizada na construção dos Diagramas de Classes e outros tipos de Diagramas como o Diagrama de Casos de Uso, Diagrama de Sequência e etc. Neste material vamos focar no Diagrama de Classes. 6 | 7 |

8 | 9 | Observe no Diagrama de Classe acima que podemos visualizar todos os Métodos e Atributos que compõem a Classe Cat, inclusive a visibilidade, simplificando processo de implementação. 10 | 11 |

Relações entre objetos

12 | 13 | Quando falamos de uma única Classe, tudo fica muito simples, entretanto, nenhuma aplicação Orientada a Objetos se resume em apenas uma Classe, e além disso, os Objetos gerados por estas Classes possuem relações entre si, de acordo com o planejamento do projeto. Para simplificar o entendimento destas relações, construímos os Diagramas de Classes com as suas respectivas Relações. Vamos conhecer os tipos de relação entre os Objetos: 14 | 15 |

Herança

16 | 17 | A Herança é a habilidade de construir novas Classes em cima de Classes já existentes. O maior benefício da herança é a reutilização de código. Se você quer criar uma Classe que é apenas um pouco diferente de uma já existente, não há necessidade de duplicar o código. Ao invés disso, você estende a Classe existente e coloca a funcionalidade adicional dentro de uma subClasse resultante, que herdará todos os campos de Métodos da superClasse. 18 | 19 |

20 | 21 | No exemplo acima, Gato é um animal, logo ele herda todas características da Classe Animal. 22 | 23 |

Implementação

24 | 25 | Interfaces são um conceito da programação orientada a objetos que tem a ver com o comportamento esperado para uma ou um conjunto de Classes. Interfaces definem o que uma Classe deve fazer e não como. Assim, interfaces não possuem a implementação de Métodos pois apenas declaram o conjunto de Métodos. 26 | 27 | Na interface, todos os Métodos são portanto abstratos e públicos, já que são apenas declarados na interface sendo obrigatoriamente implementados pelas Classes que implementam a interface. Uma vez definida uma interface é implementada pelas Classes de devem ter o comportamento descrito na interface, ou seja, devem ter os mesmos Métodos definidos na interface. Dizemos que as Classes implementam a interface pois de fato uma Classe ao implementar uma interface deve prover a implementação de todos os Métodos definidos na interface. 28 | 29 | Em diagramas UML, o relacionamento de Implementação é mostrado por uma seta igual a da Herança, com a linha tracejada, desenhada de um objeto e apontada para outro que ele implementa. 30 | 31 |

32 | 33 | No exemplo acima, a Classe Cat está implementando os Métodos das Interfaces Quatro Patas e Respira Oxigênio 34 | 35 |

Associação

36 | 37 | A associação é um relacionamento no qual um objeto usa ou interage com outro. Em diagramas UML, o relacionamento de 38 | associação é mostrado por uma seta simples desenhada de um objeto e apontada para outro que ele utiliza. A propósito, 39 | ter uma associação bi-direcional é uma coisa completamente normal. Neste caso, a flecha precisa apontar para ambos. A 40 | associação pode ser vista como um tipo especializado de dependência, onde um objeto sempre tem acesso aos objetos os quais ele interage, enquanto que a dependência simples não estabelece uma ligação permanente entre os objetos. 41 | 42 |

43 | 44 | No exemplo acima, Professor interage com aluno. 45 | 46 |

Agregação

47 | 48 | A agregação é um tipo especializado de associação que representa relações individuais, múltiplas, e totais entre múltiplos objetos, enquanto que uma associação simples descreve relações entre pares de objetos. 49 | Geralmente, sob agregação, um objeto “tem” um conjunto de outros objetos e serve como um contêiner ou coleção. O componente pode existir sem o contêiner e pode ser ligado através de vários contêineres ao mesmo tempo. 50 | 51 | Em Diagramas UML a relação de agregação é mostrada como uma linha e um diamante vazio na ponta do contêiner e uma flecha apontando para o componente. 52 | 53 |

54 | 55 | No exemplo acima, um objeto Departamento contém diversos professores e os objetos professores continuam existindo mesmo sem o objeto departamento. 56 | 57 |

Composição

58 | 59 | A composição é um tipo específico de agregação, onde um objeto é composto de um ou mais instâncias de outro. A distinção entre esta relação e as outras é que o componente só pode existir como parte de um contêiner. No UML a relação de composição é desenhada do mesmo modo que para a agregação, mas com um diamante preenchido na base da flecha. 60 | 61 |

62 | 63 | No exemplo acima, a universidade consiste de departamentos e os departamentos só existem enquanto o objeto universidade existir. 64 | 65 |

66 | 67 |

Voltar

68 | -------------------------------------------------------------------------------- /05_react/02.md: -------------------------------------------------------------------------------- 1 |

Preparando o ambiente para trabalhar com o React

2 | 3 | 4 | 5 |

1. Como configurar um projeto React com o Vite?

6 | 7 | 8 | 9 |

1.1 👣 Introdução

10 | 11 | Normalmente, você pode criar um novo projeto usando [Create React App](https://www.digitalocean.com/community/tutorials/how-to-set-up-a-react-project-with-create-react-app) , mas pode levar muito tempo para instalar mais de 140 MB de dependências. [O Vite](https://vitejs.dev/) é uma ferramenta leve que ocupa 31 MB de dependências, o que economizará tempo ao iniciar um novo projeto. [O Vite também usa os módulos ES ( ECMAScript](https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/) ) nativos do navegador para vincular a arquivos JavaScript, que não reconstrói o pacote inteiro após cada alteração de arquivo. Essas diferenças resultam em uma experiência mais rápida ao criar, atualizar e construir um aplicativo React com o Vite. 12 | 13 | Este tutorial criará um novo aplicativo React usando a ferramenta Vite. Você criará um aplicativo básico com um novo componente, CSS e um arquivo de imagem e preparará um pacote otimizado para implantação. 14 | 15 |

1.2 👣 Pré-requisitos

16 | 17 | Para seguir este tutorial, você precisará do seguinte: 18 | 19 | - [Node.js](https://nodejs.org/en/) versão 12.2.0 ou superior instalado em sua máquina. Você pode instalar a versão mais recente do Node.js com nosso tutorial [Como instalar o Node.js](https://www.digitalocean.com/community/tutorial_series/how-to-install-node-js-and-create-a-local-development-environment) . 20 | - [VScode](https://code.visualstudio.com/) Você pode instalar a versão mais recente do VSCode 21 | - Gerenciador de pacotes Yarn versão 1.22.0 ou superior instalado em sua máquina. Você pode instalar o Yarn com a Etapa 1 em [Como instalar e usar o Yarn Package Manager para Node.js](https://www.digitalocean.com/community/tutorials/how-to-install-and-use-the-yarn-package-manager-for-node-js) . 22 | 23 |

1.3 👣 Instalando Yarn

24 | 25 | Para instalar o Yarn, você pode seguir as seguintes etapas: 26 | 27 | 1. Verifique se você tem o Node.js instalado em seu sistema, pois o Yarn requer o Node.js para funcionar. Você pode verificar isso digitando `node -v` no terminal. Se você não tiver o Node.js instalado, baixe e instale-o em seu sistema. 28 | 2. Baixe e instale o Yarn em seu sistema operacional. Você pode fazer isso de várias maneiras, dependendo do seu sistema operacional. A seguir, mostramos alguns exemplos: 29 | 30 | - No MacOS, você pode instalar o Yarn usando o Homebrew executando o seguinte comando no terminal: 31 | 32 | ``` 33 | npm install yarn 34 | ``` 35 | 36 | - No Ubuntu ou Debian, você pode instalar o Yarn usando o gerenciador de pacotes apt com o seguinte comando no terminal: 37 | 38 | ``` 39 | sudo apt-get update && sudo apt-get install yarn 40 | ``` 41 | 42 | - No Windows, você pode baixar o instalador do Yarn via npm 43 | 44 | você pode executar o seguinte para comando para **instalar** Yarn: 45 | 46 | ``` 47 | npm install --global yarn 48 | ``` 49 | 50 | Verifique se o Yarn está instalado executando: 51 | 52 | ``` 53 | yarn --version 54 | ``` 55 | 56 | 3. Verifique se o Yarn está instalado em seu sistema digitando `yarn -v` no terminal. Se o Yarn estiver instalado corretamente, ele retornará a versão do Yarn instalada em seu sistema. 57 | 58 | Pronto! Agora você pode usar o Yarn em seu projeto JavaScript. 59 | 60 |
61 | 62 |

Documentação do Yarn

63 | 64 |

Documentação do Yarn - Instalação

65 | 66 |

Documentação do Yarn - Comandos

67 | 68 |
69 | 70 |

1.4 👣 Instalando Vite

71 | 72 | - Para instalar o Vite no seu computador, siga os seguintes passos: 73 | 74 | 1. Abra o terminal (no macOS e Linux) ou o prompt de comando (no Windows). 75 | 2. Digite o seguinte comando para instalar o Vite globalmente usando o gerenciador de pacotes NPM: 76 | 77 | ``` 78 | npm install -g vite 79 | ``` 80 | 81 | 3. Aguarde o término da instalação. Quando finalizar, o Vite estará pronto para ser usado. 82 | 83 |
84 | 85 |

Documentação do Vite

86 | 87 |

Documentação do Vite - Criando o Projeto

88 | 89 |
90 | 91 |
92 | 93 |

Voltar

94 | -------------------------------------------------------------------------------- /05_react/04.md: -------------------------------------------------------------------------------- 1 |

Estilizando componentes React com CSS

2 | 3 | O React é uma biblioteca JavaScript usada para construir interfaces de usuário. Uma das vantagens do React é sua capacidade de modularizar componentes e permitir a reutilização de código. No entanto, para que as interfaces de usuário criadas com React sejam visualmente atraentes e coerentes, é importante aplicar estilos consistentes em todos os componentes. 4 | 5 | O CSS é uma linguagem de estilo usada para definir a aparência de uma página da web. Em conjunto com o React, o CSS pode ser usado para definir estilos para cada componente individualmente ou para vários componentes em conjunto. 6 | 7 | Estilizar componentes com CSS em React pode ajudar a tornar a interface de usuário mais coesa e consistente. Além disso, o CSS permite que as interfaces sejam adaptadas a diferentes tamanhos de tela e dispositivos, tornando-as responsivas. 8 | 9 | Usar o CSS em conjunto com o React também pode ajudar a melhorar a manutenção do código. Por exemplo, se um estilo precisa ser alterado, ele pode ser atualizado em um único arquivo CSS em vez de precisar ser alterado em vários arquivos JavaScript que definem os componentes. 10 | 11 |

1.1 👣 Formas de utilizar css em React.

12 | 13 | Existem diversas formas de utilizar CSS em React. Algumas das mais comuns são: 14 | 15 | 1. CSS tradicional: É possível utilizar as regras CSS tradicionais em um arquivo separado e importá-lo para o componente React. Por exemplo: 16 | 17 | ``` 18 | import React from 'react'; 19 | import './MeuComponente.css'; 20 | 21 | function MeuComponente() { 22 | return ( 23 |

24 | Conteúdo do componente 25 |

26 | ); 27 | } 28 | ``` 29 | 30 | No exemplo acima, a classe CSS `meu-componente` é definida no arquivo `MeuComponente.css`, que é importado para o componente React. 31 | 32 | 1. CSS inline: É possível definir estilos diretamente nos elementos HTML utilizando a propriedade `style`. Por exemplo: 33 | 34 | ``` 35 | codefunction MeuComponente() { 36 | return ( 37 |

38 | Conteúdo do componente 39 |

40 | ); 41 | } 42 | ``` 43 | 44 | No exemplo acima, o estilo é definido diretamente na tag `div` utilizando a propriedade `style`. A propriedade `style` espera um objeto JavaScript com as propriedades CSS que se deseja aplicar. 45 | 46 | 1. Styled components: Os styled components são uma abordagem de estilização que permite escrever CSS dentro dos próprios componentes React, utilizando uma sintaxe semelhante ao CSS tradicional. Por exemplo: 47 | 48 | ``` 49 | import React from 'react'; 50 | import styled from 'styled-components'; 51 | 52 | const MeuComponenteWrapper = styled.div` 53 | background-color: blue; 54 | color: white; 55 | `; 56 | 57 | function MeuComponente() { 58 | return ( 59 | 60 | Conteúdo do componente 61 | 62 | ); 63 | } 64 | ``` 65 | 66 | No exemplo acima, o componente `MeuComponenteWrapper` é criado utilizando a função `styled` do pacote `styled-components`. Dentro da string template do styled component é possível escrever regras CSS como em um arquivo externo. 67 | 68 | No curso utilizaremos css externo com ClassName. 69 | 70 | Em React, `className` é uma propriedade utilizada para definir uma ou mais classes CSS a serem aplicadas a um componente. Essa propriedade é semelhante à propriedade `class` utilizada em HTML, mas em React utiliza-se `className` para evitar conflitos com a palavra-chave `class` da linguagem JavaScript. 71 | 72 | Ao utilizar a propriedade `className` em um componente React, é possível definir uma ou mais classes CSS para o mesmo. Por exemplo, se quisermos definir uma classe `my-class` para um componente `div` em React, podemos fazer o seguinte: 73 | 74 | ``` 75 |

Conteúdo do elemento div

76 | ``` 77 | 78 | Dessa forma, a classe `my-class` será aplicada ao elemento `div`. 79 | 80 |

1.2 👣 Estilizando o componente home.

81 | 82 | Agora vamos estilizar o nosso componente Home. 83 | 84 |

85 | 86 | 1. No arquivo Home.css crie uma classe titulo e coloque um atributo color blue, e alinhe o texto ao centro com o atributo text-align: center. 87 | 88 | 2. No arquivo Home.css crie uma classe img e coloque um atributo width: 500px; height: 500px; display: block; margin: 0 auto; 89 | 90 | 3. utilize o codigo do codigo do github abaixo. 91 | 92 |

Código fonte do componente Home.css 93 | 94 | 5. No arquivo Home.tsx indique className titulo no titulo h1 com a descrição Home. 95 | 96 | 5. Crie uma tag de img como descrito no codigo do codigo do github abaixo. 97 | 98 |

Código fonte do Componente Home.tsx 99 | 100 | 8. Salve o projeto e execute o projeto novamente com o comando: 101 | 102 | ``` 103 | yarn run dev 104 | ``` 105 | 106 | Em seguida, abra seu navegador e visite `http://localhost:5173/`. 107 | 108 |

109 | 110 | E pronto seu projeto possui um componente de home. 111 | 112 |

Código fonte do Projeto

113 | 114 | 115 | 116 | 117 |

118 | 119 |

Voltar

120 | 121 | -------------------------------------------------------------------------------- /05_react/07.md: -------------------------------------------------------------------------------- 1 |

React: Estilização com Flexbox, Grid e Tailwind

2 | 3 | React é uma biblioteca JavaScript utilizada para construir interfaces de usuário (UI). O Grid e Flexbox são duas técnicas de layout do CSS que são frequentemente utilizadas em conjunto com React para criar interfaces responsivas e dinâmicas. 4 | 5 | Ao utilizar o Grid e o Flexbox em conjunto com React, é possível criar interfaces de usuário mais flexíveis e responsivas, que se adaptam a diferentes tamanhos de tela e dispositivos. Além disso, essas técnicas de layout também tornam mais fácil para os desenvolvedores criar layouts complexos de maneira mais eficiente, reduzindo a quantidade de código necessário para implementar esses layouts. 6 | 7 |

1.1 👣 Flex box em Tailwind CSS com React

8 | 9 | A classe `flex` em Tailwind CSS é utilizada para tornar um elemento HTML um contêiner flexível. Isso significa que os filhos desse contêiner poderão ser organizados em uma única linha ou em uma única coluna, dependendo da direção definida pelo desenvolvedor. 10 | 11 | Por padrão, a direção do contêiner flexível é definida como "row", o que significa que os filhos são organizados em uma única linha. No entanto, é possível alterar a direção para "column", fazendo com que os filhos sejam organizados em uma única coluna. 12 | 13 | A classe `flex` é muito útil para criar layouts responsivos e dinâmicos, pois permite que os filhos sejam organizados de maneira flexível, adaptando-se a diferentes tamanhos de tela e dispositivos. Além disso, o Tailwind CSS oferece diversas outras classes que podem ser combinadas com a classe `flex` para definir o alinhamento, o tamanho e a ordem dos filhos. 14 | 15 | Algumas classes relacionadas ao `flex` em Tailwind CSS incluem: 16 | 17 | - `flex-row` e `flex-col`: utilizadas para definir a direção do contêiner flexível como "row" ou "column". 18 | 19 | - `justify-start`, `justify-end`, `justify-center`, `justify-between` e `justify-around`: utilizadas para definir o alinhamento horizontal dos filhos dentro do contêiner flexível. 20 | 21 | - `items-start`, `items-end`, `items-center`, `items-baseline` e `items-stretch`: utilizadas para definir o alinhamento vertical dos filhos dentro do contêiner flexível. 22 | 23 | - `flex-wrap`, `flex-nowrap` e `flex-wrap-reverse`: utilizadas para definir o comportamento de quebra de linha dos filhos dentro do contêiner flexível. 24 | 25 | - `order-1`, `order-2`, `order-3`, etc.: utilizadas para definir a ordem dos filhos dentro do contêiner flexível. 26 | 27 | Veja alguns exemplos pela documentaçao Tailwind CSS: 28 | 29 |
30 | 31 |

Documentação do Tailwind: justify-content

32 | 33 |

Documentação do Tailwind: align-itens

34 | 35 |
36 | 37 | 38 |

1.2 👣 Codificando Flex-Box no Tailwind CSS em React

39 | 40 | Configurando Flex box Tailwind CSS em um projeto React App. 41 | 42 | 1. Construa o exemplo de codigo do componente Home.tsx 43 | 44 |

Código fonte do componente Home.tsx 45 | 46 | 2. Construa o exemplo de codigo do componente App.tsx 47 | 48 |

Código fonte do componente App.tsx 49 | 50 | 3. Execute seu processo de compilação com `npm run start`. 51 | 52 | ``` 53 | yarn run dev 54 | ``` 55 | 56 | 57 | Em seguida, abra seu navegador e visite `http://localhost:5173/`. 58 | 59 |

60 | 61 |
62 | 63 |

64 | 65 | E pronto seu projeto possui um componente de home. 66 | 67 |

Código fonte do projeto

68 | 69 |
70 | 71 | 72 |

1.3 👣 Grid em Tailwind CSS com React

73 | 74 | - Tailwind CSS é uma biblioteca de classes utilitárias que permite estilizar rapidamente elementos de interface do usuário. Uma das características do Tailwind CSS é sua abordagem baseada em grid, que permite criar layouts complexos de maneira eficiente. 75 | 76 | O grid do Tailwind é baseado em um sistema de grade responsivo de 12 colunas, que é facilmente personalizável para se adaptar às necessidades do projeto. Ele permite definir o tamanho das colunas, o espaçamento entre as colunas, o alinhamento de conteúdo e outras propriedades relacionadas ao layout. 77 | 78 | Por outro lado, o "Grid no Tailwind CSS" pode se referir ao uso específico de classes de grid no Tailwind CSS, que permitem definir as propriedades de layout do grid diretamente no HTML. Por exemplo, você pode usar as classes "grid-cols-2" e "gap-4" para definir um grid de duas colunas com um espaçamento de 4 pixels entre as colunas. 79 | 80 | No geral, a abordagem de grid no Tailwind CSS é projetada para tornar a criação de layouts mais fácil e eficiente, permitindo que você defina o layout de uma página com menos código e em menos tempo do que seria necessário com outras abordagens de layout. 81 | 82 | **O uso de grid no Tailwind CSS tem várias vantagens ao ser usado com o React, algumas delas incluem:** 83 | 84 | 1. Facilidade de uso: O Tailwind CSS oferece uma sintaxe simples e intuitiva para definir layouts de grade. Combinado com o React, isso torna a criação de layouts mais fácil e eficiente, permitindo que você defina o layout de uma página com menos código e em menos tempo. 85 | 86 | 2. Responsividade: O Tailwind CSS permite que você crie layouts responsivos, que se adaptam automaticamente a diferentes tamanhos de tela. Com o React, isso significa que você pode criar layouts que funcionam bem em todos os dispositivos, sem precisar escrever código separado para cada tamanho de tela. 87 | 88 | 3. Flexibilidade: O Tailwind CSS oferece muitas opções para personalizar o layout de uma grade, como o número de colunas, o espaçamento entre as colunas e o alinhamento de conteúdo. Isso significa que você pode criar layouts que atendam às necessidades específicas do seu projeto. 89 | 90 | 4. Consistência: Ao usar uma biblioteca de classes utilitárias como o Tailwind CSS, você pode manter a consistência no estilo e na estrutura dos seus layouts em todo o seu projeto. Isso pode economizar tempo e reduzir erros, pois você não precisa recriar o mesmo código repetidamente. 91 | 92 | 5. Performance: O Tailwind CSS é projetado para ser leve e rápido, o que significa que os layouts que você cria serão rápidos e responsivos. Isso pode melhorar a experiência do usuário e também pode ajudar a melhorar o desempenho do seu site ou aplicativo. 93 | 94 | 95 | Veja alguns exemplos pela documentaçao Tailwind CSS: 96 | 97 |
98 | 99 |

Documentação do Tailwind: grid-template-columns

100 | 101 |

Documentação do Tailwind: grid-column

102 | 103 |
104 | 105 | 106 |

1.4 👣 Codificando Grid no Tailwind CSS em React

107 | 108 | Configurando Grid Tailwind CSS em um projeto React App. 109 | 110 | 1. Construa o exemplo de codigo do componente Home.tsx 111 | 112 |

Código fonte do componente Home.tsx 113 | 114 | 2. Construa o exemplo de codigo do componente App.tsx 115 | 116 |

Código fonte do componente App.tsx 117 | 118 | 3. Execute seu processo de compilação com `npm run start`. 119 | 120 | ``` 121 | yarn run dev 122 | ``` 123 | 124 | 125 | Em seguida, abra seu navegador e visite `http://localhost:5173/`. 126 | 127 |

128 | 129 | E pronto seu projeto possui um componente de home. 130 | 131 |

Código fonte do projeto 132 | 133 |

134 | 135 |

Voltar

136 | 137 | 138 | 139 | -------------------------------------------------------------------------------- /05_react/09.md: -------------------------------------------------------------------------------- 1 | 2 | 3 |

Projeto Blog Pessoal: Componentes NavBar, Footer e Home

4 | 5 | O Navbar, o Footer e a Home são elementos importantes em uma aplicação web porque cada um desempenha uma função específica e ajuda a melhorar a usabilidade e a experiência do usuário. 6 | 7 | O Navbar é uma barra de navegação que geralmente fica no topo da página e permite que o usuário navegue pelos diferentes recursos e páginas da aplicação de forma fácil e intuitiva. Ele geralmente inclui links para as principais seções do site, bem como opções de pesquisa e login. O Navbar ajuda a melhorar a usabilidade, permitindo que os usuários naveguem rapidamente para as áreas da aplicação que desejam acessar. 8 | 9 | O Footer é a seção da parte inferior da página e geralmente contém informações importantes, como informações de contato, links para as políticas de privacidade e termos de serviço, créditos e outras informações relevantes. Ele também pode incluir links para recursos adicionais que os usuários possam achar úteis, como um blog ou uma seção de perguntas frequentes. O Footer ajuda a fornecer informações importantes ao usuário e a melhorar a credibilidade e transparência da aplicação. 10 | 11 | A Home é a página principal da aplicação e geralmente é a primeira página que os usuários veem. Ela deve ser projetada para fornecer uma visão geral clara dos recursos e funcionalidades da aplicação, além de apresentar as informações mais relevantes aos usuários. Uma boa Home deve ser fácil de navegar e ajudar os usuários a encontrar rapidamente o que estão procurando. 12 | 13 |

1.1 👣 Construindo o Footer

14 | 15 | Priemiro vamos construir o nosso para isso precisamos instalar a biblioteca phosphor-icons 16 | 17 | 1. digite em seu terminal: 18 | 19 | ``` 20 | npm install @phosphor-icons/react 21 | ``` 22 | 23 | 2. Construa uma pasta chamada components dentro da pasta src de seu projeto. 24 | 25 | 3. Contrua uma pasta chamada footer dentro pasta components de seu projeto. 26 | 27 | 4. Construa um componente chamado Footer dentro da pasta fotter de seu projeto. 28 | 29 | 5. Construa o código abaixo 30 | 31 |

Código fonte do componente Footer.tsx 32 | 33 |

1.2 👣 Construindo o NavBar

34 | 35 | 1. Contrua uma pasta chamada navBar dentro pasta components de seu projeto. 36 | 37 | 2. Construa um componente chamado NavBar dentro da pasta navBar de seu projeto. 38 | 39 | 3. Construa o código abaixo 40 | 41 |

Código fonte do componente NavBar.tsx 42 | 43 |

1.2 👣 Editando o Home

44 | 45 | 1. Edite o componente de Home.tsx dentro da pasta paginas como o codigo abaixo código abaixo 46 | 47 |

Código fonte do componente Home.tsx 48 | 49 |

1.2 👣 Editando o App.tsx

50 | 51 | 1. Edite o componente de App.tsx dentro da pasta paginas como o codigo abaixo código abaixo 52 | 53 |

Código fonte do componente App.tsx 54 | 55 | 1. Execute seu processo de compilação com `npm run start`. 56 | 57 | ``` 58 | yarn run dev 59 | ``` 60 | 61 | 62 | Em seguida, abra seu navegador e visite `http://localhost:5173/`. 63 | 64 |

65 | 66 |

Código fonte do projeto

67 | 68 |
69 | 70 |
71 | 72 | 73 |

Voltar

74 | -------------------------------------------------------------------------------- /05_react/10.md: -------------------------------------------------------------------------------- 1 |

Projeto Blog Pessoal: Criando as Rotas

2 | 3 |

1.1 👣 Bibliotecas de roteamento em desenvolvimento front-end

4 | 5 | Bibliotecas de roteamento em desenvolvimento front-end são conjuntos de ferramentas e funções que permitem que um aplicativo de front-end gerencie as rotas do navegador de forma eficiente e confiável. Essas bibliotecas geralmente são usadas em aplicativos de página única (SPA), que usam JavaScript para renderizar o conteúdo no navegador. 6 | 7 |

1.2 👣 Instalando o React router dom

8 | 9 | Priemiro vamos construir o nosso para isso precisamos instalar a bibliotecareact 10 | 11 | 1. digite em seu terminal: 12 | 13 | ``` 14 | npm i react-router-dom 15 | ``` 16 | 17 | 2.

1.3 👣 Construindo o Login

18 | 19 | 1. Contrua uma pasta chama login dentro pasta paginas de seu projeto. 20 | 21 | 2. Construa um componente chamado Login dentro da pasta navBar de seu projeto. 22 | 23 | 3. Construa o código abaixo 24 | 25 |

Código fonte do componente Login.tsx 26 | 27 |

1.4 👣 Editando o App.tsx

28 | 29 | 1. Edite o componente de App.tsx como o codigo abaixo código abaixo 30 | 31 |

Código fonte do componente App.tsx 32 | 33 | O código acima é um exemplo de como usar o React Router DOM para criar rotas em um aplicativo React. A função `App()` é o componente principal do aplicativo e retorna o conteúdo que será renderizado na página. 34 | 35 | 1. `` - O componente `BrowserRouter` é importado da biblioteca React Router DOM e é usado para envolver todo o conteúdo que precisa de roteamento. 36 | 2. `` - O componente `Routes` é importado da biblioteca React Router DOM e é usado para definir as rotas do aplicativo. 37 | 3. `} />` - Uma rota que é definida usando o componente `Route`. O caminho da rota é definido como `'/'` (que representa a página inicial do aplicativo) e o elemento a ser renderizado é definido como `` (o componente que representa a página inicial). 38 | 4. `} />` - Uma rota que é definida usando o componente `Route`. O caminho da rota é definido como `'/login'` e o elemento a ser renderizado é definido como `` (o componente que representa a página de login). 39 | 5. `} />` - Uma rota que é definida usando o componente `Route`. O caminho da rota é definido como `'/home'` e o elemento a ser renderizado é definido como `` (o componente que representa a página inicial). 40 | 41 |

1.5 👣 Editando o NavBar.tsx

42 | 43 | 1. Edite o componente de NavBar.tsx como o codigo abaixo código abaixo. 44 | 45 |

Código fonte do componente App.tsx 46 | 47 | O elemento `Link` é um componente do React Router DOM que permite criar links clicáveis que levam a outras rotas dentro do seu aplicativo React. Em outras palavras, o `Link` é usado para criar links de navegação dentro do aplicativo sem precisar recarregar a página inteira. 48 | 49 | Quando o usuário clica em um link criado com o elemento `Link`, o React Router DOM atualiza a URL do navegador e renderiza o componente associado à nova rota. Isso significa que o `Link` é usado para criar uma experiência de navegação mais rápida e fluida para os usuários do seu aplicativo. 50 | 51 | O atributo `to` do elemento `Link` define a rota para a qual o link deve apontar. Nesse caso, o valor `'login' ou 'home'` indica que o link deve apontar para a rota `'/login'`. O `'/login'` é a URL que será adicionada ao histórico de navegação do navegador quando o link for clicado. 52 | 53 | 1. Execute seu processo de compilação com `npm run start`. 54 | 55 | ``` 56 | yarn run dev 57 | ``` 58 | 59 | Em seguida, abra seu navegador e visite `http://localhost:5173/`. 60 | 61 |

62 | 63 |
64 | 65 |

66 | 67 |

Código fonte do projeto

68 | 69 |
70 | 71 |
72 | 73 | 74 |

Voltar

75 | -------------------------------------------------------------------------------- /05_react/11.md: -------------------------------------------------------------------------------- 1 | 2 | 3 |

Axios: Biblioteca de comunicação HTTP

4 | 5 | Bibliotecas de comunicação HTTP em React são bibliotecas que permitem que a aplicação React faça requisições HTTP para uma API e receba respostas. Essas bibliotecas são responsáveis por lidar com a comunicação entre o frontend e o backend da aplicação, permitindo que o usuário veja e interaja com os dados que são armazenados no servidor. 6 | 7 | As bibliotecas de comunicação HTTP mais comuns em React são o `Axios`, `Fetch` e `jQuery`. Cada uma dessas bibliotecas tem suas próprias vantagens e desvantagens e, em geral, são utilizadas para realizar operações de CRUD (Create, Read, Update, Delete) em um backend. 8 | 9 | Essas bibliotecas normalmente utilizam o conceito de `Promises` ou `Callbacks` para realizar as requisições HTTP de forma assíncrona e lidar com a resposta. Isso significa que a requisição é feita em segundo plano, enquanto a aplicação continua a funcionar normalmente, e quando a resposta é recebida, a biblioteca chama uma função de retorno para lidar com os dados. 10 | 11 | No React, essas bibliotecas podem ser utilizadas em conjunto com os `hooks`, como o `useState` e o `useEffect`, para armazenar e exibir os dados recebidos da API. Por exemplo, é possível fazer uma requisição para uma API no momento em que um componente é montado usando o `useEffect` e, em seguida, armazenar os dados recebidos no estado da aplicação com o `useState`, para que possam ser exibidos na tela. 12 | 13 | ao utilizar bibliotecas de comunicação HTTP em React, é possível: 14 | 15 | - Realizar operações de CRUD (Create, Read, Update, Delete) em um backend; 16 | - Enviar e receber dados de forma assíncrona, sem precisar recarregar a página; 17 | - Exibir dados dinamicamente na aplicação, sem precisar recarregar a página; 18 | - Manter a aplicação responsiva e fluida, mesmo enquanto espera pela resposta da API; 19 | - Lidar com erros de forma eficiente, exibindo mensagens de erro na interface do usuário. 20 | 21 |

1.1 👣 Axios em React

22 | 23 | `Axios` é uma biblioteca JavaScript utilizada para realizar requisições HTTP, tanto para recuperar dados quanto para enviar dados para uma API. É comumente utilizada em aplicações React para realizar operações de CRUD (Create, Read, Update, Delete) em um backend. 24 | 25 | A vantagem do `Axios` é que ele é fácil de usar e fornece uma série de recursos úteis para lidar com requisições HTTP, como o suporte a Promises, intercepção de requisições e respostas, cancelamento de requisições, entre outros. 26 | 27 | Alguns dos principais recursos do `Axios` são: 28 | 29 | - Suporte a Promises: o `Axios` retorna uma Promise, o que facilita o tratamento da resposta da requisição; 30 | - Intercepção de requisições e respostas: o `Axios` permite que as requisições e respostas sejam interceptadas para serem modificadas ou tratadas de forma específica antes de serem enviadas ou exibidas na aplicação; 31 | - Suporte a cancelamento de requisições: o `Axios` permite que as requisições sejam canceladas, caso necessário, o que pode melhorar a performance da aplicação; 32 | - Suporte a configurações globais: o `Axios` permite que configurações globais sejam definidas para todas as requisições feitas pela aplicação, como headers, por exemplo. 33 | 34 |

1.1 👣 Instalando Axios em react

35 | 36 | Primeiro vamos construir o nosso para isso precisamos instalar a bibliotecareact 37 | 38 | 1. digite em seu terminal: 39 | 40 | ```bash 41 | npm i axios@^1.3.4 42 | ``` 43 | 44 |
45 | 46 |

1.2 👣 Service em React

47 | 48 | Em React, um "service" é um módulo ou uma classe que encapsula uma funcionalidade específica da aplicação, como o acesso a uma API, a manipulação de dados, a autenticação de usuários, entre outros. Esses serviços geralmente contêm métodos que realizam operações assíncronas, como a realização de requisições HTTP, e retornam Promises com os resultados dessas operações. 49 | 50 | Um dos principais objetivos de utilizar serviços em React é separar as responsabilidades da aplicação, tornando o código mais organizado e fácil de manter. Além disso, o uso de serviços também permite reutilizar a lógica de negócio em diferentes partes da aplicação, sem precisar duplicar código. 51 | 52 | O serviço com Axios em React é uma forma de fazer requisições HTTP de forma assíncrona em aplicações web. Essas requisições são importantes para obter dados de APIs externas, enviar dados para o servidor, ou até mesmo para realizar atualizações em tempo real na interface do usuário. 53 | 54 | O Axios é uma biblioteca muito popular e fácil de usar que permite fazer requisições HTTP de forma simples e eficiente. Ele é muito utilizado em projetos React devido à sua simplicidade e recursos avançados, como a capacidade de cancelar requisições, configurações de tempo limite e interceptadores de requisição e resposta. 55 | 56 | Ao utilizar o serviço com Axios em React, você pode separar a lógica de acesso à API em um módulo separado, tornando seu código mais organizado e fácil de manter. Além disso, você pode usar o Axios para lidar com erros e exceções, bem como para realizar autenticação de usuários. 57 | 58 |

1.2 👣Exemplo de service com axios em React

59 | 60 | Esse é um exemplo de como utilizar a biblioteca Axios para realizar uma requisição GET a uma API. 61 | 62 | ```javascript 63 | import axios from 'axios'; 64 | 65 | axios.get('/user?ID=12345') 66 | .then(function (response) { 67 | console.log(response); 68 | }) 69 | .catch(function (error) { 70 | console.log(error); 71 | }); 72 | ``` 73 | 74 | Primeiro, é feito o import da biblioteca Axios através da sintaxe `import axios from 'axios'`. Em seguida, é utilizada a função `axios.get()` para fazer uma requisição do tipo GET para a URL `/user` passando como parâmetro um objeto que contém o ID `12345`. 75 | 76 | Ao utilizar a função `.then()` na resposta da requisição, estamos definindo uma função que será executada caso a requisição seja bem-sucedida, ou seja, quando a API retornar uma resposta. Nesse caso, estamos imprimindo no console a resposta da API utilizando a função `console.log(response)`. 77 | 78 | Caso ocorra algum erro na requisição, podemos utilizar a função `.catch()`. 79 | 80 |
81 | 82 |

1.3 👣 Trabalhando com axios em React com TypeScript

83 | 84 | 1. Instale o Axios em seu projeto React usando o gerenciador de pacotes npm. Para fazer isso, execute o seguinte comando no terminal: 85 | 86 | ```bash 87 | npm install axios 88 | ``` 89 | 90 | 2. no componente app.tsx 91 | 92 | 3. importe no componente a biblioteca useState e useEffect como no exemplo 93 | 94 | 4. importe a biblioteca do axios 95 | 96 | 5. construa uma interface User contendo os atributos de id do tipo number e name do tipo string 97 | 98 | 6. construa um useState de users do tipo array da interface User inicializado como vazio 99 | 100 | 7. construa um useEffect de array vazio 101 | 102 | 8. chame o objeto axios e chame o metodo get 103 | 104 | 9. no parametro do método get indique o endereço da api do placeholder no recurso user 105 | 106 | 10. abra um sistema de excessão do tipo then e catch 107 | 108 | 11. no metodo then trabalhe com arrow fuction onde utilizaremos a resposta da requisição, objeto response atributo data para setar o nosso useState de users 109 | 110 | 12. no metodo catch capture o erro dentro de um console.log 111 | 112 | 13. crie uma lista não ordenada no componente app.tx 113 | 114 | 14. nessa lista intere atravez de um laço de repetição do tipo map as informaçoes de id e name do nosso useState users 115 | 116 | 15. salve o projeto e execute em seu navegador 117 | 118 |

119 | 120 |
121 | 122 |

Código fonte do componente App.tsx

123 | 124 |
125 | 126 |

Axios

127 | 128 |

Axios - Documentação

129 | 130 |
131 | 132 |
133 | 134 |

Voltar

135 | -------------------------------------------------------------------------------- /05_react/13.md: -------------------------------------------------------------------------------- 1 | 2 | 3 |

Arquitetura de um projeto React

4 | 5 | A arquitetura de pasta em um projeto React é muito importante porque ajuda a organizar o código de uma forma lógica e fácil de entender, o que é essencial para manter o projeto escalável, fácil de manter e colaborativo. 6 | 7 | Uma boa arquitetura de pasta pode ajudar a separar as responsabilidades de cada componente e módulo do projeto, e também facilitar a navegação e a localização de arquivos. Além disso, uma estrutura bem definida pode facilitar a reutilização de componentes em diferentes partes do projeto, bem como em outros projetos. 8 | 9 | Uma arquitetura de pasta bem definida para um projeto React geralmente envolve a organização de arquivos por tipo (componentes, estilos, imagens, etc.) ou por recurso (páginas, rotas, autenticação, etc.). A escolha do tipo de organização dependerá do tamanho e da complexidade do projeto, mas o importante é manter uma estrutura clara e consistente em todo o código. 10 | 11 |

1.1 👣 Arquitetura de pastas em React

12 | 13 |

14 | 15 | Existem várias maneiras de organizar um projeto React, mas geralmente as pastas mais comuns são `pages`, `components`, `services` ,`contexts` e `assets`. Abaixo, vou explicar brevemente a função de cada uma delas: 16 | 17 | - **`pages`:** A pasta `pages` geralmente contém os componentes que correspondem às páginas ou rotas da aplicação. Cada página é geralmente composta por vários componentes, como formulários, botões, gráficos, tabelas, etc. Esses componentes são agrupados em uma pasta específica dentro de `pages` e são responsáveis por renderizar a página correta com base na URL ou rota. 18 | - **`components`:** A pasta `components` contém os componentes reutilizáveis da aplicação. Esses componentes podem ser usados em várias páginas ou em outros componentes para ajudar a evitar a duplicação de código. Os componentes em `components` são geralmente compostos por um conjunto de subcomponentes menores que podem ser reutilizados em outros lugares. 19 | - **`services`:** A pasta `services` geralmente contém os arquivos de serviço da aplicação, que lidam com a comunicação com um servidor externo ou API. Esses arquivos geralmente são responsáveis por enviar e receber dados do servidor, realizar autenticação, tratar erros e outros processos relacionados à comunicação com o servidor. 20 | - **`contexts`:** A pasta `contexts` contém os contextos da aplicação. Os contextos são uma forma de compartilhar dados entre componentes sem precisar passá-los manualmente de um componente para outro. Eles são úteis para compartilhar dados como autenticação, configurações, temas, etc. em toda a aplicação. 21 | - **`assets`:** A pasta `assets` geralmente contém todos os recursos estáticos da aplicação, como imagens, ícones, arquivos de fonte e folhas de estilo. Esses recursos são agrupados em uma pasta específica para facilitar o gerenciamento e a importação nos componentes da aplicação. 22 | - **`models`:** A pasta `models` pode conter modelos ou esquemas de dados que definem como os dados são organizados e estruturados na aplicação. Eles podem ser usados para validar e normalizar os dados antes de serem armazenados ou exibidos. 23 | 24 | 25 |

Voltar

26 | 27 | -------------------------------------------------------------------------------- /05_react/14.md: -------------------------------------------------------------------------------- 1 | 2 | 3 |

Projeto Blog Pessoal: Construindo Model, Context e Service do Cadastro de Usuários

4 | 5 | A página de cadastro de usuário é uma página web que permite que novos usuários se registrem em um aplicativo web. Geralmente, a página de cadastro de usuário contém um formulário com campos para informações básicas do usuário, como nome completo, endereço de e-mail e senha. Além disso, pode conter campos para outras informações, dependendo do tipo de aplicativo e do que é necessário para o registro. 6 | 7 | O processo de registro normalmente começa com o usuário clicando em um botão de registro na página inicial do aplicativo. Em seguida, o usuário é direcionado para a página de cadastro de usuário, onde pode inserir suas informações. O formulário de registro pode conter campos obrigatórios e opcionais, dependendo do que é necessário para o aplicativo. Também pode incluir validações de entrada para garantir que as informações inseridas pelo usuário estejam em um formato correto. 8 | 9 | Após preencher o formulário, o usuário geralmente clica em um botão de envio para enviar suas informações para o servidor do aplicativo. O servidor, por sua vez, pode verificar as informações do usuário, incluindo se o endereço de e-mail é válido e se a senha é forte o suficiente. Se tudo estiver correto, o servidor pode criar uma conta para o usuário e direcioná-lo para a página de login para acessar o aplicativo. 10 | 11 | A página de cadastro de usuário é uma parte importante de um aplicativo web, pois é o primeiro contato do usuário com o aplicativo. Uma página de registro bem projetada pode ajudar a garantir que os usuários se inscrevam com sucesso e possam começar a usar o aplicativo rapidamente. Além disso, uma página de registro segura e bem projetada pode ajudar a proteger as informações pessoais dos usuários e evitar fraudes ou abusos. 12 | 13 | A página de cadastro de usuário é uma parte crítica de qualquer aplicativo web, pois é o ponto de entrada para novos usuários que desejam utilizar o serviço ou produto oferecido pelo aplicativo. 14 | 15 | Existem várias razões pelas quais a página de cadastro de usuário é importante: 16 | 17 | 1. Registro de novos usuários: A página de cadastro de usuário permite que novos usuários se registrem no aplicativo, fornecendo informações básicas, como nome, endereço de e-mail e senha. Essas informações são necessárias para que o usuário possa acessar o aplicativo e utilizar seus recursos. 18 | 2. Coleta de informações importantes: Além das informações básicas, a página de cadastro de usuário também pode coletar outras informações importantes, como preferências de usuário, dados de contato, informações de pagamento e outras informações relevantes para o aplicativo. Essas informações podem ser usadas para personalizar a experiência do usuário e melhorar os recursos oferecidos pelo aplicativo. 19 | 3. Segurança: A página de cadastro de usuário é também um ponto importante para garantir a segurança do aplicativo. Através do cadastro, é possível verificar a identidade do usuário e assegurar que ele não está criando contas múltiplas ou tentando se passar por outra pessoa. 20 | 4. Comunicação: A página de cadastro de usuário também pode ser usada para coletar informações de contato do usuário, como endereço de e-mail ou número de telefone, o que permite ao aplicativo enviar notificações, atualizações e outras informações importantes para o usuário. 21 | 22 | Construiremos uma pagina de cadastro utilizando as estruturas de models,contexts,service. 23 | 24 |

1.1 👣 Construindo as Models

25 | 26 | A pasta "model" geralmente é usada para armazenar os modelos de dados ou classes que representam a estrutura de dados de uma aplicação em React. Esses modelos geralmente são usados para armazenar dados que são compartilhados em vários componentes e que precisam ser mantidos em sincronia. Por exemplo, se sua aplicação precisa armazenar informações de usuário em vários lugares, você pode criar um modelo de usuário e armazenar os dados do usuário nele, em vez de mantê-los em vários componentes separados. 27 | 28 | Agora vamos construir a nossas models. 29 | 30 | 1. Construa uma pasta chamada models dentro da pasta src de seu projeto. 31 | 32 | 2. construa os seguintes arquivos: Usuario.ts, UsuarioLogin.ts, Postagem.ts, Tema.ts . 33 | 34 | 3. no arquivo de Tema coloque o código abaixo. 35 | 36 |

Código fonte da model Tema.ts 37 | 38 | 4. no arquivo de Postagem coloque o código abaixo. 39 | 40 |

Código fonte da model Postagem.ts 41 | 42 | 5. no arquivo de Usuario coloque o código abaixo. 43 | 44 |

Código fonte da model Usuario.ts 45 | 46 | 6. no arquivo de UsuarioLogin coloque o código abaixo. 47 | 48 |

Código fonte da model UsuarioLogin.ts 49 | 50 |

1.2 👣 Construindo o context

51 | 52 | A pasta "contexts" é usada para armazenar os contextos em uma aplicação React. O contexto é uma maneira de compartilhar dados entre componentes sem precisar passá-los manualmente por meio de props. Os contextos permitem que um componente consuma dados de um contexto pai ou de um provedor de contexto. Quando os dados mudam no provedor de contexto, todos os componentes que consomem esse contexto serão atualizados automaticamente. 53 | 54 | Utilizaremos context para passar os dados de Token e informações do usuario logado. 55 | 56 | Agora vamos construir a nosso contexts para guardar o nosso dado de forma global. 57 | 58 | 1. Construa uma pasta chamada contexts dentro da pasta src de seu projeto. 59 | 60 | 2. construa os seguinte arquivo: AuthContext.tsx 61 | 62 | 3. no arquivo de AuthContext.tsx coloque o código abaixo. 63 | 64 |

Código fonte da contest AuthContext.tsx 65 | 66 |

1.3 👣 Construindo service

67 | 68 | A pasta "service" geralmente é usada para armazenar funções que se comunicam com uma API ou outras fontes de dados externas. Essas funções geralmente são usadas para obter ou atualizar dados da API e, em seguida, atualizar o estado dos componentes em conformidade. Essa pasta pode ser usada para separar a lógica de negócios da lógica de interface do usuário e tornar o código mais modular e fácil de manter. 69 | 70 | Agora vamos construir a nosso service. 71 | 72 | 1. Construa uma pasta chamada services dentro da pasta src de seu projeto. 73 | 74 | 2. construa os seguintes arquivo: Service.ts 75 | 76 | 3. no arquivo de Service.ts coloque o código abaixo. 77 | 78 |

Código fonte da service Service.tsx 79 | 80 | Este é um exemplo de código que utiliza a biblioteca axios para fazer uma requisição POST para um servidor em uma determinada URL. 81 | 82 | Primeiro, o código importa a biblioteca axios. Em seguida, a constante api é criada usando o método create da biblioteca axios, passando a baseURL como parâmetro. 83 | 84 | A função cadastrarUsuario é definida, que é uma função assíncrona que recebe três parâmetros: uma string contendo a URL para a requisição POST, um objeto contendo os dados que serão enviados na requisição e uma função setDados que será utilizada para atualizar os dados após a requisição ser concluída. 85 | 86 | Dentro da função, a constante resposta é definida usando o método post da constante api, que é uma instância do axios criada anteriormente. Este método POST envia os dados fornecidos como segundo parâmetro para a URL fornecida como primeiro parâmetro. 87 | 88 | O resultado da requisição é armazenado na constante resposta, que contém o objeto de resposta da requisição. Em seguida, a função setDados é chamada com o resultado da requisição, ou seja, a resposta.data. 89 | 90 | 91 | 92 |

Voltar

93 | -------------------------------------------------------------------------------- /05_react/15.md: -------------------------------------------------------------------------------- 1 | 2 | 3 |

Projeto Blog Pessoal: Cadastro do Usuario - Template/Lógica/Teste

4 | 5 | Comunicar uma página de cadastro de usuários em React com uma API é extremamente importante, pois permite que sua aplicação React envie e receba dados de um servidor backend e, assim, possa armazenar e recuperar informações dos usuários. 6 | 7 | Sem uma API, sua aplicação React seria incapaz de enviar dados de formulário de cadastro de usuários, como nome, endereço de e-mail e senha, para um servidor para serem armazenados. Além disso, a API também pode ser responsável por realizar algumas validações nos dados enviados, como verificar se o endereço de e-mail é válido e se a senha é segura o suficiente. 8 | 9 | Com a comunicação entre a página de cadastro de usuários e a API, sua aplicação React pode interagir com um banco de dados, armazenando informações do usuário em um servidor e recuperando essas informações posteriormente, por exemplo, para fazer login no site. Além disso, essa comunicação permite que sua aplicação React seja escalável e possa lidar com várias solicitações simultâneas, uma vez que a API é responsável por lidar com todas as solicitações dos usuários. 10 | 11 |

1.1 👣 Construindo o componente de cadastro de usuario

12 | 13 | Agora vamos construir a nosso componente de cadastro de usuario. 14 | 15 | 1. Construa uma pasta chamada cadastro dentro da pasta pages de seu projeto. 16 | 17 | 2. construa os seguinte arquivo: Cadastro.css 18 | 19 | 3. no arquivo de Cadastro.css coloque o código abaixo. 20 | 21 |

Código fonte do componente Cadastro.css 22 | 23 | 4. construa os seguinte arquivo: Cadastro.tsx 24 | 25 | 5. no arquivo de Cadastro.tsx coloque o código abaixo. 26 | 27 |

Código fonte do componente Cadastro.tsx 28 | 29 | 6. no arquivo de NavBar.tsx coloque o código abaixo. 30 | 31 |

Código fonte do componente NavBar.tsx 32 | 33 | 7. no arquivo de App.tsx coloque o código abaixo. 34 | 35 |

Código fonte do componente App.tsx 36 | 37 | 8. Execute seu processo de compilação com `npm run start`. 38 | 39 | ``` 40 | yarn run dev 41 | ``` 42 | 43 | 44 | Em seguida, abra seu navegador e visite `http://localhost:5173/`. 45 | 46 |

47 | 48 |

Código fonte do projeto 49 | 50 |

1.2 👣 Construindo a logica da pagina cadastro de usuario e comunicando com api

51 | 52 | Agora vamos construir a nosso componente de cadastro de usuario. 53 | 54 | 1. Edite o seguinte arquivo: Cadastro.tsx 55 | 56 | 2. no arquivo de Cadastro.tsx coloque o código abaixo. 57 | 58 |

Código fonte do componente Cadastro.tsx 59 | 60 | 3. Execute seu processo de compilação com `npm run start`. 61 | 62 | ``` 63 | yarn run dev 64 | ``` 65 | 66 | Em seguida, abra seu navegador e visite `http://localhost:5173/`. 67 | 68 | Cadastre um novo usuario na tela de cadastro. 69 | 70 |

71 | 72 |

73 | 74 |

Código fonte do projeto 75 |
76 | 77 |
78 | 79 | 80 |

Voltar

81 | 82 | -------------------------------------------------------------------------------- /05_react/16.md: -------------------------------------------------------------------------------- 1 | 2 | 3 |

Projeto Blog Pessoal: Construindo o template do Componente Login

4 | 5 | A página de login é uma parte importante das aplicações web, pois é a porta de entrada para os usuários acessarem seus recursos e dados pessoais dentro do sistema. Essa página geralmente é a primeira interação que os usuários têm com a aplicação, portanto, deve ser fácil de entender e usar. 6 | 7 | Além de permitir o acesso dos usuários, a página de login também ajuda a garantir a segurança da aplicação, pois é o meio pelo qual as credenciais do usuário são verificadas antes de permitir o acesso aos recursos protegidos. Isso ajuda a evitar que usuários não autorizados acessem informações confidenciais ou executem ações que não têm permissão. 8 | 9 | Além disso, a página de login também é importante para a experiência do usuário. Ela pode ser personalizada para refletir a marca da aplicação e oferecer uma interface amigável e intuitiva, facilitando o uso da aplicação pelos usuários. É importante ter um design responsivo e adaptável para que a página de login seja acessível em diferentes dispositivos e tamanhos de tela. 10 | 11 |

1.1 👣 Editando service

12 | 13 | A pasta "service" geralmente é usada para armazenar funções que se comunicam com uma API ou outras fontes de dados externas. Essas funções geralmente são usadas para obter ou atualizar dados da API e, em seguida, atualizar o estado dos componentes em conformidade. Essa pasta pode ser usada para separar a lógica de negócios da lógica de interface do usuário e tornar o código mais modular e fácil de manter. 14 | 15 | Agora vamos editar o nosso service. 16 | 17 | 1. Edite o seguinte arquivo: Service.ts 18 | 19 | 2. no arquivo de Service.ts coloque o código abaixo. 20 | 21 |

Código fonte do Service.tsx 22 | 23 |

1.2 👣 Editando App.tsx

24 | 25 | 1. Edite o seguinte arquivo: App.ts 26 | 27 | 2. no arquivo de Service.ts coloque o código abaixo. 28 | 29 |

Código fonte do componente App.tsx 30 | 31 |

1.3 👣 Construindo o componente de login

32 | 33 | Agora vamos construir a nosso componente de login de usuario. 34 | 35 | 1. Construa uma pasta chamada cadastro dentro da pasta pages de seu projeto. 36 | 37 | 2. construa os seguinte arquivo: Login.css 38 | 39 | 3. no arquivo de Login.css coloque o código abaixo. 40 | 41 |

Código fonte do componente Login.css 42 | 43 | 4. construa os seguinte arquivo: Login.tsx 44 | 45 | 5. no arquivo de Cadastro.tsx coloque o código abaixo. 46 | 47 |

Código fonte do componente Login.tsx 48 | 49 | 6. Execute seu processo de compilação com `npm run start`. 50 | 51 | ``` 52 | yarn run dev 53 | ``` 54 | 55 | 56 | Em seguida, abra seu navegador e visite `http://localhost:5173/`. 57 | 58 |

59 | 60 |

Código fonte do projeto 61 |
62 | 63 |
64 | 65 | 66 |

Voltar

67 | -------------------------------------------------------------------------------- /05_react/17.md: -------------------------------------------------------------------------------- 1 | 2 | 3 |

Projeto Blog Pessoal: Construindo a lógica do Componente Login

4 | 5 | Comunicar a página de login de uma aplicação React com uma API é importante porque permite que o aplicativo se conecte ao servidor e verifique as credenciais do usuário para autorizar o acesso à aplicação. A comunicação com a API é feita através de requisições HTTP, que podem enviar dados de login, como nome de usuário e senha, para o servidor, onde são verificados e autenticados. 6 | 7 | Ao usar uma API para gerenciar a autenticação, a aplicação pode aproveitar os recursos de segurança fornecidos pela API, como a criptografia de senha, autenticação de dois fatores e verificações de segurança adicionais. Isso aumenta a segurança da aplicação e protege os dados do usuário. 8 | 9 | Além disso, a comunicação com a API permite que a aplicação mantenha um estado de login consistente em todas as páginas e componentes. Quando o usuário faz login, a API retorna um token de autenticação, que é armazenado na aplicação e pode ser usado para fazer solicitações subsequentes ao servidor. Dessa forma, a aplicação pode manter o estado de login do usuário em todas as páginas, sem a necessidade de o usuário fazer login novamente em cada página. 10 | 11 | Por fim, a comunicação com a API também permite que a aplicação trate erros de autenticação e forneça mensagens de erro claras ao usuário em caso de falha no login. Isso ajuda a melhorar a experiência do usuário e evita confusão ou frustração. 12 | 13 |

1.1 👣 Construindo a logica da pagina de Login e comunicando com api

14 | 15 | Agora vamos construir a nosso componente de login de usuario. 16 | 17 | 1. Edite o seguinte arquivo: Login.tsx 18 | 19 | 2. no arquivo de Login.tsx coloque o código abaixo. 20 | 21 |

Código fonte do componente Login.tsx 22 | 23 | 3. Execute seu processo de compilação com `npm run start`. 24 | 25 | ``` 26 | yarn run dev 27 | ``` 28 | 29 | Em seguida, abra seu navegador e visite `http://localhost:5173/`. 30 | 31 | Realize o login de um usuario cadastrado 32 | 33 |

34 | 35 |

36 | 37 |

Código fonte do projeto 38 |
39 | 40 |
41 | 42 |

Voltar

43 | 44 | -------------------------------------------------------------------------------- /05_react/18.md: -------------------------------------------------------------------------------- 1 |

Projeto Blog Pessoal: Construindo o template do Componente Lista Temas

2 | 3 | Um componente de lista de temas em uma aplicação web é uma funcionalidade que permite aos usuários selecionar um conjunto de temas ou categorias para filtrar e visualizar conteúdo relevante para seus interesses. A inclusão desse componente pode ter várias vantagens importantes: 4 | 5 | 1. Facilita a navegação: Um componente de lista de temas ajuda os usuários a encontrar conteúdo de forma rápida e fácil, permitindo que eles selecionem os temas de seu interesse e vejam apenas o conteúdo relevante para eles. 6 | 2. Melhora a experiência do usuário: Ao fornecer uma maneira conveniente de acessar conteúdo relevante, um componente de lista de temas pode melhorar a experiência do usuário, aumentando sua satisfação e fidelidade à aplicação. 7 | 3. Aumenta o engajamento: Quando os usuários podem encontrar facilmente o conteúdo que desejam, eles são mais propensos a se envolver com a aplicação e passar mais tempo navegando nela. 8 | 4. Permite personalização: Ao oferecer aos usuários a capacidade de selecionar seus próprios temas de interesse, um componente de lista de temas permite que a aplicação web ofereça uma experiência personalizada, adaptada aos interesses e necessidades específicas de cada usuário. 9 | 5. Melhora a organização: Um componente de lista de temas pode ajudar a organizar o conteúdo da aplicação web, tornando-o mais fácil de navegar e encontrar, tanto para os usuários quanto para os desenvolvedores e gerenciadores de conteúdo. 10 | 11 |

1.1 👣 Editando service

Código fonte do Service.tsx 22 | 23 |

1.2 👣 Editando NavBar.tsx

24 | 25 | 1. Edite o seguinte arquivo: NavBar.tsx 26 | 27 | 2. no arquivo de NavBar.tsx coloque o código abaixo. 28 | 29 |

Código fonte do componente NavBar.tsx 30 | 31 |

1.3 👣 Editando App.tsx

32 | 33 | 1. Edite o seguinte arquivo: App.tsx 34 | 35 | 2. no arquivo de App.tsx coloque o código abaixo. 36 | 37 |

Código fonte do componente App.tsx 38 | 39 |

1.4 👣 Construindo o componente de CardTemas

40 | 41 | Agora vamos construir a nosso componente de cardTemas. 42 | 43 | 1. Construa uma pasta chamada temas dentro da pasta components de seu projeto. 44 | 45 | 2. Construa uma pasta chamada cardTemas dentro da pasta temas de seu projeto. 46 | 47 | 3. construa os seguinte componente: CardTemas.tsx 48 | 49 | 4. no arquivo de CardTemas.tsx coloque o código abaixo. 50 | 51 |

Código fonte do componente CardTemas.tsx 52 | 53 |

1.5 👣 Construindo o componente de ListaTemas

54 | 55 | Agora vamos construir a nosso componente de listaTemas. 56 | 57 | 1. Construa uma pasta chamada listaTemas dentro da pasta temas de seu projeto. 58 | 59 | 2. construa os seguinte componente: ListaTemas.tsx 60 | 61 | 3. no arquivo de ListaTemas.tsx coloque o código abaixo. 62 | 63 |

Código fonte do componente ListaTemas.tsx 64 | 65 | 4. Execute seu processo de compilação com `npm run start`. 66 | 67 | ``` 68 | yarn run dev 69 | ``` 70 | 71 | Em seguida, abra seu navegador e visite `http://localhost:5173/`. 72 | 73 | Acesse a paginas temas do navBar 74 | 75 |

76 | 77 |

Código fonte do projeto 78 |
79 | 80 |
81 | 82 |

Voltar

83 | 84 | -------------------------------------------------------------------------------- /05_react/19.md: -------------------------------------------------------------------------------- 1 |

Projeto Blog Pessoal: Construindo a lógica do Componente Lista Temas

2 | 3 | A função de um `getAll` temas em uma API REST é retornar uma lista de todos os temas disponíveis na aplicação ou sistema. 4 | 5 | Essa operação é utilizada quando se deseja listar todos os temas cadastrados na base de dados da aplicação ou sistema. A lista pode ser retornada em ordem alfabética, por data de criação ou qualquer outra ordem definida pelo desenvolvedor da API. 6 | 7 | Essa operação é útil para que o usuário da API possa obter uma visão geral dos temas disponíveis, e posteriormente realizar operações específicas em cada tema, como adicionar, atualizar ou remover. 8 | 9 | O retorno dessa lista pode ser em formato JSON, XML ou outro formato definido pela API. Além disso, é importante que a API possua um sistema de paginação para lidar com listas grandes de temas e garantir uma melhor performance e eficiência na comunicação entre o cliente e o servidor. 10 | 11 |

1.1 👣 Cadastrando um novo tema

12 | 13 | Agora vamos cadastrar um novo tema atraves da sua api em deploy pelo swagger. 14 | 15 | 1. Entre no swagger em deploy de sua api 16 | 2. Em Post Temas cadastre um novo tema 17 | 18 |

19 | 20 |

1.2 👣 Construindo a logica do componente CardTemas

21 | 22 | Agora vamos construir a nosso componente de CardTemas. 23 | 24 | 1. Edite o seguinte arquivo: CardTemas.tsx 25 | 26 | 2. no arquivo de CardTemas.tsx coloque o código abaixo. 27 | 28 |

Código fonte do componente CardTemas.tsx 29 | 30 |

1.3 👣 Construindo a logica da pagina de ListaTemas e comunicando com api

31 | 32 | Agora vamos construir a nosso componente de ListaTemas. 33 | 34 | 1. Edite o seguinte arquivo: ListaTemas.tsx 35 | 36 | 2. no arquivo de ListaTemas.tsx coloque o código abaixo. 37 | 38 |

Código fonte do componente ListaTemas.tsx 39 | 40 | 3. Execute seu processo de compilação com `npm run start`. 41 | 42 | ``` 43 | yarn run dev 44 | ``` 45 | 46 | Em seguida, abra seu navegador e visite `http://localhost:5173/`. 47 | 48 | Acesse o componente temas 49 | 50 |

51 | 52 |

Código fonte do projeto 53 |
54 | 55 |
56 | 57 | 58 |

Voltar

59 | 60 | -------------------------------------------------------------------------------- /05_react/20.md: -------------------------------------------------------------------------------- 1 |

Projeto Blog Pessoal: Construindo o template do Componente Formulário Tema

2 | 3 | Os componentes de formulário de cadastro e edição são essenciais para qualquer aplicação web que coleta informações dos usuários. Esses componentes permitem que os usuários entrem com dados pessoais, informações de pagamento, endereços, preferências e outras informações relevantes para a aplicação. 4 | 5 | A importância desses componentes está relacionada à facilidade de uso e à experiência do usuário. Um formulário bem projetado e fácil de usar pode ajudar a aumentar a taxa de conversão, pois os usuários se sentirão mais confortáveis em compartilhar suas informações. 6 | 7 | Além disso, os formulários de cadastro e edição devem ser seguros e proteger as informações confidenciais dos usuários, como informações de pagamento ou senhas. 8 | 9 | Por fim, os componentes de formulário de cadastro e edição também podem ajudar a organizar as informações de maneira clara e fácil de entender, permitindo que os usuários revisem e editem suas informações com facilidade. Em resumo, esses componentes são vitais para o sucesso de qualquer aplicação web que lida com informações de usuários. 10 | 11 |

1.1 👣 Editando service

Código fonte do Service.tsx 22 | 23 |

1.2 👣 Editando NavBar.tsx

24 | 25 | 1. Edite o seguinte arquivo: NavBar.tsx 26 | 27 | 2. no arquivo de NavBar.tsx coloque o código abaixo. 28 | 29 |

Código fonte do componente NavBar.tsx 30 | 31 |

1.3 👣 Editando App.tsx

32 | 33 | 1. Edite o seguinte arquivo: App.tsx 34 | 35 | 2. no arquivo de App.tsx coloque o código abaixo. 36 | 37 |

Código fonte do componente App.tsx 38 | 39 |

1.5 👣 Construindo o componente de FormularioTema

40 | 41 | Agora vamos construir a nosso componente de formularioTema. 42 | 43 | 1. Construa uma pasta chamada formularioTema dentro da pasta temas de seu projeto. 44 | 45 | 2. construa os seguinte componente: FormularioTema.tsx 46 | 47 | 3. no arquivo de FormularioTema.tsx coloque o código abaixo. 48 | 49 |

Código fonte do componente FormularioTema.tsx 50 | 51 | 4. Execute seu processo de compilação com `npm run start`. 52 | 53 | ``` 54 | yarn run dev 55 | ``` 56 | 57 | Em seguida, abra seu navegador e visite `http://localhost:5173/`. 58 | 59 | Acesse a paginas cadastrarTema do navBar 60 | 61 |

62 | 63 |

Código fonte do projeto

64 | 65 |
66 | 67 |
68 | 69 | 70 |

Voltar

71 | -------------------------------------------------------------------------------- /05_react/21.md: -------------------------------------------------------------------------------- 1 |

Projeto Blog Pessoal: Construindo a lógica do Componente Formulário Tema

2 | 3 | Os métodos HTTP POST e PUT são utilizados em uma API REST para criar e atualizar recursos, respectivamente. Portanto, é possível inferir que as funções "PostTemas" e "PutTemas" em uma API REST relacionam-se com a criação e atualização de temas (ou tópicos) na aplicação. 4 | 5 | O método POST (PostTemas) é utilizado para criar um novo recurso na aplicação, neste caso, um novo tema. Quando um cliente envia uma solicitação HTTP POST para a API REST com um novo tema em formato de dados no corpo da solicitação, a API irá processar essa solicitação e criar um novo registro do tema no banco de dados da aplicação. 6 | 7 | Já o método PUT (PutTemas) é utilizado para atualizar um recurso existente. Quando um cliente envia uma solicitação HTTP PUT para a API REST com um tema existente que precisa ser atualizado, a API irá procurar pelo registro correspondente no banco de dados e atualizá-lo com os novos dados fornecidos no corpo da solicitação. 8 | 9 |

1.3 👣 Construindo a logica da pagina de FormularioTema e comunicando com api

10 | 11 | Agora vamos construir a nosso componente de FormularioTema. 12 | 13 | 1. Edite o seguinte arquivo: FormularioTema.tsx 14 | 15 | 2. no arquivo de FormularioTema.tsx coloque o código abaixo. 16 | 17 |

Código fonte do componente FormularioTema.tsx 18 | 19 | 3. Execute seu processo de compilação com `npm run start`. 20 | 21 | ``` 22 | yarn run dev 23 | ``` 24 | 25 | Em seguida, abra seu navegador e visite `http://localhost:5173/`. 26 | 27 | Acesse o componente Cadastrar tema e cadastre um novo tema 28 | 29 |

30 | 31 |
32 | 33 |

34 | 35 | Edite esse tema que foi criado. 36 | 37 |

38 | 39 |
40 | 41 |

42 | 43 |

Código fonte do projeto

44 | 45 |

46 | 47 |

Voltar

48 | 49 | -------------------------------------------------------------------------------- /05_react/22.md: -------------------------------------------------------------------------------- 1 |

Projeto Blog Pessoal: Construindo a template do Componente Deletar Tema

2 | 3 | Um componente de deletar tema em uma aplicação web é importante por várias razões: 4 | 5 | 1. Manutenção de dados: Um componente de deletar tema permite que os usuários removam temas antigos ou irrelevantes da aplicação, ajudando a manter os dados da aplicação atualizados e organizados. 6 | 2. Melhor experiência do usuário: Os usuários esperam ter controle sobre as informações que compartilham em uma aplicação, e um componente de deletar tema permite que eles tenham esse controle. Isso pode melhorar a experiência do usuário, já que eles se sentirão mais no controle de suas informações e poderão gerenciá-las de forma mais eficiente. 7 | 3. Proteção de dados: Em algumas situações, é importante excluir informações pessoais de usuários, especialmente em casos de solicitações de privacidade de dados. Nesse caso, um componente de deletar tema pode ser essencial para garantir que os dados sejam excluídos corretamente e que a privacidade do usuário seja protegida. 8 | 4. Conformidade com a lei: Dependendo da aplicação e do tipo de dados coletados, pode haver leis ou regulamentações que exijam a exclusão de dados de usuários. Um componente de deletar tema permite que a aplicação cumpra essas leis e regulamentações. 9 | 10 |

1.1 👣 Editando service

11 | 12 | A pasta "service" geralmente é usada para armazenar funções que se comunicam com uma API ou outras fontes de dados externas. Essas funções geralmente são usadas para obter ou atualizar dados da API e, em seguida, atualizar o estado dos componentes em conformidade. Essa pasta pode ser usada para separar a lógica de negócios da lógica de interface do usuário e tornar o código mais modular e fácil de manter. 13 | 14 | Agora vamos editar o nosso service. 15 | 16 | 1. Edite o seguinte arquivo: Service.ts 17 | 18 | 2. no arquivo de Service.ts coloque o código abaixo. 19 | 20 |

Código fonte do Service.tsx 21 | 22 |

1.3 👣 Editando App.tsx

23 | 24 | 1. Edite o seguinte arquivo: App.tsx 25 | 26 | 2. no arquivo de App.tsx coloque o código abaixo. 27 | 28 |

Código fonte do componente App.tsx 29 | 30 |

1.5 👣 Construindo o componente de deletarTema

31 | 32 | Agora vamos construir a nosso componente de DeletarTema. 33 | 34 | 1. Construa uma pasta chamada deletarTema dentro da pasta temas de seu projeto. 35 | 36 | 2. construa os seguinte componente: DeletarTema.tsx 37 | 38 | 3. no arquivo de DeletarTema.tsx coloque o código abaixo. 39 | 40 |

Código fonte do componente DeletarTema.tsx 41 | 42 | 4. Execute seu processo de compilação com `npm run start`. 43 | 44 | ``` 45 | yarn run dev 46 | ``` 47 | 48 | Em seguida, abra seu navegador e visite `http://localhost:5173/`. 49 | 50 | Acesse a paginas DeletarTema. 51 | 52 |

53 | 54 |

Código fonte do projeto 55 | 56 | 57 | 58 |

Voltar

59 | 60 | -------------------------------------------------------------------------------- /05_react/23.md: -------------------------------------------------------------------------------- 1 |

Projeto Blog Pesssoal: Construindo a lógica do Componente Deletar Tema

2 | 3 | A função de um método HTTP DELETE em uma API REST é remover um recurso específico do servidor. Portanto, um "deleteTema" em uma API REST seria utilizado para excluir um registro de tema específico da aplicação. 4 | 5 | Quando um cliente envia uma solicitação HTTP DELETE para a API REST com um ID de tema, a API verifica se esse ID corresponde a um registro de tema existente no banco de dados. Se houver um registro correspondente, a API remove esse registro do banco de dados e retorna uma resposta de sucesso para o cliente. 6 | 7 | O "deleteTema" é importante em uma API REST porque permite que os usuários removam recursos que já não são mais relevantes ou necessários. Além disso, a exclusão de registros de temas antigos pode ajudar a manter o banco de dados da aplicação atualizado e organizado. 8 | 9 | É importante notar que o método HTTP DELETE deve ser usado com cuidado, já que a exclusão de um registro é uma ação irreversível e pode ter impactos em outras partes da aplicação. Portanto, é recomendável que a exclusão de registros seja feita com cautela e que os usuários sejam informados sobre as consequências da exclusão antes de confirmar a ação. 10 | 11 |

1.3 👣 Construindo a logica da pagina de DeletarTema e comunicando com api

12 | 13 | Agora vamos construir a nosso componente de DeletarTema. 14 | 15 | 1. Edite o seguinte arquivo: DeletarTema.tsx 16 | 17 | 2. no arquivo de DeletarTema.tsx coloque o código abaixo. 18 | 19 |

Código fonte do componente DeletarTema.tsx 20 | 21 | 3. Execute seu processo de compilação com `npm run start`. 22 | 23 | ``` 24 | yarn run dev 25 | ``` 26 | 27 | Em seguida, abra seu navegador e visite `http://localhost:5173/`. 28 | 29 | Acesse o componente DeletarTema e delete um tema 30 | 31 |

32 | 33 |

34 | 35 |

36 | 37 |

Código fonte do projeto

38 | 39 |

40 | 41 | 42 |

Voltar

43 | -------------------------------------------------------------------------------- /05_react/24.md: -------------------------------------------------------------------------------- 1 |

Projeto Blog Pessoal: Construindo o template do Componente Lista Postagem

2 | 3 | Um componente de lista de postagens é importante em uma aplicação web porque permite que os usuários visualizem e acessem facilmente conteúdo relevante. Esse componente geralmente é usado para exibir uma lista de postagens em um blog, fórum, rede social ou qualquer outra aplicação que tenha conteúdo atualizado regularmente. 4 | 5 | Com um componente de lista de postagens, os usuários podem navegar facilmente pelo conteúdo do aplicativo, encontrar postagens relevantes com base em tópicos ou categorias específicas e acessar rapidamente informações importantes. 6 | 7 | Além disso, um componente de lista de postagens também pode ajudar a aumentar o engajamento do usuário, permitindo que os usuários comentem e interajam com as postagens, dando feedback ou compartilhando suas próprias experiências e opiniões. 8 | 9 |

1.1 👣 Construindo o componente de CardPostagem

10 | 11 | Agora vamos construir a nosso componente de CardPostagem. 12 | 13 | 1. Construa uma pasta chamada postagens dentro da pasta components de seu projeto. 14 | 15 | 2. Construa uma pasta chamada cardPostagem dentro da pasta postagens de seu projeto. 16 | 17 | 3. construa os seguinte componente: CardPostagem.tsx 18 | 19 | 4. no arquivo de CardPostagem.tsx coloque o código abaixo. 20 | 21 |

Código fonte do componente CardPostagem.tsx 22 | 23 |

1.2 👣 Construindo o componente de ListaPostagens

24 | 25 | Agora vamos construir a nosso componente de ListaPostagens. 26 | 27 | 1. Construa uma pasta chamada listaPostagens dentro da pasta postagens de seu projeto. 28 | 29 | 2. construa os seguinte componente: ListaPostagens.tsx 30 | 31 | 3. no arquivo de ListaPostagens.tsx coloque o código abaixo. 32 | 33 |

Código fonte do componente ListaPostagens.tsx 34 | 35 |

1.3 👣 Editando NavBar.tsx

36 | 37 | 1. Edite o seguinte arquivo: NavBar.tsx 38 | 39 | 1. no arquivo de NavBar.tsx coloque o código abaixo. 40 | 41 |

Código fonte do NavBar.tsx 42 | 43 |

1.4 👣 Editando App.tsx

44 | 45 | 1. Edite o seguinte arquivo: App.tsx 46 | 47 | 1. no arquivo de App.tsx coloque o código abaixo. 48 | 49 |

Código fonte do App.tsx 50 | 51 |

1.5 👣 Editando Home.tsx

52 | 53 | 1. Edite o seguinte arquivo: Home.tsx 54 | 55 | 2. no arquivo de Home.tsx coloque o código abaixo. 56 | 57 |

Código fonte do componente Home.tsx 58 | 59 | 1. Execute seu processo de compilação com `npm run start`. 60 | 61 | ``` 62 | yarn run dev 63 | ``` 64 | 65 | Em seguida, abra seu navegador e visite `http://localhost:5173/`. 66 | 67 | Acesse a pagina home 68 | 69 |

70 | 71 |

Código fonte do projeto

72 | 73 |
74 | 75 |
76 | 77 |

Voltar

78 | 79 | -------------------------------------------------------------------------------- /05_react/25.md: -------------------------------------------------------------------------------- 1 |

Projeto Blog Pessoal: Construindo a lógica do Componente Lista Postagens

2 | 3 | A função de um `getAll` postagens em uma API REST é retornar uma lista de todas as postagens disponíveis na aplicação ou sistema. 4 | 5 | Essa operação é utilizada quando se deseja listar todas as postagens cadastradas na base de dados da aplicação ou sistema. A lista pode ser retornada em ordem alfabética, por data de criação ou qualquer outra ordem definida pelo desenvolvedor da API. 6 | 7 | Essa operação é útil para que o usuário da API possa obter uma visão geral das postagens disponíveis, e posteriormente realizar operações específicas em cada postagem, como adicionar, atualizar ou remover. 8 | 9 | O retorno dessa lista pode ser em formato JSON, XML ou outro formato definido pela API. Além disso, é importante que a API possua um sistema de paginação para lidar com listas grandes de postagens e garantir uma melhor performance e eficiência na comunicação entre o cliente e o servidor. 10 | 11 |

1.1 👣 Cadastrando uma nova Postagem

12 | 13 | Agora vamos cadastrar um nova postagem atraves da sua api em deploy pelo swagger. 14 | 15 | 1. Entre no swagger em deploy de sua api 16 | 2. Em Post Postagem cadastre um nova postagem 17 | 18 |

19 | 20 |

1.2 👣 Construindo a logica do componente CardPostagem

21 | 22 | Agora vamos construir a nosso componente de CardPostagem. 23 | 24 | 1. Edite o seguinte arquivo: CardPostagem.tsx 25 | 26 | 2. no arquivo de CardPostagem.tsx coloque o código abaixo. 27 | 28 |

Código fonte do componente CardPostagem.tsx 29 | 30 |

1.3 👣 Construindo a logica da pagina de ListaPostagens e comunicando com api

31 | 32 | Agora vamos construir a nosso componente de ListaPostagens. 33 | 34 | 1. Edite o seguinte arquivo: ListaPostagens.tsx 35 | 36 | 2. no arquivo de ListaPostagens.tsx coloque o código abaixo. 37 | 38 |

Código fonte do componente ListaPostagens.tsx 39 | 40 | 3. Execute seu processo de compilação com `npm run start`. 41 | 42 | ``` 43 | yarn run dev 44 | ``` 45 | 46 | Em seguida, abra seu navegador e visite `http://localhost:5173/`. 47 | 48 | Acesse o componente home, 49 | 50 |

51 | 52 |

Código fonte do projeto

53 | 54 |
55 | 56 |
57 | 58 |

Voltar

59 | 60 | -------------------------------------------------------------------------------- /05_react/26.md: -------------------------------------------------------------------------------- 1 |

Projeto Blog Pessoal: Construindo a template do Componente Formulario Postagem

1.2 👣 Editando NavBar.tsx

12 | 13 | 1. Edite o seguinte arquivo: NavBar.tsx 14 | 15 | 2. no arquivo de NavBar.tsx coloque o código abaixo. 16 | 17 |

Código fonte do componente NavBar.tsx 18 | 19 |

1.3 👣 Editando App.tsx

20 | 21 | 1. Edite o seguinte arquivo: App.tsx 22 | 23 | 2. no arquivo de App.tsx coloque o código abaixo. 24 | 25 |

Código fonte do componente App.tsx 26 | 27 |

1.5 👣 Construindo o componente de FormularioPostagem

28 | 29 | Agora vamos construir a nosso componente de formularioPostagem. 30 | 31 | 1. Construa uma pasta chamada formularioPostagem dentro da pasta postagens de seu projeto. 32 | 33 | 2. construa os seguinte componente: FormularioPostagem.tsx 34 | 35 | 3. no arquivo de FormularioPostagem.tsx coloque o código abaixo. 36 | 37 |

Código fonte do componente FormularioPostagem.tsx 38 | 39 |

1.5 👣 Construindo o componente de ModalPostagem

40 | 41 | Em aplicações web, a palavra "modal" é frequentemente usada para descrever um tipo específico de elemento de interface do usuário que é exibido em cima do conteúdo principal da página para fornecer informações adicionais ou solicitar alguma ação do usuário. 42 | 43 | Um modal é geralmente uma janela ou diálogo que aparece na frente do conteúdo principal da página e escurece ou desfoca o restante da interface para indicar que o foco deve estar na janela modal. Eles são frequentemente usados para apresentar informações importantes, como notificações, mensagens de erro ou formulários de entrada de dados. 44 | 45 | O objetivo de um modal é chamar a atenção do usuário para a tarefa em questão e impedir que o usuário interaja com o conteúdo principal da página até que a tarefa seja concluída ou o modal seja fechado. Modal geralmente possuem um botão de fechar, permitindo que o usuário retorne ao conteúdo principal da página. 46 | 47 | Agora vamos construir a nosso componente de ModalPostagem. 48 | 49 | 1. Construa uma pasta chamada modalPostagem dentro da pasta postagens de seu projeto. 50 | 51 | 2. construa os seguinte componente: ModalPostagem.css 52 | 53 | 3. no arquivo de ModalPostagem.csscoloque o código abaixo. 54 | 55 |

Código fonte do componente ModalPostagem.css 56 | 57 | 4. construa os seguinte componente: ModalPostagem.tsx 58 | 59 | 5. no arquivo de ModalPostagem.tsx coloque o código abaixo. 60 | 61 |

Código fonte do componente ModalPostagem.tsx 62 | 63 |

1.5 👣 editando o componente de Home

64 | 65 | 1. Edite o seguinte arquivo: Home.tsx 66 | 67 | 2. no arquivo de Home.tsx coloque o código abaixo. 68 | 69 |

Código fonte do componente Home.tsx 70 | 71 | 3. Execute seu processo de compilação com `npm run start`. 72 | 73 | ``` 74 | yarn run dev 75 | ``` 76 | 77 | Em seguida, abra seu navegador e visite `http://localhost:5173/`. 78 | 79 | Acesse a paginas home e clique no botão cadastrar postagem 80 | 81 |

82 | 83 |

Código fonte do projeto

84 | 85 |
86 | 87 |
88 | 89 |

Voltar

90 | -------------------------------------------------------------------------------- /05_react/27.md: -------------------------------------------------------------------------------- 1 |

Projeto Blog Pessoal: Construindo a lógica do Componente Formulário Postagem

2 | 3 | Os métodos HTTP POST e PUT são utilizados em uma API REST para criar e atualizar recursos, respectivamente. Portanto, é possível inferir que as funções "PostPostagem" e "PutPostagem" em uma API REST relacionam-se com a criação e atualização de temas (ou tópicos) na aplicação. 4 | 5 | O método POST (PostPostagem) é utilizado para criar um novo recurso na aplicação, neste caso, um novo tema. Quando um cliente envia uma solicitação HTTP POST para a API REST com um novo tema em formato de dados no corpo da solicitação, a API irá processar essa solicitação e criar um novo registro do tema no banco de dados da aplicação. 6 | 7 | Já o método PUT (PutPostagem) é utilizado para atualizar um recurso existente. Quando um cliente envia uma solicitação HTTP PUT para a API REST com um tema existente que precisa ser atualizado, a API irá procurar pelo registro correspondente no banco de dados e atualizá-lo com os novos dados fornecidos no corpo da solicitação. 8 | 9 |

1.3 👣 Construindo a logica da pagina de FormularioPostagem e comunicando com api

10 | 11 | Agora vamos construir a nosso componente de FormularioPostagem. 12 | 13 | 1. Edite o seguinte arquivo: FormularioPostagem.tsx 14 | 15 | 2. no arquivo de FormularioPostagem.tsx coloque o código abaixo. 16 | 17 |

Código fonte do componente FormularioPostagem.tsx 18 | 19 | 3. Execute seu processo de compilação com `npm run start`. 20 | 21 | ``` 22 | yarn run dev 23 | ``` 24 | 25 | Em seguida, abra seu navegador e visite `http://localhost:5173/`. 26 | 27 | Acesse o componente Cadastrar tema e cadastre um novo tema 28 | 29 |

30 | 31 |
32 | 33 |

34 | 35 | Edite esse tema que foi criado. 36 | 37 |

38 | 39 |
40 | 41 |

42 | 43 |

Código fonte do projeto

44 | 45 |
46 | 47 |
48 | 49 | 50 |

Voltar

51 | 52 | -------------------------------------------------------------------------------- /05_react/28.md: -------------------------------------------------------------------------------- 1 |

Projeto Blog Pessoal: Construindo a template do Componente Deletar Postagem

2 | 3 | Um componente de deletar Postagem em uma aplicação web é importante por várias razões: 4 | 5 | 1. Manutenção de dados: Um componente de deletar Postagem permite que os usuários removam temas antigos ou irrelevantes da aplicação, ajudando a manter os dados da aplicação atualizados e organizados. 6 | 2. Melhor experiência do usuário: Os usuários esperam ter controle sobre as informações que compartilham em uma aplicação, e um componente de deletar Postagem permite que eles tenham esse controle. Isso pode melhorar a experiência do usuário, já que eles se sentirão mais no controle de suas informações e poderão gerenciá-las de forma mais eficiente. 7 | 3. Proteção de dados: Em algumas situações, é importante excluir informações pessoais de usuários, especialmente em casos de solicitações de privacidade de dados. Nesse caso, um componente de deletar tema pode ser essencial para garantir que os dados sejam excluídos corretamente e que a privacidade do usuário seja protegida. 8 | 9 |

1.3 👣 Editando App.tsx

10 | 11 | 1. Edite o seguinte arquivo: App.tsx 12 | 13 | 2. no arquivo de App.tsx coloque o código abaixo. 14 | 15 |

Código fonte do componente App.tsx 16 | 17 |

1.5 👣 Construindo o componente de deletarPostagem

18 | 19 | Agora vamos construir a nosso componente de DeletarPostagem. 20 | 21 | 1. Construa uma pasta chamada deletarPostagem dentro da pasta postagem de seu projeto. 22 | 23 | 2. construa os seguinte componente: DeletarPostagem.tsx 24 | 25 | 3. no arquivo de DeletarPostagem.tsx coloque o código abaixo. 26 | 27 |

Código fonte do componente DeletarPostagem.tsx 28 | 29 | 4. Execute seu processo de compilação com `npm run start`. 30 | 31 | ``` 32 | yarn run dev 33 | ``` 34 | 35 | Em seguida, abra seu navegador e visite `http://localhost:5173/`. 36 | 37 | Acesse a paginas DeletarPostagem. 38 | 39 |

40 | 41 |

Código fonte do projeto

42 | 43 |
44 | 45 |
46 | 47 |

Voltar

48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /05_react/29.md: -------------------------------------------------------------------------------- 1 |

Projeto Blog Pessoal: Construindo a lógica do Componente Deletar Postagem

2 | 3 | A função de um método HTTP DELETE em uma API REST é remover um recurso específico do servidor. Portanto, um "deleteTema" em uma API REST seria utilizado para excluir um registro de tema específico da aplicação. 4 | 5 | Quando um cliente envia uma solicitação HTTP DELETE para a API REST com um ID de tema, a API verifica se esse ID corresponde a um registro de tema existente no banco de dados. Se houver um registro correspondente, a API remove esse registro do banco de dados e retorna uma resposta de sucesso para o cliente. 6 | 7 | O "deletePostagem" é importante em uma API REST porque permite que os usuários removam recursos que já não são mais relevantes ou necessários. Além disso, a exclusão de registros de temas antigos pode ajudar a manter o banco de dados da aplicação atualizado e organizado. 8 | 9 | É importante notar que o método HTTP DELETE deve ser usado com cuidado, já que a exclusão de um registro é uma ação irreversível e pode ter impactos em outras partes da aplicação. Portanto, é recomendável que a exclusão de registros seja feita com cautela e que os usuários sejam informados sobre as consequências da exclusão antes de confirmar a ação. 10 | 11 |

1.3 👣 Construindo a logica da pagina de DeletarPostagem e comunicando com api

12 | 13 | Agora vamos construir a nosso componente de DeletarPostagem. 14 | 15 | 1. Edite o seguinte arquivo: DeletarPostagem.tsx 16 | 17 | 2. no arquivo de DeletarPostagem.tsx coloque o código abaixo. 18 | 19 |

Código fonte do componente DeletarPostagem.tsx 20 | 21 | 3. Execute seu processo de compilação com `npm run start`. 22 | 23 | ``` 24 | yarn run dev 25 | ``` 26 | 27 | Em seguida, abra seu navegador e visite `http://localhost:5173/`. 28 | 29 | Acesse o componente DeletarTema e delete um tema 30 | 31 |

32 | 33 |

34 | 35 |

36 | 37 |

Código fonte do projeto

38 | 39 |
40 | 41 |
42 | 43 |

Voltar

44 | -------------------------------------------------------------------------------- /05_react/30.md: -------------------------------------------------------------------------------- 1 |

Projeto Blog Pessoal: Construindo o componente Perfil

2 | 3 | Um componente perfil de usuário em uma aplicação web é um recurso que permite que os usuários criem e gerenciem suas informações pessoais, configurações e preferências na plataforma. 4 | 5 | Este recurso geralmente inclui uma página de perfil que exibe as informações do usuário, como nome, endereço de e-mail, foto de perfil, entre outros dados relevantes. Além disso, o componente perfil de usuário pode incluir recursos para edição dessas informações, bem como para gerenciar notificações, privacidade, assinaturas e outras funcionalidades relacionadas. 6 | 7 | A importância do componente perfil de usuário em uma aplicação web é que ele permite que os usuários personalizem sua experiência na plataforma e gerenciem suas informações de maneira segura e eficiente. Com um perfil bem desenvolvido, os usuários podem controlar o que é exibido em suas páginas de perfil e como eles interagem com a aplicação, o que pode melhorar sua satisfação e fidelidade à plataforma. 8 | 9 | Além disso, o componente perfil de usuário é fundamental para a segurança da plataforma, pois ajuda a garantir que as informações pessoais dos usuários sejam armazenadas e gerenciadas de forma adequada. A capacidade de gerenciar as informações da conta do usuário também pode ajudar a evitar problemas de segurança, como o roubo de identidade ou o uso não autorizado de informações confidenciais. 10 | 11 |

1.1 👣 Construindo o componente de Perfil

12 | 13 | Agora vamos construir a nosso componente de Perfil. 14 | 15 | 1. Construa uma pasta chamada perfil dentro da pasta pages de seu projeto. 16 | 17 | 2. construa os seguinte componente: Perfil.tsx 18 | 19 | 3. no arquivo de Perfil.tsx coloque o código abaixo. 20 | 21 |

Código fonte do componente Perfil.tsx 22 | 23 |

1.2 👣 Editando NavBar.tsx

24 | 25 | 1. Edite o seguinte arquivo: NavBar.tsx 26 | 27 | 2. no arquivo de NavBar.tsx coloque o código abaixo. 28 | 29 |

Código fonte do componente NavBar.tsx 30 | 31 |

1.3 👣 Editando App.tsx

32 | 33 | 1. Edite o seguinte arquivo: App.tsx 34 | 35 | 2. no arquivo de App.tsx coloque o código abaixo. 36 | 37 |

Código fonte do componente App.tsx 38 | 39 | 3. Execute seu processo de compilação com `npm run start`. 40 | 41 | ``` 42 | yarn run dev 43 | ``` 44 | 45 | Em seguida, abra seu navegador e visite `http://localhost:5173/`. 46 | 47 | Acesse a paginas temas do navBar 48 | 49 |

50 | 51 |

Código fonte do projeto

52 | 53 |
54 | 55 |
56 | 57 |

Voltar

58 | 59 | -------------------------------------------------------------------------------- /05_react/32.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/conteudoGeneration/cookbook_csharp/83e8eade8a97ed75746e5530d181eaedd826f974/05_react/32.pdf -------------------------------------------------------------------------------- /05_react/33.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/conteudoGeneration/cookbook_csharp/83e8eade8a97ed75746e5530d181eaedd826f974/05_react/33.pdf -------------------------------------------------------------------------------- /05_react/README.md: -------------------------------------------------------------------------------- 1 |

2 |

3 |

4 |

Bootcamp - C# Full Stack

5 | 6 |
7 | 8 |

Frontend com React

48 |

Home

49 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 |

3 |

4 |

Bootcamp - C# Full Stack

5 | 6 |

Conteúdos

7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 |

	Preparação do Ambiente
	Programação de Computadores com C#
	Introdução ao Protocolo HTTP
	Banco de dados com SQL Server
	Backend com ASP.NET
	Frontend com React

34 | 35 | --------------------------------------------------------------------------------

Guia de Instalação do GIT - Windows

Guia de Instalação do Portugol Studio

Guia de Instalação - Microsoft .NET - Versão 7.0

Guia de Instalação - Microsoft Visual Studio

Instalação SQL Server e SSMS

1. Instalando SQL Server

2. Instalando o SSMS (SQL Server Management Studio)

3. Configurando o SSMS (SQL Server Management Studio)

Guia de Instalação do Insomnia

A janela principal do Insomnia não abriu!

Guia de Instalação do Visual Studio Code - VSCode

Guia de Instalação do Node

Bootcamp - C# Full Stack

Preparação do Ambiente

Classes Abstratas

Métodos Abstratos

O uso do VAR no C#

1. Restrições em variáveis de tipo implícito

2. Quando é recomendado usar o var?

Expressões Lambda

1. Programação Funcional

1.1. Programação Imperativa

1.2. Programação Orientada a Objetos

1.3. E a Programação Funcional?

2. Expressões Lambda

2.1. Características

Bootcamp - C# Full Stack

Introdução ao C#

Projeto Conta Bancária

Conteúdo Auxiliar

Classe Math

Classe String

Projeto 01 - Conta Bancária - Interface - Interface IContaRepository

👣 Passo 01 - Criar a pasta Repository

👣 Passo 02 - Criar a Interface IContaRepository

Projeto 01 - Conta Bancária - Exceptions - Classe Program

👣 Passo 01 - Atualizar a Classe Program

Bootcamp - C# Full Stack

Banco de Dados - SQL Server

Introdução ao Entity Framework

1. Mapeamento Objeto Relacional

2. Entity Framework

2.1. Recursos do Entity Framework

2.2. A Classe DbContext

2.3. O que é uma entidade no Entity Framework?

2.4. O Fluxo de trabalho do Entity Framework

Bootcamp - C# Full Stack

Backend - ASP.NET

Anexos

Diagrama de Classes

Relações entre objetos

Herança

Implementação

Associação

Agregação

Composição

Preparando o ambiente para trabalhar com o React

1. Como configurar um projeto React com o Vite?

1.1 👣 Introdução

1.2 👣 Pré-requisitos

1.3 👣 Instalando Yarn

1.4 👣 Instalando Vite

Estilizando componentes React com CSS

1.1 👣 Formas de utilizar css em React.

1.2 👣 Estilizando o componente home.

React: Estilização com Flexbox, Grid e Tailwind

1.1 👣 Flex box em Tailwind CSS com React

1.2 👣 Codificando Flex-Box no Tailwind CSS em React

1.3 👣 Grid em Tailwind CSS com React

1.4 👣 Codificando Grid no Tailwind CSS em React

Projeto Blog Pessoal: Componentes NavBar, Footer e Home

1.1 👣 Construindo o Footer

1.2 👣 Construindo o NavBar

1.2 👣 Editando o Home

1.2 👣 Editando o App.tsx

Projeto Blog Pessoal: Criando as Rotas

1.1 👣 Bibliotecas de roteamento em desenvolvimento front-end

1.2 👣 Instalando o React router dom

1.3 👣 Construindo o Login

1.4 👣 Editando o App.tsx