React Native: Estilização e Layouts com Flexbox e StyleSheet

Iniciando o Projeto de Vitrine Dev - Apresentação

Apresentando o curso e o instrutor

Bem-vindos a mais um curso da Alura. Neste curso, trabalharemos mais sobre React Native. Meu nome é Pietro Rischi e serei o instrutor e guia neste percurso.

Neste curso, aprofundaremos bastante em StyleSheet e Flexbox. É um curso extremamente orientado ao layout e requer que já tenhamos conhecimentos prévios sobre componentes de React Native e sobre roteamento. Trabalharemos bastante esses temas e já se espera que conheçamos pelo menos um pouco para que não tenhamos nenhum inconveniente durante o curso.

Audiodescrição: Pietro é um homem branco, de cabelo preto, vestindo uma camisa preta, com duas guitarras ao fundo e a iluminação no estilo Alura, seguindo os tons de azul e roxo.

Explorando a aplicação a ser desenvolvida

Vamos começar explorando como é a aplicação que vamos criar. Se olharmos para nossa tela, já a temos rodando aqui. Qual é a ideia deste aplicativo? Se pensarmos bem, é um aplicativo bastante simples, relativamente direto, onde temos apenas alguns botões e uma navegação entre telas.

A aplicação possui duas telas, nas quais o usuário pode navegar e acessar uma tela "sobre mim", ou seja, uma tela onde haverá um texto que fale mais sobre nós. A ideia é que esta aplicação seja totalmente personalizável. Veremos em aula como podemos criar esta aplicação de uma forma totalmente personalizável, inserindo nossos dados.

Detalhando a personalização e o foco do curso

Na parte superior, aparecerá nosso nome, por exemplo, uma foto nossa, haverá um texto que fale sobre nós e poderemos até mesmo colocar nossas redes sociais e nosso contato para que alguém possa ver nossa aplicação e navegar até nossas redes. Essa é a ideia do curso, mas lembremos: o foco principal aqui é o estilo. Trabalharemos bastante a parte de estilização, focando principalmente em Flexbox e em StyleSheet.

Utilizando o Figma como referência

Observando no Figma, apenas para dar um contexto um pouco melhor, temos dentro do Figma todos os espaçamentos que serão usados, assim como todos os tipos de tokens (fichas) que utilizaremos durante o projeto. Basear-nos-emos neste Figma para construir nossa aplicação. A ideia é alcançar esta aplicação final e, com isso, convidamos todos a embarcar neste curso conosco. Nos vemos na próxima aula, onde começaremos a analisar este projeto e a entender como está estruturado. Até breve!

Iniciando o Projeto de Vitrine Dev - Estrutura do Projeto

Introduzindo a aula e revisando o Figma

Bem-vindos à nossa segunda aula do primeiro módulo. O objetivo desta aula é entender a estrutura do projeto, como ele está organizado e como cada componente se correlaciona. Antes de começarmos a explorar o projeto, vamos revisar o Figma que vimos na aula anterior e detalhá-lo um pouco.

O primeiro ponto é que este Figma é composto por alguns componentes que criamos dentro do projeto que vamos analisar. O primeiro componente que abordaremos é o header. Este header é a estrutura que estamos destacando no Figma, contendo a parte do título e a imagem. Isso é o que definimos como header.

Explorando o componente Header

Para começar a entender como esses componentes são implementados, vamos dar uma olhada no código do componente Header:

import { Image, ImageSourcePropType, Text, View } from "react-native";
import { StarIcon } from "../icons/StarIcon";

type HeaderProps = {
    name: string;
    image: ImageSourcePropType;
};

export default function Header({ name, image }: HeaderProps) {
    return (
        <View>
            <Text>DEV { name }</Text>
            <StarIcon />

            <View>
                <View></View>
                <Image source={ image } />
            </View>
        </View>
    )
}

Este componente Header é construído como uma View, dividida em duas camadas: a primeira camada é o título e o ícone. O ícone é um componente SVG que foi convertido para ser utilizado no projeto.

Analisando o componente InfoText

Em seguida, temos uma segunda estrutura chamada infotext. Este infotext é o componente que vai do título superior até o texto de descrição. Vamos ver como ele é estruturado no código:

import { Text, View } from "react-native";

type InfoTextProps = {
    title: string;
    highlightTitle?: string;
    description: string
}

