# Playlist: ReactJs

autora: Isabela Silva Sousa

[toc]

## Primeiro projeto
>[color=lightblue]
>- Localizar a pasta onde seu projeto será aberto.
>- **Instalação um terminal que ajuda na valocidade e leitura(npm init -y).**
>- Temos o domínio de em que porta o projeto será aberto.
>- As configurações de react são localizadas na tag root.
>- **Um componente de forma resumida é uma função que retorna App.**
>- Todo componente retorna uma tag principal.
>- JSx é mais rigoroso, portanto todas as suas TAGs tem de ser fechadas.
>- **Para fazer a importação de um campo é usado import ao invés de link.**
>- **É possível usar variáveis do JS np HTML.**
>- Com a barra (/) temos acesso a recursos externos fora do App.js.

## Componentes
>[color=darkblue]
>>[color=lightblue]-- **Um componente além de retornar html/js pode guaradar informações criando variáveis de Estado.**
>-- Quando uma variável de Estado é alterada o site recarrega possibilitando assim alterar o valor da mesma.
>-- Para que uma variável seja alterada basta clicar em incrementar e passar seu novo valor.
>-- **const [counter, setCounter] = useState(o);**
>(linha de criação de viriável.)
>-- **Para fazer a alteração chama-se setCOunter.**
>-- **const increment é usado para chamar set Counter e alterar o valor da variável.**
>-- **const increment é usado para chamar set Counter e alterar o valor da variável.**
>-- O nome do documento exportado deve estar em letra maiúscula.
>-- Passa-se o valor de uma variável pra outra, dentro do Prop (variáveis de função) é onde se acessa o estado.
>-- **Reset usada para limpar o computador.**

## Roteamento
>[color=lightblue]
>- Podem ser utilizadas várias utilizações de pasta.
>- **Para ter acesso a outras páginas criadas é preciso configurar a navegação do site, fazendo o uso de import, BrowserRounter, Swicth, Route para importar os componentes.**
>- notFound para fazer com que a página mostre algo quando encontrar a página.

## Estilização
>[color=lightblue]
>- A estilização pode ser feita por css e style components.
>- No css é preciso lincar para dar inicio nas estilizações.
>- Dependendo da versão do react que está sendo usada o sistema de lincagem para se chegar até a imagem muda.
>- Podemos renderizar uma formatação e usá-la no lugar da TAG.
>- O componente estilizado pode ser usado quantas vezes forem precisas.
>-Pelo styled.js é possível aplicar para cada um , uma formatação não em geral como no css.

## Renderização
>[color=darkblue]
>>[color=lightblue]
>>- **Renderização Estática.**
>-- Porque não muda ela sempre será a mesma, não existe a possibilidade de renderizar outra.
>-- Essa habilidade no entando pode ser adicionada.
>>- **Renderização Estática.**
>-- Onde é adicionada uma variável para que o valor seja passado.
>-- A variável deve estar entre as chaves.
>>- **Renderização por componentes.**
>-- Onde ele pode ser reaproveitado.
>-- Para alterar a estrutura estática pode-se apenas passar um único atributo.
>> - **Renderização condicional.**
>-- Vai indicar se o componente vai ser devolvido ou não.
>-- Podem ser usados operadores lógicos, boolean para indicar as situações que devem ser consideradas.
>-- O operador ternário usado para retornar um componente ou outro com true or false.
>> - **Renderização em repetição.**
>-- repetição porque tem-se uma série de componentes, um await e se retorna com vários itens.

## Váriaveis de estado
>[color=lightblue]
> -- São o conjunto de valores que determinam o estado de um objeto e a situação atual que ele se encontra.
> --**Normalmente são criadas usando a variável e a função que altera ela, juntas.**
> **(Variáveis de estado boolean não são renderizadas pelo react.)**
> -- Para trabalhar com todos os tipos primitivos e eles serem renderizados, pode-se usar o operador ternário no boolean e transformar date em string.
> -- Não é possível renderizar diretamente um objeto paara conseguir tem que se acessar o valor primitivo.
> -- Para que o await seja exibido de um forma mais visual ele tem que ser convertido em componente usando o map.
> -- Não é possível renderizar 2 await ao mesmo tempo, porém consigo escolher um ou mais de seus valores para ser renderizado.

## Props
>[color=lightblue]
>- É a capacidade do react de permitir que um componente envie informações para outro componente, é que ele pode retornar.
>- **Sempre que for necessário referenciar uma variável no arquivo JSx deve-se estar dentro das {}.**
>- Os valores de renderização precisam ser descritos da mesma forma para que sejam retornadas.
>- É possível passar um objeto para um componente, dentro do props deve ser acessado o objeto e a variável que será retomada.
>- O await de objeto pode ser renderizado mapeando-o no props e passando os valores de retorno.
>- Para que o outro componente responda podemos usar input e vincula-lo com os valores recebidos.

## Eventos
>[color=lightblue]
>- É a capcidade do react de vincular funções a eventos que ocorrem no JSx.
>- O estdo é o conjunto de caracteres de alguma coisa, sempre que algo mudar nesse conunto o estado muda.
>- Pelo processo de carregar do react podem ocorrer erros e atrasos na forma como os componentes funcionam na tela.
>- **Para evitar esse problema, pode-se usar monitores de estado(useEffect(somar)) onde a função é sempre chamada quando o esatdo do componente é atualizado.**

## Parâmetros entre páginas
>[color=lightblue]
>- Para fazer o pareamento entre páginas sem o link, tem-se que usar um evento click e um compilato de funções.
>- Configurar como rota com o uso de parametros.
>- Enviar objetos usando a tag button.
>- Enviado pelas propriedade location, state.
>- **Usando diretamente o link é possível passar um objeto composto.**

## Props em Styled Components
>[color=lightblue]
>- **Também pode-se enviar informações para os componentes.**
>- **Por meio de uma função anonima que recebe props.**
>- **Podendo trabalhar com estilização.**