Aprendendo React
Published: 2023-02-04 19:16:58

React é uma biblioteca amplamente utilizada para criação de interfaces, especialmente para construção de aplicações de única página (SPAs). Ele se baseia em componentes e usa JSX para renderizar HTML. É possível adicionar React a projetos já existentes.

## JSX:
JSX permite escrever HTML dentro do JavaScript e executar funções dentro dele. Valores podem ser inseridos em atributos de tags de forma dinâmica. No entanto, o retorno deve conter apenas um elemento-pai.

---

## COMPONENTES:
Os componentes permitem dividir a aplicação em partes distintas e são arquivos JSX. Por convenção, eles são adicionados a uma pasta chamada "components" e usam PascalCase como padrão de nomenclatura. Componentes também podem ser importados dentro de outros componentes.

> para usar imagens no seu componente ele precisa ser importado

<h6>Ciclo de vida</h6>

O ciclo de vida de um componente começa quando é criado na memória. Durante a renderização, o componente está "vivo". A cada alteração feita nele, um novo ciclo é iniciado. Por fim, o componente é removido quando o seu ciclo de vida chega ao fim.

---

## INSTALAÇÃO COM VITE:
A instalação com Vite cria um projeto React já configurado. É necessário ter o Node e o NPM instalados. Para criar o projeto, execute `npm create vite@latest` depois rodamos o `npm i`, para rodar a aplicação: `npm run dev`. O ponto de partida da aplicação é o arquivo index.html, que contém o elemento raiz (id: root).

---

## PROPS:
As props são valores passados para os componentes e tornam-nos dinâmicos. Elas podem ser passadas como atributos HTML e, para componentes com múltiplas propriedades, é possível passar um objeto como parâmetro (por exemplo, {nome, idade, profissão}). 

```
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
```

Os tipos das props também podem ser definidos (para validações durante o desenvolvimento) através de um objeto propTypes dentro do componente. Valores padrão e a obrigatoriedade de uma propriedade também podem ser definidos.

```
import PropTypes from 'prop-types';

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

Greeting.propTypes = {
  name: PropTypes.string
};
```
<h6>Como fazer a conexão de um filho para o pai?</h6>
Você pode também transmitir métodos através de props. Dessa forma, um componente filho pode invocar um método do componente pai. Isto é realizado através de um evento, com a mesma sintaxe de props normais. Além disso, um componente pai pode ter vários métodos.

```
  function meuEvento(){
    console.log(`Evento ativado`)
  }

  function segundoEvento(){
    console.log(`Evento desativado`)
  }

  <Button event={meuEvento} text="Ligar evento" />
  <Button event={segundoEvento} text="Desativar evento" />
```

```
function Button(props){
  return <button onClick={props.event} >{props.text}</button>
}
```
Para passar informações de um componente filho para um componente pai no React, usamos parâmetros. Primeiro, definimos uma função no componente pai que irá manipular essas informações. Em seguida, chamamos essa função no componente filho e passamos os dados desejados como argumento. Dessa forma, conseguimos transmitir informações de forma precisa e controlada entre os componentes.

pai:
```
const nomeFuncao = ( txt: string ) =>{
 alert(txt)
}

<Filho clickFn={ nomeFuncao } />
```
filho:
```
type Props = {
 clickFn: ( txt: string ) => void 
}

export const Filho = ({ clickFn }: Props) => {
 const outraFuncao() =>{
  clickFn('meu parametro')
 }
 
 // nao colocamos a função clickFn diretamente aqui porque 
 ela seria executada antes do evento acontecer
 <Button onClick={outraFuncao} />
}
```

<h6>Prop Children</h6>
define aonde os elementos filhos que estão encapsulados no componente irão ficar

```
function Container(props) {
  return (
    <div>
      {props.children}
    </div>
  );
}
```

---

## FRAGMENTES
Os Fragmentos permitem criar componentes sem um elemento-pai, simplificando os nós do DOM. Eles são usados com uma tag vazia `<> </>`.

---

## EVENTOS NO REACT

Eventos em React são semelhantes aos eventos do DOM, por exemplo o evento "click". Eles são vinculados a uma tag e uma lógica é atribuída ao evento através de um método criado no componente. É importante utilizar o método `preventDefault()` sempre que se usa o evento `submit`, pois ele impede que a execução padrão do evento seja executada e permite que o código logo abaixo seja executado.

> O `toggle` é um termo usado quando uma ação pode ter resultados opostos ao ser executada. Por exemplo, ao clicar em um botão, ele pode alternar entre "ligado" e "desligado". A ideia é que a mesma ação gere resultados diferentes de acordo com o estado anterior. O toggle é amplamente utilizado em interfaces de usuário para alternar entre opções e configurações.

---

## RENDERIZAÇÃO

<h6>Renderização por condição</h6>

A renderização permite que você exiba um conteúdo baseado em uma condição, como um `if` e `else`. Para fazer isso, é preciso envolver o código com chaves `{}`. O código dentro dessas chaves é executado como JavaScript. Além disso, é possível usar o `estate` para criar as condições na renderização.

Uma maneira mais simplificada de fazer condição no REACT é usando:

```
{seuState &&(
  <div>
    <p>Sua renderização</p>
  </div>
)}
```
ele vai renderizar seu codigo caso o valor do state seja true

<h6>Renderização de listas</h6>
Em React, para renderizar listas, geralmente usamos um `array` de objetos e o método `map` para percorrê-los. É possível também combinar operadores condicionais com a renderização de listas, para exibir diferentes elementos de acordo com as condições.

```
{seuArray.length > 0 ? 
/* caso a condição for true: */ 
 (
  seuArray.map((item, index) => <p key={index}>{item}</p>)
 ) :
/* caso a condição for false: */ 
 (
  <p>nao tem item na lista</p>
 )
}
```
Ao trabalhar com o método `map` em React, é necessário que cada elemento tenha uma `key` única para identificá-lo. A` key` serve para que o React possa gerenciar cada elemento de forma eficiente e evitar erros. Ela deve ser uma `string` ou `número` que seja única entre todos os elementos da lista.

---

> O operador `&&` é usado para avaliar duas expressões e retornar a primeira expressão se ela for verdadeira, e `null` caso contrário. Não há suporte para um bloco else quando se usa o operador `&&`.
> Já o operador ternário `(condition ? expressionIfTrue : expressionIfFalse)`, que é outra forma de escrever condições em JavaScript, sempre exige a presença de uma expressão para o bloco else após o `:`. O que vem após o `:` será avaliado como a expressão para o bloco `else`.

---


## REACT ROUTER
O React Router permite criar rotas personalizadas para as páginas do seu aplicativo React. Cada página é representada por um componente único. Ao usar o React Router, é possível navegar entre as páginas sem recarregar toda a página, mantendo assim uma experiência de navegação fluida para o usuário. Além disso, o React Router permite mudar tanto partes do layout quanto toda a página, de acordo com suas necessidades.

<h6>Estrutura de pastas</h6>
Para criar um aplicativo com várias rotas de página, vamos primeiro começar com a estrutura do arquivo.

Dentro da pasta `src`, criaremos uma pasta `pages` com vários arquivos:

src\pages\:
- Layout.js
- Home.js
- Blogs.js
- Contact.js
- NoPage.js

Cada arquivo conterá um componente React muito básico.

> https://www.devmedia.com.br/react-js-criando-rotas-com-react-router-dom/42901

---

## REACT ICONS
São um pacote de ícones externos que podem ser adicionados ao seu projeto através do NPM. Eles permitem adicionar ícones ao projeto com uma sintaxe intuitiva e semelhante a de um componente:
`<FaIcone />`

---