Aprendendo React

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

Ciclo de vida

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
};

Como fazer a conexão de um filho para o pai?

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} />
}

Prop Children

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

Renderização por condição

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

Renderização de listas

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. Akey 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.

Estrutura de pastas

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 />