DEV Community: Hudson Duarte

Como criar snippets no VSCode

Hudson Duarte — Mon, 19 Jul 2021 20:20:33 +0000

Fala pessoal, beleza ? Tô aqui para deixar uma dica fera sobre criação de snippets personalizados no VSCode.

Eu aprendi em uma aula do curso Ignite de React Native da Rocketseat, o Rodrigo Gonçalves, nos ensinou e eu quero muito compartilhar com vocês também.

Eu vou utilizar como base a criação de snippets para automatizar o processo da estrutura base de um componente e seu estilo no React Native, mas você pode usar essa dica para qualquer liguagem e projeto.

Introdução/Motivação

Eu iniciei um projeto com Expo BareWorkflow no template de Typescript para ajudar a ilustrar como podemos desfrutar desse snippet e o porque acho que ele pode ajudar você que tá criando um novo componente ou página no seu projeto.

Digamos que você acabou de iniciar um projeto e está criando a sua Home, página inicial do seu aplicativo.

Imagino que você deve ter uma estrutura padrão que gosta de usar em todas as suas páginas, eu geralmente sempre crio algo assim:

Depois de criar uma pasta com o nome da página ou componente, divido em arquivos de jsx e estilo, para meu arquivo de jsx eu sempre crio uma função retornando uma View com estilo container e faço as importações do React e React Native

Tudo certo até aqui, ok ?

Mas imagina ter que criar mais uma página, ou melhor, novos componentes, o quão repetitivo pode ficar essa atividade de criar a função, criar os estilos, importar o React e etc...

É por isso que quero trazer uma forma rápida de criar um snippet que vai permitir que você faça isso em segundos.

Como fazer ?

Procure pelas preferências do seu visual studio code e selecione a opção "User snippets"

Ao escolher essa opção, você deve escolher "New Global Snippets file...", assim, poderá criar seus snippets de forma global para qualquer aplicação. Caso queira criar um snippets para uma aplicação específica basta escolher a segunda opção.

Pronto, agora é só dar um nome para o snippet, eu coloquei rnfc de react native functional component.

Ele vai abrir uma página com algumas informações sobre a criação de snippet e é aqui que vamos configurá-lo.

Eu já possuo um snippet pronto e por isso, vou deixar para vocês copiarem e editarem como quiserem, é assim que ele vai ficar:

{
    "Basic React Native Interface": {
        "prefix": "rnfc",
        "body": [
            "import React from 'react';",
            "",
            "import {",
            "  View,",
            "} from 'react-native';",
            "",
            "import {",
            "  styles",
            "} from './styles';",
            "",
            "export function ${TM_DIRECTORY/^.+\\/(.*)$/$1/}(){",
            "  return (",
            "    <View style={styles.container}>",
            "",
            "    </View>",
            "  );",
            "}",
        ],
        "description": "Basic React Native Interface"
    },

    "Basic React Native Styles": {
        "prefix": "rns",
        "body": [
            "import { StyleSheet } from 'react-native';",
            "",
            "export const styles = StyleSheet.create({",
            "  container: {",
            "    flex: 1",
            "  }",
            "}) ",
        ],
        "description": "Basic React Native Style"
    },


}

Só um detalhe especial para a linha 15, para ajudar a não precisar ficar renomeando o componente, ele automaticamente vai gerar o nome da função com o nome da pasta em que o arquivo está inserido.

Hora de testar

Tudo pronto e vamos testar um caso de uso desse snippet que criamos, vou criar uma pasta components e dentro dela outra pasta com o componente que quero criar, nesse caso, o exemplo será um card:

Estrutura criada e agora basta digitar rnfc no meu caso e ele vai sugerir utilizar o snippet:

Basta dar ENTER e voílà :D

Ele vai reclamar que não encontrou o arquivo de styles mas é porque ainda não criamos a estrutura base no arquivo styles.ts

Novamente, eu apelidei de rns a estrutura de estilos e vou dar ENTER.

Okay, agora é só começar a codar e não precisa mais se preocupar em ficar criando estrutura base toda vez que for iniciar um novo componente ou página.

O snippet não tem limites

Se você achar que criou um snippet muito simples ou que ainda não está suprindo a sua necessidade, basta editar ele da forma como preferir.

FIM

Espero que tenha gostado dessa dica e possa aplicar no seu dia a dia, fica à vontade para compartilhar comigo suas dúvidas e também trazer novos conhecimentos.

Meu Linkedln: https://www.linkedin.com/in/huduarte/
Meu Github: https://github.com/huduarte

Como utilizar fontes e cores globais no React Native com styled-components

Hudson Duarte — Mon, 07 Jun 2021 16:19:14 +0000

Fala dev, beleza ? Me chamo Hudson, sou desenvolver mobile com React Native e esse é o meu primeiro post aqui no dev.to.

Normalmente utilizo a própria funcionalidade de artigos do Linkedln para fazer minhas publicações, porém como esse é o meu primeiro conteúdo mais técnico, decidi migrar para cá.

Espero que goste :D

Introdução/Motivação

Quando comecei a desenvolver com React Native, senti muita falta de uma etapa quase que obrigatória no desenvolvimento web com ReactJS e Styled-Components que era a declaração das fontes e cores globais da nossa aplicação. A alternativa que eu utilizava na web consiste em usar a funcionalidade createGlobalStyle como parte da nossa aplicação.

