Criando aplicações reutilizáveis com React

Nos últimos posts vimos o que é e por que utilizar o React, como ele funciona e como começar a desenvolver aplicações em React de forma rápida e simples.


Agora, iremos ver como reutilizar os nossos componentes, já que essa é uma das grandes vantagens do React e não utilizar isso em nosso favor, fará com que nós percamos tempo reescrevendo códigos repetidos.

Pode mandar ver!

Identifique o que pode ser reutilizável

Antes de começarmos a desenvolver nossa aplicação, eu aconselho criar um mockup do nosso site. Dessa forma, fica mais fácil identificarmos as áreas que poderão ser reutilizadas.

Vamos pegar a página de um vídeo do YouTube como exemplo:

Você consegue identificar o que poderia ser reutilizável nessa página?

Vamos separar essa página em vários componentes:

Behold my painting skills!

De cara, já conseguimos identificar vários componentes, agora resta nós identificarmos quais desses estão presentes em outras páginas.

Na página inicial, podemos ver vários thumbs de vídeos. Então o <Thumb /> é um candidato para um componente reutilizável. E não podemos deixar de citar o <Button /> que está pra todo lado.

Ao entrar na página de algum canal, vemos de cara um vídeo em destaque e o botão de Inscrever-se. Então o <VideoPlayer /> e <SubscribeButton /> são outros.

Criamos esses componentes separadamente e enviamos as informações necessárias para que esses componentes quando formos reutilizá-los.

Mas se você for um hipster, pode criar um .html pra cada vídeo do youtube :)

Com os componentes reutilizáveis identificados, mão na massa!

O thumbnail, por exemplo, aparece em vários lugares, em vários tamanhos e claro, com imagens diferentes, de acordo com o vídeo. Então, de cara, esse componente deverá receber duas propriedades: size e image

O resultado seria algo semelhante a isso:

Então, sempre que quisermos reutilizar esse componente, basta nós fornecermos a ele duas propriedades, o tamanho (nome da classe CSS) e o endereço da imagem.

Vamos supor que recebemos da API do Youtube um array de Vídeos e queremos criar nossa <VideosList />:

E nosso VideoListItem:

Ps: lembre-se de importar os componentes antes de reutilizá-los!
Ex: import Thumb from ‘./Thumb’

E para criar outros componentes reutilizáveis, é só seguir o mesmos conceito!


Pra finalizar, uma pergunta:

Vocês gostariam de um tutorial completo e detalhado onde criaríamos a aplicação acima, usando o Youtube e sua API? Responda nos comentários, ou me mande uma mensagem no Twitter.


Se gostou, ajude dando aquela compartilhada!

Me adicione nas redes sociais para trocarmos uma ideia sobre React ou caso você tenha alguma dúvida me mande uma mensagem, e te responderei o mais rápido possível:

Twitter: KadoBOT

Facebook: ReactJS Brasil

Github: KadoBOT

LinkedIn: Ricardo Ambrogi

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.