Aula 2

Tipos de Componentes

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;

Criando um componente funcional

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;

        

O que são Props?

Props (abreviação de "properties") são uma forma de passar dados de um componente pai para um componente filho em React.

import React from 'react';

const Saudacao = (props) => {
  return (
    <div>
      <h1>Olá, {props.nome}!</h1>
    </div>
  );
};

export default Saudacao;

        

O que são estados?

Estado: Uma maneira de armazenar dados que podem mudar ao longo do tempo em um componente React.

import React, { useState } from 'react';

const Contador = () => {
  const [contador, setContador] = useState(0);
  const incrementar = () => {
    setContador(contador + 1);
  };

  return (
    <h1>Contador: {contador}</h1>
    <button onClick={incrementar}>Incrementar!</button>
  );
};

export default Contador;