Minha maior dúvida era: como faço isso com react-native ? Visto que não consigo utilizar essa função createGlobalStyled.

Depois de algum tempo e dado início ao curso de React Native da Rocketseat(Ignite), descobri uma forma simples e muito legal de disponibilizar fontes e cores globais no nosso aplicativo.

Mão na massa

Para compartilhar com vocês essa etapa, vou estar utilizando o expo bare workflow, apenas por gosto próprio.

Depois de criar um projeto com o expo (chamei o projeto de estilosglobais) o primeiro e próximo passo é já instalar o styled-components e suas tipagens.

Você pode utilizar os comandos:

yarn add styled-components
Para instalar o styled components no seu projeto
e
yarn add @types/style-components-react-native -D
Para instalar suas tipagens

Essa é a estrutura padrão de um projeto iniciado com expo bare worlflow:

Por padrão gosto de criar uma pasta src dentro desse nosso projeto, e a partir dela começar a desenvolver o código. Também vou criar uma pasta screens que vai conter minha página principal que sera a Home.

Assim ficou a estrutura do meu projeto depois de fazer a configuração inicial:

Dentro do nossa index.tsx da pasta Home eu tenho apenas a declaração do nosso componente e duas tags de retorno, nosso Container, uma View simples e o Title que é um Text do React Native

Criando nosso tema global

Dentro da nossa pasta src, criaremos também uma pasta chamada global e dentro dela, uma pasta chamada styles, é assim que eu aprendi e curto de utilizar nossas definições de tema global.

Apenas dois arquivos em styles serão necessários para que possamos começar a implementar esse tema de forma global.
theme.ts: Onde ficarão nossas fontes e cores
styled.d.ts: Onde vamos colocar a tipagem necessária para que o styled entenda o nosso novo tema.

theme.ts

É no theme.ts que vamos exportar o nosso código padrão de fonte e cor por meio de um objeto default:



export default {
  colors: {
    background: '#ffffff',

    text: '#000000',
  },

  fonts: {
    regular: 'Poppins_400Regular',
    medium: 'Poppins_500Medium',
    bold: 'Poppins_700Bold',
  }
}

Você deve ficar à vontade para nomear como quiser as suas variaveis de cores e fonte, eu por padrão utilizei background e text para as cores e regular,medium e bold para as fontes.

Também para as fontes, como estou utilizando o expo, instalei elas utilizando o próprio expo-font e as fontes do google
expo install expo-font @expo-google-fonts/poppins
Caso esteja utilizando o React Native CLI, você pode declarar no objeto de fonts o nome padrão dos arquivos que adicionou no projeto.

styles.d.ts

Nesse arquivo devemos declarar novamente o módulo styled-components porém com a adição das nossas fontes e cores:



import 'styled-components';
import theme from './theme';

declare module 'styled-components'{
  type ThemeType = typeof theme

  export interface DefaultTheme extends ThemeType {}
}

Quase tudo pronto!

Feito essas duas etapas, o próximo passo é ir no nosso arquivo App.tsx e mexer um pouquinho na sua estrura:



import React from 'react';
import { Home } from './src/screens/Home';
import {ThemeProvider} from 'styled-components';
import theme from './src/global/styles/theme';

import {
  useFonts,
  Poppins_400Regular,
  Poppins_500Medium,
  Poppins_700Bold,
} from '@expo-google-fonts/poppins';

export default function App() {
  const [fontsLoaded] = useFonts({
    Poppins_400Regular,
    Poppins_500Medium,
    Poppins_700Bold,
  });

  return (
    <ThemeProvider theme={theme}>
      <Home />
    </ThemeProvider>
  );
}

Agora o retorno do nosso App precisa estar envolvido pelo ThemeProvider, que foi importado de dentro do styled-components.
Após envolver a nossa aplicação pelo ThemeProvider, ele pede uma propriedade obrigatória chamada theme, é dentro dela que nós vamos colocar o theme, que foi importado de dentro do nosso global/styles.

Hora de testar

Feito tudo isso, basta irmos até o arquivo styles.ts da nossa aplicação e utilizar a sintaxe padrão do styled para pegar variaveis e usar o theme, o mais legal disso tudo é que o theme já tá tipado, então quando você utilizar o . ele vai te sugerir se são as fontes ou as cores, e depois qual fonte ou cor você quer utilizar:

Como utilizar os temas globais dentro de um componente JSX?

Talvez em algum momento desenvolvendo você passe pela necessidade de usar esse tema global para colocar em alguma propriedade de componente pelo JSX, por exemplo.
Para isso, você deve seguir esse padrão:



import React from 'react';

import {useTheme} from 'styled-components';

import {

  Container,

  Title,

} from './styles';

export function Home(){

  const theme = useTheme();

return (

    <Container color={theme.colors.background} >

      <Title>Fontes e Cores Globais</Title>

    </Container>

  );

}

Fim

Dev, espero que tenha gostado dessa dica, quando descobri a possibilidade de utilizar fontes e cores globais no React Native fiquei super empolgado para compartilhar isso com todo mundo, fica à vontade para compartilhar comigo suas dúvidas e também trazer novos conhecimentos.

Código no github: https: https://github.com/huduarte/react-native-styled-components-global-theme
Meu linkedln: https://www.linkedin.com/in/huduarte/

Bye! :D