npx create-react-app my-app --template typescript

ctrl + c = para a aplicação

no index.tsk tirar o reportwebvitals > no corpo e no import

excluir alguns documento:

App.css
App.teste.tsx
reportWebVitals.ts
setupTests.ts

e por fim, apagar os imports das docs apagado:

No App.tsx - tirar o import do css

estrutura react:

import

const com uma arrow function que retorna o que queremos

renderizar na tela

export para disponibilizar o componente para outros

se for mais de um elemnto adicionado no return, é necessário

que ela seja encapsulada dentro de uma div

Props : um componente pode receber ou não uma props

Props são as propriedades desse componente > interface

No react quando eu recebo uma prop ou quando eu vou utilizar

o código typescript eu preciso abrir e fechar chaves

n tem como tipar uma function, só uma variável

Para criar um router:

npm install react-router-dom@6

para usar uma imagem é preciso importar antes e colocar um nome para usar no corpo
do componente

tudo que for utilizar lógica ( variavel, if, funções) precisa estar dentro do
bigode

React.Fragment

import arquivo css

styled component = > css vira componente

global style => estilo de toda aplicação

npm install --save styled-components

npm i --save-dev @types/styled-components

pasta de config = > config para todo o projeto

import { createGlobalStyle } from 'styled-components';

GlobalStyle:

const GlobalStyle = createGlobalStyle`

body {
margin: 0px;
padding: 0px;
background-color: #333
}
`;

export default GlobalStyle

const AppBar = styled.div`

height: 80px;
background-color: aqua;
`;

estrutura base e vai fazendo

dentro do GlobalStyle eu posso selecionar qualquer tag

infomação importante no 39:34 da aula do dia 17-06

se estou com duvida de como funciona a divisão dos componentes, primeiramente monta
todo o html e depois secciona nos components

as images ficam numa pasta chamadas images dentro de uma pasta chamada assets que
fica no src

não consegui aplicar estilização no styled components com os filhos do nav

estilizar o botão do MuiButton pesquisar melhor

para color fontes é so linkar no index.html e então usar a fonte direto no styled

template string ${} ?

uando eu precisar mandar um elemento tipo icon, botão... inteiro, eu tipo react
React.ReactNode na interface
toda vez que eu precisar passar um componente ele é considerado um React.ReactNode

DIV WRAPPER >>>>> PESQUISAR (UMA DIV, SECTION... ORGANIZADORA DOS ICONS)

para ter uma imagem como props é preciso que seja string

props e ternario > amigos de duas opções, se precisar de mais, bora adicionar
direto para escolha personalizada

theme 1:04:30 - 1:22:05

além de instalar o mui e os icons, é necessário pegar o link das fontes para
adicionar no index

no Mui ao acessar o código completo você o que acontece por debaixo dos panos,

tem como colocar ThemeDefault do próprio Mui - light and dark

npm install eslint -D
npx eslint --init:
1: To check syntax, find problems, and enforce code style;
2: JavaScript modules(import/export)
3: React
4: Yes
5: Browser
6: Use a popular style guides
7: Airbnb
8: JSON
9: No