---
# System prepended metadata

title: Playlist Reactjs - Resumo

---

# 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:

```javascript=
 function Counter() {
     return(
     <div>
     
     </div>
     )
 }
```
- *Exportar componente* 
 ```javascript=
 export default Counter;
 ```
 
- *Importar componente* 
```javascript=
import Counter from './Counter'
```
- *Usar componente*
Usar como uma tag
```javascript=
< Counter />
```
- *Usar atributo*

enviar
```javascript=
< Counter value={conter}/>
```
receber
```javascript=
<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
```javascript=
<Route path="*" component={NotFound}
```
**path="*" = path generico**


- imagem 
**Importar**
```javascript=
import ... from 'rota pasta public'
```
**Usar**
```javascript=
<img src={nome img} alt="" />
```

- importar link e usar como tag a para ajudar na navegação
```javascript=
    import { Link } from 'react-router-dom'
```

```javascript=
    <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. 
```javascript=
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**
 ```javascript=
 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 
```javascript=
const [Variavel, setFunçãoQueAlteraAVariavel] = useState(valorInicial)
```
- Usar

```javascript=
<div> {Variavel} </div>
```

**Podemos criar variaveis:**
- Number.
- String.
- Boolean = não podem ser renderizadas, a menos que colocamos operadores {operador ternario}. 
```javascript=
? '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
```javascript=
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:
```javascript=
    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:
```javascript=
Const Container = styled.div`
backgrund-color: ${props => props.corDoFundo}
` 


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