Criação de componentes

Ao criar um app um dos primeiros planejamentos a serem feitos é a interface e toda sua usabilidade. E isto é feito de diversas formas, utilizando Figma outras ferramentas para criação de interface. Mas ao terminar esta etapa surge a próxima parte que é o desenvolvimento da interface no código. E aqui nos deparamos com vários paradigmas onde podemos desenvolver a interface utlizando o arquivo de estilo é a marcação no mesmo arquivo, utilizando bibliotecas de vários frameworks e por ai vai.

E dentre tantas ferramentas e bibliotecas uma das mais utilizadas e com diversas opções é a biblioteca style-componentes. E é exatamente com ela que iremos dar algumas dicas de criação de componentes.

Iremos utilizar a biblioteca do React Native para utilização do style-components, eu não irei entrar em detalhes do React Native, supondo que você já saiba o básico desta biblioteca ou frameork como alguns queiras falar. Irei me focar na criação de componentes e como utliza-los criando personalização.

Instalando style-component:

npm install --save styled-components

Utilizando yarn:

yarn add styled-components

Se você utilizar o yarn para instalação na documentação é aconselhado você adicionar esta linha no "package.json"

{
"resolutions": {
  "styled-components": "^5"
}
}

Agora vamos colocar a mão na massa.

Procure sempre ser bem organizado em criar os componentes de seu app, para isto procure coloca-los numa pasta chamada components, e dentro dela crie seus componentes separados. Para cada componente crie um arquivo separado. Se você quiser mais praticidade e criar o arquivo de estilo e o arquivo de configuração do componentes separados você poderá criar uma pastas contendo os dois arquivos separados, como no exemplo abaixo:

Mas você também poderá cria-los num arquivo só.

Vamos agora ao primeiro exemplo:

Vou criar um componente de botão, para isto vou utilizar como inicio o component button do react e irei formatá-lo no style-component. Lembrando que você ao fazer esta formatação pode utiilizar qualquer nome, mas claro que você irá utilizar nomes que são sensíveis ao contexto e ao tipo de componente a ser criado. Para isto se você for criar um botão de menu ou um botão de formulário poderá utlizar a mesma tag button mas o nome do componente pode ser diferente por exemplo "ButtonMenu" e "ButtonForm". Ai você poderá estar se perguntando, será necessário criar um botão pra cada contexto? Não. Assim como na orientação a objeto você pode reutilizar código. Isso veremos em outro artigo.

Aqui esta o arquivo style.js

import styled from 'styled-components';
// sempre comece importando o componente no arquivo
export const Button = styled.button` // Todo componente é um objeto por isto ele é exportado e você deve dizer que tipo de marcação react ele será. Aqui no caso será um componente Button que irá utilizar a marcação button
  font-size: 14px;
  background: ${props => 
  props.inputColor || "white" }; // Aqui eu posso colocar uma propriedade em aberto que poderá ser atribuida ao criar o componente ao ser chamado, para isto adicione "${props => props.nome, aqui nomeie a propriedade que ao chamar o objeto deverá ser atribuida. O código "|| "white" " é para dizer que se não colocar nenhuma cor, a cor padrão do background será branco.

  width: 123px;
  height: 48px;
  border: 0;
  border-color: "white";
  box-sizing: border-box;

  &:hover { // ao passar o mouse será com a seguinte formatação. Note que segue o padrão do css normal.
      border-bottom: 3px solid;
      border-color: #620094;  
      height: 51px;
      cursor: pointer;
  };`;

O arqruivo index.js

import React from "react";
import { Button } from "./style";

//Agora crio o arquivo que irá chamar o componente e como será a estrutura dele
export default function Buttons({text}) { // perceba que chamei o componente Button e dentro de parente criei um propriedade "text", que será para personalizar o texto do botão. Pois ao chamar poderi colocar o texto que quiser. 
  return (
      <Button primary> {text}</Button> // Perceberam que entre as tags esta a propriedade "text", indicando o local que irá ficar a propriedade criada.
  )
};

Muito bem, aqui esta apenas uma pequena explicação do estyle component, em outros artigos irei me aprofundar mais. Você pode notar que existe uma propriedade "primary" onde irei me aprofundar mais em outro artigo. Até mais e não deixe de acompanhar.