M1A_11.md

M1#A11 - Renderizando componentes com funções puras

Maneiras de renderizar componentes

No react temos algumas maneiras de renderizar os componentes

• React.createclass() : é usado no ecmascript 5
• Utilizando Funções puras
• Class : No ES6

Sobre funções puras

A função pura sempre retorna um valor sem modificar a aplicacão e a única coisa que dependende são os parâmetros passados para ela

Ex: Função pura

function pureFunction(a, b){
	return a + b
}

pureFunction(1, 2); // 3

Ex: Função impura Apesar de estar retornando um mesmo valor a função está fazendo uma alteração no obj externo

var obj = { a: 1, b: 2 }

function impureFunction(a, b){
	obj.a = a + b
	return a + b
}

impureFunction(1, 2); // 3
// Aqui a função está retornando um valor aleátorio

obj // { a: 3, b:2 }

function impureFunction2(a, b){
	return Math.random(a + b)
}

impureFunction2(1, 2) // 0.431....

No React a ideia de função pura é que o componente render seja puro e só retorne o componente.

Retornando componentes puros com Arrow functions - ES6

Em Arrow functions não é preciso declarar o return caso vc só tenha uma linha e um valor ou não declare {} pois ela já faz isso automáticamente. Ex:

const meuNome = () => 'Luciano'.

Caso queria deixar mais legível você pode escrever dessa forma:

const meuNome = () => (
	'Luciano'
)

O this em arrow functions pertece ao escopo em que ela se encontra.

Caso vc queira acessar props basta você passa um argumento na Arrow function

const Title = (props) => (
  <h1>Olá {props.name + '' + props.lastname}</h1>
)

Usando template string

Em ES6 podemos usar os backticks - Template strings quando utilizamos os `` assim facilitando na hora de concatenar e deixando nosso código mais legível. Dentro do ${nome} pode ser passado variáveis que será retornando além de espaços. Tudo dentro do bloco ${} é concatenado como se fosse string. Ex:

const meuNome = (nome) => (`Meu nome é ${nome}. Olá`)

menuNome('Luciano') // Meuno nome é Luciano. Olá

Utilizando no componente Title

const Title = (props) => (
  <h1>Olá {`${props.name} ${props.lastname}`}</h1>
)

Short Hand Notation no argumento pegando de props

Ao invés de passar props como argumento, dessa forma:

const Title = (props) => (
  <h1>Olá {`${props.name} ${props.lastname}`}</h1>
)

Nós podemos usar um shortHand notation passndo as propriedades em forma de objeto da seguinte forma:

const Title = ({name, lastname}) => (
  <h1>Olá {`${name} ${lastname}`}</h1>
)

getDefaultProps agora é defaultProps um método estático do função

Como não estamos usando o método createClass podemos utilizar o método defaultProps

const Title = ({ name, lastname }) => (
  <h1>Olá {`${name} ${lastname}`}</h1>
)

Title.defaultProps = {
  name: 'Desconhecido',
  lastname: 'Sem sobrenome'
}

Código anterior sem ES6

const Title = React.createClass({
  getDefaultProps: function () {
    return {
      name: 'Desconhecido',
      lastname: 'Sem sobrenome'
    }
  },

  render: function () {
    return (
      <h1> Olá { this.props.name + ' ' + this.props.lastname } </h1>
    )
  }
})

Código refatorado com ES6

const Title = ({ name, lastname }) => (
  <h1>Olá {`${name} ${lastname}`}</h1>
)

Title.defaultProps = {
  name: 'Desconhecido',
  lastname: 'Sem sobrenome'
}