search

saibrotech / mentoria

Repositório para gestão das atividades de mentoria para transição de carreira realizada pela SaibroTech
GNU General Public License v3.0
4 stars 1 forks source link

Curso Introdutório de React - Hora de Codar (Matheus) #145

Closed AndreBuitoni closed 1 year ago

AndreBuitoni commented 1 year ago

LINK DO CURSO Curso de React - Canal Hora de Codar 51 aulas

OBSERVAÇÕES

MAPA MENTAL DAS AULAS https://www.edrawmind.com/app/editor/iNnRakmaFX1ClrS81NpzpGc1ThdMfQbv?ivt=qIXV0aavi9UxhTQwV5WdN0hz1WjrQrL7008?

ACOMPANHAMENTO DAS AULAS

AndreBuitoni commented 1 year ago

Aula 12 - Renderização Condicional (if)

Verificamos se a variável userEmail existe. Caso TRUE, criamos uma div com um parágrafo para mostrar o conteúdo da variável (no caso o e-mail que o usuário inseriu em um formulário).

Componente Condicional.js Image

Detalhe do condicional: Image

Resultado no navegador: Image

Depois, criamos um botão para limpar o email do usuário e uma função que torna vazia a variável userEmail. Dessa forma, nossa condicional torna-se FALSE, pois não há mais valor atribuído a userEmail. A div então desaparece da página.

Botão Image

Função Image

Resultado no navegador - antes do click Image

Resultado no navegador - Após click Image

Aula finalizada.

AndreBuitoni commented 1 year ago

Aula 13 - Renderização de Listas

Criamos no app.js uma variável contendo um array com três strings. Para renderizar essas strings como lista, criamos um componente que recebe esse array e executa o método .map() para renderizar a lista. Caso não haja nada na variável itens, então o componente envia um parágrafo informando o usuário que não há itens na lista.

App.JS Image

componente OutraLista.JS Image

Resultado no navegador Image

AULA FINALIZADA

AndreBuitoni commented 1 year ago

Aula 14 - State Lift

O state lifting, ou elevação do estado, ocorre quando movemos o state do componente atual para um componente acima, ou seja, um componente pai.

No nosso caso, deixamos o state no app.JS, componente pai de Saudacao.JS e de SeuNome.JS O usuário insere um nome em um input do componente 'SeuNome.js'. Então esse valor é carregado para o componente pai 'App.js' que o recebe e transfere para outra variável e então envia para outro componente filho, o 'Saudacao.js'

Interface do usuário Image

Componente filho, que recebe o nome - SeuNome.js Image

Componente pai, que transfere o valor para outro componente filho - App.js Image

Componente filho, que recebe o valor do componente pai - Saudacao.js Image

Ainda fiquei um pouco confuso sobre quando devemos utilizar essa técnica, mas acredito que com o tempo vou compreender melhor.

AULA FINALIZADA

AndreBuitoni commented 1 year ago

AULA 15 - Implementando o React Router

Nessa aula aprendemos a criar rotas com o react router. Para isso criamos três componentes principais da página (Contato.js | Empresa.js | Home.js ) e chamamos esses componentes no nosso App.js com ajuda do React Router. Image

Também criamos uma pasta chamada 'layout' para conter componentes que se repetem ao longo do projeto. Adicionamos nessa pasta: 1- uma barra de navegação (Navbar.js) contendo links para as três páginas principais do site e; 2- um footer simples apenas para demonstração. Image

OBSERVAÇÕES A implementação do ROUTER foi ok. Entretanto, ao tentar estilizar a página Footer.js utilizando um CSS exclusivo para essa página (Footer.module.css), descobri que os estilos desse arquivo CSS estavam sendo aplicados para o projeto todo. Coloquei no CSS que todos os parágrafos do footer deveriam ser em itálico, entretanto os parágrafos das páginas Home, Empresa e Contato também ficaram em itálico. Preciso ver isso mais tarde... Image

CSS Footer.module.css Image

Footer.js importando corretamente o CSS dele Image

Por exemplo, componente Contato.js não importa nenhum CSS. Mas ainda aplicou o estilo, conforme mostrado antes. Image

AULA FINALIZADA

AndreBuitoni commented 1 year ago

Aula 16 - React Icons

Aula curta para aprender a importar ícones com o React Icons Image

Resultado Image

AULA FINALIZADA

AndreBuitoni commented 1 year ago

AULA 17 - Apresentação do Projeto do Curso

Aula teórica mostrando o site que vamos criar do zero com React. Image

AULA FINALIZADA

AndreBuitoni commented 1 year ago

Aula 18 - Criando o Projeto do Curso

Repositório do PROJETO COSTS: https://github.com/AndreBuitoni/costs

---> Criamos um novo projeto. npx create-react-app costs cd costs

---> Instalamos as dependências necessárias para o projeto npm install json-server react-icons react-router-dom uuid

---> Iniciamos o projeto com: npm start

---> Limpamos alguns arquivos desnecassários que já vem com o React

---> Adicionamos alguns estilos gerais no arquivo de CSS

---> Importamos a fonte Open Sans do google fonts, colocando o link dela no index.html

---> Fizemos download de 3 imagens que serão necessárias para o projeto. Bem como o favicon. As imagens estavam no diretório do GitHub.

AULA FINALIZADA

AndreBuitoni commented 1 year ago

Aula 19

Passei horas tentando seguir o tutorial dessa aula, mas só consegui uma tela branca. As pessoas nos comentários também estavam tendo vários problemas e o "professor" nem pra responder ninguém.

Cansei de perder tempo com esse cara. Vou procurar outro curso. Desisto desse.