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

Mas para vermos isso funcionamos, vamos criar uma aplicação react com o npx create-react-app nome_app

Lá na pasta src, crie um arquivo Car.js com o código abaixo:

import React, { Component } from 'react';

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

E para usar o componente, usamos o import no arquivo que vai usar o componente, no nosso caso, o App.js.

import logo from './logo.svg';
import './App.css';
import Car from './Car.js';

function App() {
  return (
    <div className="App">
      <h1><Car /></h1>
      <button><Car /></button>
    </div>
  );
}

export default App;