Componentes de Reacção

Componentes são como funções que retornam elementos HTML.

Componentes de Reacção

Componentes são bits de código independentes e reutilizáveis. Servem o mesmo propósito que as funções JavaScript, mas funcionam isoladamente e retornam HTML através de uma função de render().

Componentes vêm em dois tipos, Componentes de Classe e Componentes de Função, neste tutorial vamos concentrar-nos em Componentes de Classe.

Criar um Componente de Classe

Ao criar um componente de Reacção, o nome do componente deve começar com uma letra maiúscula.

O componente tem de incluir a instrução extends React.Component, esta instrução cria uma herança ao React.Component, e dá ao componente acesso às funções do React.Component.

O componente também requer um método render(), este método retorna HTML.

Exemplo

Criar um componente de Classe chamado Car

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

Agora a sua aplicação React tem um componente chamado Carro, que retorna um elemento <h2>.

Para usar este componente na sua aplicação, use uma sintaxe semelhante à do HTML normal:<Car />

Exemplo

Exibe o componente Car no elemento “raiz”:

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

Exemplo “

Criar um Componente de Função

Aqui está o mesmo exemplo que acima, mas criado usando um componente de Função em vez disso.

Um componente de Função também retorna HTML, e comporta-se praticamente da mesma forma que um componente de Classe, mas os componentes de Classe têm algumas adições, e serão preferidos neste tutorial.

Exemplo

Criar um componente Função chamado Car

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

A sua aplicação React tem novamente um componente Automóvel.

Refer to the Car component as normal HTML (excepto em React, os componentes devem começar com uma letra maiúscula):

Exemplo

Exibir o componente Car componente no elemento “raiz”:

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

Exemplo “

Component Constructor

Se existir uma função constructor()/code> no seu componente, esta função será chamada quando o componente for iniciado.

A função construtor é onde inicia as propriedades do componente.

Em React, as propriedades do componente devem ser mantidas num objecto chamadostate.

p> Você aprenderá mais sobre state mais tarde neste tutorial.

A função construtora é também onde honra a herança do componente pai ao incluir a declaração super(), que executa a função construtora do componente pai, e o seu componente tem acesso a todas as funções do componente pai (React.Component).

Exemplo

Criar uma função construtora no componente Carro, e adicionar uma propriedade de cor:

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

Utilizar a propriedade de cor na função render():

Exemplo

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

Exemplo de execução “

Props

Uma outra forma de manipular as propriedades dos componentes é utilizando props.

Props são como argumentos de função, e enviamo-los para o componente como atributos.

Aprenderá mais sobre props no próximo capítulo.

Exemplo

Utiliza um atributo para passar uma cor ao componente automóvel, e utiliza-o na função render():

class Car extends React.Component { render() { return <h2>I am a {this.props.color} Car!</h2>; }}ReactDOM.render(<Car color="red"/>, document.getElementById('root'));

Exemplo “

Componentes em Componentes

Podemos referir-nos a componentes dentro de outros componentes:

Exemplo

Utilizar o componente Carro dentro do componente Garagem:

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'));

Exemplo de Execução “

Componentes em Ficheiros

Reagir é tudo sobre a reutilização de código, e pode ser inteligente inserir alguns dos seus componentes em ficheiros separados.

Para fazer isso, crie um novo ficheiro com um .js extensão do ficheiro e coloque o código dentro dele:

Nota que o ficheiro deve começar por importar React (como antes), e tem de terminar com a declaração exportar Carro padrão;.

Exemplo

Este é o novo ficheiro, chamamos-lhe “App.js”:

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;

Para poder utilizar o componente Carro, tem de importar o ficheiro na sua aplicação.

Exemplo

Agora importamos o “App.js” na aplicação, e podemos utilizar o componente Automóvel como se tivesse sido criado aqui.

import React from 'react';import ReactDOM from 'react-dom';import Car from './App.js';ReactDOM.render(<Car />, document.getElementById('root'));

Exemplo de execução “