M1A_17.md

M1#A15 - Composição

Explicando composição

A ideia da função que é um componente ou que vá fazer uma composição é que faça o mínimo possível para conseguir funcionar.

Ex: a função abaixo precisa de dois valores para realizar a soma.

const sum = (x, y) => x + y;

sum(1, 2) // 3

Podemos utiliza-lá para fazer um composição somando mais de um número da seguinte forma:

sum( sum(1, 2), 3) // 6

Lembrando que a composição sempre será executada de dentro para fora. No exemplo abaixo começa somando 20 + 2 e depois + 3 o resultado final vai ser 25

sum( sum(20, 2), 3) // 20

A idéia da composição acima é utilizar dois valores para serem somados e podendo mesmo assim somar mais.

Exemplo composição no React

Vamos criar um botão de curtir

No aquivo button.js temos o nosso componenten botão

'use strict'

import React from 'react'

// const Button = ({ children, handleClick }) => (
//   <button className='main-button' onClick={handleClick}>
//     {children}
//   </button>
// )

const Button = ({ children }) => (
  <button>{children}</button>
)

console.log(Button);

export default Button

E agora vamos criar um botão de curtir

Temos o nosso componente Button:

'use strict'

import React from 'react'

const Button = ({ children, handleClick, nameClass }) => (
  <button className={"main-button " + `${nameClass}`} onClick={handleClick}>
    {children}
  </button>
)

export default Button

Criamos o arquivo like-button.js e nele importamos o nosso botão e colocamos ele como componente filho do nosso botão de like

'use strict'

import React from 'react'
import Button from './button'

const LikeButton = () => (
  <Button nameClass="curtir" handleClick={() => alert('like')}>
    Curtir
  </Button>
)

export default LikeButton

O seja o componente LikeButton passa a utilizar o Button e por isso consegue ter acesso as sua propriedades. Poden passar eventos e propriedades como foi mostrado.