Componentes React.js

Afluentes: Desenvolvimento Front-end II, Usabilidade, desenvolvimento web, mobile e jogos

Componentes React

Os componentes react são como funções que retornam elementos HTML. Eles são independentes e reutilizáveis. Temos dois tipos básicos de componentes, os componentes Classes e os componentes Funções.

Componente Classe

Para usar um componente, precisamos herdar a classe Component de React React.Component e sobrescrever o método render() que retorna um HTML.

class Car extends React.Component {
  render() {
    return <h2>Hi, I am a Car!</h2>;
  }
}

Para a aplicação reconhecer o componente chamado Car criado no código acima, usamos uma sintaxe tipo HTML: <Car />. Por exemplo:

ReactDOM.render(<Car />, document.getElementById('root'));

Componente Função

As funções componentes também retornam html. Por exemplo, temos uma função chamada Car

function Car() {
  return <h2>Hi, I am also a Car!</h2>;
}

Os componentes precisam iniciar com uma letra maiúscula.

Para chamar a função, fazemos o mesmo que chamar uma classe:

ReactDOM.render(<Car />, document.getElementById('root'));

Componente Construtor

O componente construtor é uma função componente, mas ela é específica da classe. Ela é usada para inicializar as propriedades dos componentes:

class Car extends React.Component {
  constructor() {
    super();
    this.state = {color: "red"};
  }
  render() {
    return <h2>I am a {this.state.color} Car!</h2>;
  }
}

Props

Outra forma de pegar alguns componentes de propriedades é usar o props. Os props são como argumentos de funções que são recuperados dentro do código.

class Car extends React.Component {
  render() {
    return <h2>I am a {this.props.color} Car!</h2>;
  }
}

ReactDOM.render(<Car color="red"/>, document.getElementById('root'));

Também é possível usar um componente aninhado dentro de outro componente.

class Car extends React.Component {
  render() {
    return <h2>I am a Car!</h2>;
  }
}

class Garage extends React.Component {
  render() {
    return (
      <div>
      <h1>Who lives in my Garage?</h1>
      <Car />
      </div>
    );
  }
}

ReactDOM.render(<Garage />, document.getElementById('root'));

Arquivos com Componentes

Colocar componentes em arquivos separados é uma boa prática para o reuso de código. Para isso, é necessário criar um arquivo com extensão .js, com o componente criado e no final do arquivo adicionar a linha export default MeuComponente;.

import React from 'react';
import ReactDOM from 'react-dom';

class Car extends React.Component {
  render() {
    return <h2>Hi, I am a Car!</h2>;
  }
}
export default Car;

E para usar o componente, usar o import.

import React from 'react';
import ReactDOM from 'react-dom';
import Car from './App.js';

ReactDOM.render(<Car />, document.getElementById('root'));