export default function InfoText({ title, highlightTitle, description }: InfoTextProps) {
    return (
        <View>
            <Text>{ title }</Text>
            <Text>{ highlightTitle }</Text>
            <Text>{ description }</Text>
        </View>
    )
}

O InfoText é composto por três textos: um título, um título em destaque e uma descrição, que são passados como parâmetros.

Implementando o PrimaryButton

A seguir, temos um botão chamado primary button, que é o botão em azul claro. Vamos ver como ele é implementado:

import { Pressable, PressableProps, Text } from "react-native";

type PrimaryButtonProps = PressableProps & {
    title: string;
}

export default function PrimaryButton({ title, ...rest }: PrimaryButtonProps) {
    return (
        <Pressable {...rest}>
            <Text>{ title }</Text>
        </Pressable>
    )
}

O PrimaryButton é um componente clicável que recebe um título e outras propriedades de um Pressable.

Construindo o SocialButton

Além disso, temos um social button. Este outro botão, próximo ao primary button, difere em alguns aspectos de raio e cores. Este é o nosso social button. Vamos ver como ele é construído:

import { Pressable, PressableProps, Text } from "react-native";
import { GitHubIcon } from "../icons/GitHub";
import { InstagramIcon } from "../icons/Instagram";
import { LinkedinIcon } from "../icons/Linkedin";
import { TwitchIcon } from "../icons/Twitch";

export enum SocialNetworks { github, instagram, linkedin, twitch }

type SocialButtonProps = PressableProps & {
    socialNetwork: SocialNetworks;
};

const icon = (socialNetwork: SocialNetworks) => {
    switch (socialNetwork) {
        case SocialNetworks.github: return <GitHubIcon />
        case SocialNetworks.instagram: return <InstagramIcon />
        case SocialNetworks.linkedin: return <LinkedinIcon />
        case SocialNetworks.twitch: return <TwitchIcon />
    }
}

const title = (socialNetwork: SocialNetworks) => {
    switch (socialNetwork) {
        case SocialNetworks.github: return 'GitHub'
        case SocialNetworks.instagram: return 'Instagram'
        case SocialNetworks.linkedin: return 'LinkedIn'
        case SocialNetworks.twitch: return 'Twitch'
    }
}

export default function SocialButton({ socialNetwork, ...rest }: SocialButtonProps) {
    return (
        <Pressable {...rest}>
            {icon(socialNetwork)}
            <Text>{ title(socialNetwork) }</Text>
        </Pressable>
    )
}

O SocialButton é um componente mais complexo que utiliza um enumerador para determinar qual ícone e título exibir, dependendo da rede social selecionada.

Implementando o Footer

Por fim, temos uma estrutura chamada footer, que é a estrutura final que fala sobre o projeto, quem o desenvolveu e as licenças do projeto. Vamos ver como ele é implementado:

import { Text, View } from "react-native"

export default function Footer() {
    return (
        <View>
            <Text>Desenvolvido por Alura. Projeto fictício sem fins comerciais.</Text>
        </View>
    )
}

O Footer é uma simples View com um texto informativo.

Explorando a estrutura do projeto

Agora, vamos explorar o projeto. Ao baixá-lo e abri-lo, inicialmente veremos a estrutura de pastas. Por onde começamos? Vamos começar pela pasta "app". Dentro dela, encontraremos um arquivo chamado index.tsx, que é o nosso primeiro arquivo, a primeira tela da nossa aplicação React. Estamos trabalhando com Expo, e esta tela é a primeira que o Expo vai ler.

Como está estruturada esta tela? Temos uma ScrollView, um componente de rolagem do React, para que possamos deslocar nossa tela. Em seguida, temos o componente header, que contém o título e uma imagem. Mais adiante, entenderemos em detalhe o significado de cada parâmetro.

Analisando a tela inicial

Aqui está o código da tela inicial:

import profile from '@/assets/configs/profile.json'
import Footer from '@/components/Footer'
import Header from '@/components/Header'
import InfoText from '@/components/InfoText'
import PrimaryButton from '@/components/PrimaryButton'
import SocialButton, { SocialNetworks } from '@/components/SocialButton'
import { router } from 'expo-router'
import { Linking, ScrollView, Text } from 'react-native'

