Aula 2

React Fragments (<> e </>) permitem agrupar múltiplos elementos JSX sem criar elementos extras no DOM, evitando "divs" desnecessárias.

Exemplo usando Fragment shorthand:

import React from 'react';

function Lista() {
  return (
    <>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </>
  );
}
          

No React, um componente é um pedaço de código reutilizável que representa uma parte da interface do usuário, ajudando a dividir a interface do usuário em partes menores e mais gerenciáveis.

Tipos de componentes do React

Componentes de Classe: Usa a sintaxe da classe JavaScript e tem acesso ao estado e ao ciclo de vida.

import React, { Component } from 'react';

class HelloWorld extends Component {
  render() {
    return (
      <div>
        <h1>Hello, World!</h1>
      </div>
    );
  }
}

export default HelloWorld;

Componentes Funcionais: São funções JavaScript simples que retornam JSX. Com o React Hooks, eles podem gerenciar o estado e os efeitos colaterais.

import React from 'react';

const HelloWorld = () => {
  return (
    <div>
      <h1>Hello, World!</h1>
    </div>
  );
};

export default HelloWorld;

Hooks são funções especiais que permitem que você use recursos do React, como estado e ciclo de vida, em componentes funcionais. Eles foram introduzidos no React 16.8 e eliminaram a necessidade de usar componentes de classe para gerenciar estado ou ciclos de vida.

• Permitem usar estado e outras funcionalidades do React em componentes funcionais.
• Facilitam o compartilhamento de lógica entre componentes.
• Reduzem a complexidade dos componentes ao evitar o uso de classes.

Principais Hooks

• useState: Gerencia estado local em componentes funcionais.
• useEffect: Manipula efeitos colaterais (side Effects), como requisições de dados ou manipulação do DOM.
• useContext: Acessa valores do contexto de forma mais simples.
• useReducer: Gerencia estados complexos usando um padrão semelhante ao Redux.
• useRef: Permite criar referências mutáveis que sobrevivem entre renderizações.

Por enquanto, vamos aprender os seguintes Hooks do React:

Estados são uma forma de gerenciar dados que podem mudar ao longo do tempo em um componente React. Sempre que o estado é alterado, o componente é re-renderizado para refletir essas mudanças na interface do usuário.

Os estados são usados para criar interfaces dinâmicas e interativas, como alterar o conteúdo exibido com base em ações do usuário, armazenar informações temporárias ou gerenciar inputs de formulários.

Em aplicações modernas, estados são usados em dashboards para atualizações em tempo real, e-commerces para gerenciar carrinhos de compras e SPAs (Single Page Applications) para navegar sem recarregar a página.

Os efeitos colaterais (side effects) podem ser usados para lidar com efeitos colaterais, como requisições de dados, manipulação do DOM e manipulação de APIs externas.

Exemplo 1

import React, { useState, useEffect } from "react";

const Timer = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    setTimeout(() => {
      setCount((count) => count + 1);
    }, 1000);
  });

  return  <h1>Isso está se repetindo {count} vezes!</h1>;
}

export default Timer;

Exemplo 2

import React, { useState, useEffect } from "react";

function Relogio() {
  const [horario, setHorario] = useState(new Date());

  useEffect(() => {
    // Atualiza o horário a cada segundo
    const intervalo = setInterval(() => {
      setHorario(new Date());
    }, 1000);

    // Cleanup: Limpa o intervalo ao desmontar o componente
    return () => clearInterval(intervalo);
  }, []); 
  // Executa apenas uma vez, na montagem do componente

  return (
    <div>
      <p>Relógio Digital<p>
      <p>
        {horario.toLocaleTimeString()}
      <p>
    <div>
  );
}

export default Relogio;