# Playlist Reactjs - Resumo
>[color=#055b5c]**Autor:** Letícia Rodrigues da Silva
**Número:** 25
**Turma:** IndoD

[toc]

## 1

- configuração Visual code;
- abrir projeto no visual code;
- podemos mudar a porta que o react vai rodar;
- o react tem apenas um arquivo html que faz um vinculo com o arquivo index.js;
- react é baseado em componentes, e app o componente inicial;
- import e export são comandos atuais do JS;
- todo componente precisa retornar uma tag principal ou seja uma tag mãe;
- html = class; JS = ClassName;
- tag style não funciona muito bem no react, como no html;
- todas as tegs tem que fechar no react;
- em js as imagens tem que ser passadas como tag ou usadas pelo public;
- em js o sistema de pastas também funcionam;
- podemos usar recusos externos tambem, como fotos da web;

## 2

**Componentes:**
Componentes são funções que retornam um bloco de html/jsx.

**Estado:** momento atual das informações que o componente pode armazenar, já que ele pode guardar informações e podem ser alteradas consequentemente mudando o estado e chamando a função novamente.
- Podemos ter mais de uma variavel de estado
- São criadas como const(constante)
- useState = Função
- Vinculo de uma função com uma tag é dado atravez das funções que inciam com "ON"

**Relacionamento de componentes:**
- *Criar componente:*
ex:

 function Counter() {
     return(
     <div>
     
     </div>
     )
 }

- *Exportar componente*

 export default Counter;

- *Importar componente*

import Counter from './Counter'

- *Usar componente*
Usar como uma tag

< Counter />

- *Usar atributo*

enviar

< Counter value={conter}/>

receber

<div> {props.value} </div>

- *Conversa de pai e filho*
função de alta ordem

## 3

- pastas, abrir arquivo
- nome do componenete sempre tem que iniciar com a letra maiuscula
- configurar navegação do projeto (routes)
- dependencia {react-router-dom}
- exact{true} = fazer uma comparação exata de rota
- route notFound

<Route path="*" component={NotFound}

**path="*" = path generico**

- imagem
**Importar**

import ... from 'rota pasta public'

**Usar**

<img src={nome img} alt="" />

- importar link e usar como tag a para ajudar na navegação

    import { Link } from 'react-router-dom'

    <Link to="/nome pagina"> ... </Link>

## 4
Temos varias formas de estilizar componentes, entre elas usando o CSS ou o npm styled components.
- **Css**

Usamos o import para importar o arquivo CSS e programamos o arquivo em css normalmente.

import './nome arquivo css'

Temos que criar o arquivo dentro da mesma pasta onde a estilização será feita.
Para criar uma classe utilizamos 'class name' e não apenas 'class' como no HTML.

**Imagens**
- background-image: url('rota pastas')
Em algumas versões a imagem deve ser pega do public, e usando a barra para referenciar as pastas
**pode ocorrer conflitos de nome**

- **Styled**
**Import**

 import styled from 'styled-components'
 
 const nomeVariavel = styled.tagrepresentada`
  formatação 
 `;

usamos como componente/tag

**import deve ser sempre declarado no inicio do arquivo**

& = simbolizar a div/tag
**podemos criar classes também**

## 5
**Renderização:** Exibir informações para o usuario
- **Renderização estatica:** não muda, ele sempre vai renderizar a mesma coisa.
- **Renderização variavel:** pode ser alterada, se existir uma função.
- **Renderização por componente:** criar um componente e importar, porém ele vai continuar estartico, se não for configurado para variavel.
- **Renderização condicional:** se o componente vai ser exibido ou não atravez de operadores.
- **Renderização repetição:** coleção de objetos que podem ser convertidos pra componentes.
map = função que mapeia componentes
**props**

## 6

**Estado=** quando os valores se alteram, gerando assim um novo estado;
- geralmente são criadas em par

const [Variavel, setFunçãoQueAlteraAVariavel] = useState(valorInicial)

- Usar

<div> {Variavel} </div>

**Podemos criar variaveis:**
- Number.
- String.
- Boolean = não podem ser renderizadas, a menos que colocamos operadores {operador ternario}.

? 'sim' : 'Não'

- data = é renderizada apenas quando é convertida para string.
- objeto = tem que chegar no nivel primitivo para ser renderizados, porém podemos usa-los em componentes.
- array = convertar para componente usando a função map(pode ser renderizado, porém tudo fica grudado).
- array objetos= não consegue renderizar.

**concatenação = não precisa do operador +**
ex: concatenação + array

const [g, setG] = useState({
{nome: 'Laura', profissao:'Dev'}
})

return(
<div> {g[1].nome / {g[1.profissao]}} </div>
)

## 7

**Props:**
- Capacidade do react de permitir que um componente possa enviar informações para outro componente, e que o mesmo possa retornar informações (conversa entre componentes).
- São os parametros da função

*sempre que quiser referenciar uma variavel dentro de um codigo js ela deve estar dentro de {}.*

## 8

**Eventos:**
- Capacidade do react de vincular funções a eventos que ocorrem no jsx.
- onClik, onChange
- O react não permite que você, chame uma função que altera o estado de uma variavel e logo em seguida chame uma função que estará usando esse valor atualizado. a não ser que use o useEffect
ex:

    useEffect(() => {
    nome da função(); 
    }, [variaveis que quer retornar])

*Podemos criar efeitos que não monitoram ninguém, (efeitos iniciais)*

## 9
**Roteamento/passagem de paramentro:**
- goBack: Voltar a pagina anterior
- push
- link
*Podemos usar as funções link e push para redirecionar ou enviar parametros*
*é possivel enviar objetos mais complexos usando o push ou o link*

## 10
**Eviar argumentos/propriedades para o styled-components**
Ex:

Const Container = styled.div`
backgrund-color: ${props => props.corDoFundo}
` 


export default function Contact(props) {
    return(
    <container corDoFundo="#37E">
    <div> Laura </div>
    </container>
    )
}