export default function Home() {
  return (
    <ScrollView>
      <Header name={profile.name} image={require('@/assets/images/profile.png')} />

      <InfoText title='Eleve seu negócio digital a outro nível' highlightTitle='com qualidade!' description={profile.description} />
      <PrimaryButton title='Sobre mim' onPress={() => router.push('/pages/AboutMe')} />
      <PrimaryButton title='Entre em Contato' onPress={() => Linking.openURL(`tel:${profile.phone}`)} />

      <Text>Acesse minhas redes:</Text>

      <SocialButton socialNetwork={SocialNetworks.github} onPress={() => Linking.openURL(profile.github)} />
      <SocialButton socialNetwork={SocialNetworks.linkedin} onPress={() => Linking.openURL(profile.linkedin)} />
      <SocialButton socialNetwork={SocialNetworks.instagram} onPress={() => Linking.openURL(profile.instagram)} />
      <SocialButton socialNetwork={SocialNetworks.twitch} onPress={() => Linking.openURL(profile.twitch)} />
      
      <Footer />
    </ScrollView>
  )
}

Este código mostra como os componentes são organizados na tela inicial, utilizando a ScrollView para permitir a rolagem e incluindo todos os componentes que discutimos.

Explorando os componentes e a navegação

Vamos começar a explorar cada um desses componentes. O primeiro deles é o header. Onde estão localizados? Na pasta "components" do nosso projeto, temos alguns componentes que vamos utilizar. Eles estão separados por pastas, e dentro de cada pasta, temos a estrutura criada do componente.

O primeiro deles, o header, é construído como uma View, dividida em duas camadas: a primeira camada é o título e o ícone. Onde está esse ícone? Na pasta "icons", temos vários ícones. Esses ícones são SVGs que foram convertidos e recriados como componentes. O projeto já traz tudo isso para nós.

Não precisamos entender como é feita a conversão de forma direta. No entanto, é importante saber que este ícone é basicamente o SVG que estava no Figma. Não vamos nos aprofundar em como ocorre essa troca, pois não é o objetivo deste curso, e essa conversão pode ser feita de diversas maneiras. Podemos utilizar algumas ferramentas automáticas que fazem a conversão de SVG para um componente React. Neste caso, utilizamos uma ferramenta automática para essa conversão, mas não detalharemos como ela é feita. O importante é que no projeto já está tudo configurado para uso.

Detalhando a estrutura do Header e InfoText

Voltando ao nosso header, do qual estávamos falando, temos uma primeira estrutura de título e ícone, que estão sendo criados aqui. Abaixo, temos uma segunda estrutura, que é a estrutura da nossa imagem. Temos uma View aqui e nossa imagem. O que é essa View? Essa View é justamente a que existe atrás da nossa imagem. Observem que há um detalhe, um acessório atrás, que será feito com essa View. Teremos uma imagem na frente e um detalhe, um acessório, atrás, que será criado através dessa View inicialmente configurada.

Voltando à nossa página, o que mais temos aqui? Temos o InfoText a seguir. Como está estruturado esse InfoText? Basicamente, são três textos: um título, um Highlight Title e uma Description que é enviada via parâmetro. Esses textos são os que estão no Figma. Aqui temos: "leve seu negócio digital a outro nível, com qualidade". Tudo que está em branco é o que chamamos de Title. Em azul, será nosso Highlight Title, e por último, nossa Description. Essa mesma estrutura se repete na tela "Sobre mim". A mesma estrutura está presente aqui, assim como o Header. Vamos reutilizar esses componentes para as duas telas.

Explorando a tela "Sobre mim" e o PrimaryButton

Onde está essa segunda tela "Sobre mim"? Está dentro de "Pages", temos um About Me e um Index, que contém a estrutura da tela "Sobre mim". Falaremos sobre ela com calma em breve. Voltando à nossa estrutura inicial, temos o InfoText e, em seguida, um Primary Button. O que é esse Primary Button? É o botão azul, que temos no "Sobre mim" e no "Contate-me". Como está sendo criado? É um Pressable, ou seja, um componente clicável, com um título dentro. É assim que estamos criando nosso Primary Button.

A seguir, temos um texto comum do React. Nada mais. Apenas um texto React aqui dentro. Depois, temos um Social Button. Este Social Button é o componente mais complexo de entender, pois possui mais estruturas internas. Como está sendo criado? Primeiro, foi criada uma estrutura, um enumerador, onde podemos utilizar alguns casos. Aqui, passamos ou um GitHub, ou um Instagram, ou um LinkedIn, ou um Twitch. Criamos casos de enumerador aqui dentro. Nosso componente recebe um desses casos. Sempre passaremos ou um GitHub, ou um Instagram, ou um LinkedIn, ou um Twitch. Dentro desse componente, temos constantes que verificam o case com o qual estamos trabalhando e nos devolvem essas constantes, indicando qual é o texto, o título, de acordo com o case que estamos lidando, ou qual é o ícone conforme esse case. Onde estão esses ícones? Na pasta "Icon". Segue a mesma estrutura; todos os ícones estão lá dentro e os usamos aqui para construir nosso componente como um todo.

Concluindo com o Footer e próximos passos

Como está sendo construído esse componente? Um Pressable, com um ícone e um texto dentro. Temos as duas estruturas internas com as quais trabalharemos para chegar à estrutura final do botão de rede social.

Por último, temos nosso footer. Como está sendo trabalhado esse footer? Basicamente, uma View e um texto, nada mais. Isso permanecerá assim até o final do projeto? Não, trabalharemos para modificar essa estrutura para que receba o estilo que temos no Figma. Todas as estruturas que estamos vendo aqui são iniciais e sem estilização. Qual é o objetivo do curso? Trabalhar todos esses componentes e estruturas para que possamos alcançar o estilo proposto no Figma. Faremos isso nas próximas aulas, mas antes de começarmos, na próxima aula, vamos discutir de onde vêm os dados, de onde vem cada dado para esta tela e como essas telas estão sendo construídas em termos de navegação. Falaremos sobre isso na próxima aula.

Até a próxima! Obrigado por nos acompanhar até aqui e nos vemos na próxima aula!

Iniciando o Projeto de Vitrine Dev - Lógica e Dados do Projeto

Introduzindo a última aula do módulo 1

Bem-vindos à nossa terceira e última aula do módulo 1. Este primeiro módulo é focado principalmente em compreender nosso projeto. Nesta última aula, queremos abordar como os dados estão sendo relacionados ao nosso projeto, de onde eles vêm, como ocorre a navegação e como cada botão se comporta quando o usuário clica. Por exemplo, quando o usuário clica no GitHub, o que fazemos para abrir uma tela do GitHub? Como inserir o GitHub dentro do projeto, entre outros aspectos. Esta aula será essencial para entendermos as nuances da lógica do projeto. A partir do módulo 2, começaremos a construir o projeto em sua totalidade.

Vamos voltar à pasta do nosso projeto e iniciar esta aula falando sobre a página "Sobre mim". Esta tela é basicamente nossa segunda tela à direita. O projeto é composto por duas telas: a inicial, que vimos na aula anterior, e a "Sobre mim". Ao observarmos esta tela, notamos que todas as estruturas discutidas na aula anterior são reutilizadas aqui. Temos uma Scroll View, seguida de um header, que é nossa primeira estrutura inicial, contendo um título e uma imagem de cabeçalho. Em seguida, temos um infotext, lembrando que um dos infotexts possui o título destacado e o outro não. Essa é a única diferença. Aqui, temos um infotext sem o título destacado. No Figma, o "com qualidade" está destacado, mas aqui não há destaque. Essa é a única diferença entre os dois, além de uma descrição. Por último, temos o footer, que é o mesmo da nossa primeira tela.

Explorando o código da tela "Sobre mim"

Para ilustrar como essa tela "Sobre mim" é construída, vamos ver o código que a compõe:

export default function AboutMe() {
  return (
    <ScrollView>
      <Header name={profile.name} image={require('@/assets/images/profile.png')} />
      <InfoText title='Sobre mim' description={ profile.aboutMe } />
      <Footer />
    </ScrollView>
  )
}

Como está sendo criada essa navegação? Na tela inicial, temos um dos botões, que é o botão "Sobre mim", visto na aula passada. O que fazemos dentro desse botão? Nosso projeto já está configurado para que, no momento em que o usuário clica nesse botão, utilizamos um router do React, especificamente o ExpoRouter. Esse router executa a tela "Sobre mim" dentro da rota //Pages//About Me. Por isso, na estrutura do projeto, temos uma pasta "Pages", "About Me", e dentro dela está nosso componente de tela, que será chamado no momento do clique. É assim que ocorre a navegação.

O código para o botão "Sobre mim" é o seguinte:

<PrimaryButton title="Sobre mim" onPress={() => router.push('/pages/AboutMe')} />

Trabalhando com a pasta "Assets" e configurações do projeto

Precisamos agora entender como estamos trazendo essa informação para o projeto. Para isso, falaremos de outra pasta do projeto. Vamos minimizar as duas pastas vistas na aula passada, "App" e "Components", e começar a trabalhar com a pasta "Assets". Dentro dessa pasta, temos "Configs", uma pasta de configurações, sobre a qual falaremos em breve, além de uma pasta de fontes e uma de imagens. Na pasta "Images", encontramos a imagem do nosso perfil, que será substituída por uma imagem pessoal. Alguns detalhes: a dimensão e a extensão da imagem devem ser as mesmas para evitar problemas com o que já está criado no projeto, garantindo que a qualidade não seja perdida. A imagem deve ser um PNG.

Sobre as fontes, elas já estão atribuídas dentro do projeto. São fontes do Google Fonts, que podemos baixar e atribuir aqui. Elas serão usadas na criação dos textos do projeto, especificamente na aula de criação de textos, para criar a fonte correta que está no Figma. As fontes já estão importadas no projeto e serão utilizadas conforme necessário.

Configurando o JSON de perfil e redes sociais

Por último, temos nosso objeto configs, que é o mais importante no momento. Aqui é onde faremos modificações. Temos o name, que é nosso nome.

Dentro do projeto, o nome da pessoa usuária, ou seja, o nome da pessoa desenvolvedora, deve ser inserido. Devemos colocar um texto resumido sobre nós, que é o texto que aparece na primeira página do Figma. Este texto, ao olharmos no Figma, é aquele que aparece na primeira página. Devemos inserir esse texto. Em seguida, o "about me" é um texto um pouco mais longo, que aparece na segunda página; ele vem de dentro do projeto. Depois, no campo "phone", devemos colocar nosso número para que ele possa ser atribuído na seção de contato. Assim, o número é automaticamente atribuído.

O JSON de configuração do perfil é assim:

{
    "name": "JOANA",
    "summary": "Olá! Sou Joana Santos, desenvolvedora Front-end com especialidade em React, HTML e CSS. Ajudo pequenos negócios e designers a colocarem em prática boas ideias. Vamos conversar?",
    "aboutMe":"Sou a Joana Santos, desenvolvedora Front-end apaixonada por transformar ideias em interfaces funcionais, acessíveis e bem pensadas. Trabalho principalmente com React, HTML e CSS, criando experiências digitais que não só funcionam bem, mas também fazem sentido para quem usa. Gosto de colaborar de perto com pequenos negócios, designers e times criativos, ajudando a tirar projetos do papel e levá-los para a web de forma prática e eficiente. Acredito que um bom produto nasce do equilíbrio entre código bem escrito, atenção aos detalhes e uma comunicação clara ao longo de todo o processo. Estou sempre buscando evoluir, aprender novas tecnologias e aprimorar minhas soluções, seja otimizando performance, melhorando a usabilidade ou explorando novas formas de construir interfaces mais eficazes. Se você tem uma ideia e quer transformá-la em algo real, vamos conversar.",
    "phone": 5511999999999,
    "github": "https://github.com/",
    "linkedin": "https://linkedin.com/",
    "instagram": "https://instagram.com/",
    "twitch": "https://twitch.com/"
}

Devemos registrar todas as nossas redes sociais, como GitHub, LinkedIn, Instagram e Twitch. Quando a pessoa usuária clicar, será redirecionada para o nosso GitHub, LinkedIn, Instagram ou Twitch. A ideia do projeto é deixá-lo com nosso estilo; podemos fazer essa alteração antes mesmo de começarmos o projeto. Nesta aula, ao finalizarmos, devemos reservar um momento, cerca de 5 minutos, para fazer todas as alterações nesse JSON, de modo que o projeto reflita nosso estilo. Durante o curso, manteremos tudo o que está dentro do projeto. Seguiremos sempre o que está definido, mas como a ideia é estilizar, não haverá problema algum em realizar essas mudanças. As alterações são apenas para que o projeto replique os novos dados.

Importando o perfil e executando o projeto

Se olharmos na aplicação, na pasta "app" dentro do index, na primeira tela, veremos que todo o projeto aponta para uma variável chamada profile. E o que é essa variável profile? Essa variável é justamente o JSON que acabamos de ver. Dentro desse JSON, temos todas as configurações do nosso projeto, que todas as telas vão consultar para se basear e construir. Aconselhamos que façam essa alteração para que possamos construir um projeto único para cada um de nós.

Para importar o perfil, usamos o seguinte código:

import profile from '@/assets/configs/profile.json'

Feito isso, o que faremos também nesta aula? Queremos mostrar como está o projeto em uma estrutura inicial. Para isso, já colocamos o projeto em nosso computador, ele já está rodando. Executamos o projeto e ele já está funcionando dessa forma. Podemos ver que ele executa todo o projeto. Estamos executando a partir do terminal. Podemos executá-lo por meio de algum plugin que utilizamos. Não há problema algum, e estamos executando através do simulador de iOS. Também podemos, se quisermos, executá-lo através de alguma página web para que seja mais rápido, etc.

Aqui, executaremos o projeto justamente com npm run e algum dispositivo que queiramos usar. Vamos parar este projeto para que possamos ver. Estamos na pasta do projeto "app". Vamos voltar, cd .., e retornaremos. Navegaremos no terminal até a pasta do projeto "Showcase-dev". Uma vez na pasta, com o terminal na pasta, entraremos na pasta "app", como em toda a estrutura do React. Entraremos na pasta "app" e executaremos npm run ios. Feito isso, algo será aberto. Novamente, estamos executando no iOS. Se formos executar na web, basta pressionar a tecla W, que abrirá o Chrome com este projeto. Continuaremos no iOS, mas podemos executar também no Android pressionando A, ou na web pressionando W. Vamos pressionar a tecla I para que possamos ver a execução novamente. Vamos parar esta execução e pressionar a tecla I para que ela seja executada novamente conosco.

Visualizando a estrutura do projeto e finalizando a aula

Veremos que nosso projeto já está estruturado; já possui todas as estruturas necessárias para criarmos este projeto. A única questão aqui é justamente o estilo, que começaremos a trabalhar no próximo módulo. Já temos uma estrutura criada com título, ícone, imagem e os botões que criamos. O "Sobre mim" parece um texto, mas ao clicarmos nele, navegamos para a próxima tela, que é a tela de "Sobre mim". O único ponto é que está um pouco desorganizado. Ainda não temos os estilos de cada um dos componentes, que começaremos a entender e trabalhar no próximo módulo.

O código completo da tela inicial, que inclui botões e links para redes sociais, é o seguinte:

return (
    <ScrollView>
      <Header name={profile.name} image={require('@/assets/images/profile.png')} />

      <InfoText title="Eleve seu negócio digital a outro nível" highlightTitle="com qualidade!" description={profile.summary} />
      <PrimaryButton title="Sobre mim" onPress={() => router.push('/pages/AboutMe')} />
      <PrimaryButton title="Entre em Contato" onPress={() => Linking.openURL(`tel:${profile.phone}`)} />

      <Text>Acesse minhas redes:</Text>

      <SocialButton socialNetwork={SocialNetworks.github} onPress={() => Linking.openURL(profile.github)}/>
      <SocialButton socialNetwork={SocialNetworks.linkedin} onPress={() => Linking.openURL(profile.linkedin)}/>
      <SocialButton socialNetwork={SocialNetworks.instagram} onPress={() => Linking.openURL(profile.instagram)}/>
      <SocialButton socialNetwork={SocialNetworks.twitch} onPress={() => Linking.openURL(profile.twitch)}/>
      
      <Footer />
    </ScrollView>
)

Com isso, finalizamos a aula e nos encontramos no módulo 2. Obrigado a todos. Até o próximo módulo.

Sobre o curso React Native: Estilização e Layouts com Flexbox e StyleSheet

O curso React Native: Estilização e Layouts com Flexbox e StyleSheet possui 179 minutos de vídeos, em um total de 48 atividades. Gostou? Conheça nossos outros cursos de React Native em Mobile, ou leia nossos artigos de Mobile.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Iniciando o Projeto de Vitrine Dev
• Estilizando Componentes Inline
• Organizando o Layout com Flexbox e Absolute
• Padronizando com StyleSheet
• Centralizando com Tokens