DEV Community: Sabrina Barros

Conheça Next.js 14: O Framework Full-Stack para Aplicações Web Modernas

Sabrina Barros — Thu, 03 Oct 2024 23:10:36 +0000

Idealizado por Guillermo Rauch, com a primeira versão lançada em 2016 pela Vercel, o Next.js veio com um objetivo: ser um framework web full-stack de código aberto, fácil e eficiente de ser usado.

Desde então o Next.js se estabeleceu como um dos frameworks mais populares para web apps. Seu foco é fornecer ferramentas eficientes, especialmente para quem já utiliza React, tendo em vista que o framework utiliza de React components para renderizar o front-end, o que facilita muito a adesão ao Next.js, considerando a grande popularidade do React entre a comunidade.

Neste artigo vou abordar o Next.js 14, a versão mais recente e atualizada.

Primeiras coisas primeiro

Para podermos alinhar o conhecimento de quem está lendo este artigo e não assumir que você caro leitor já sabe o que tais jargões significam, eu vou dar uma breve introdução para você:

Layout Shift: Se refere a mudanças inesperadas no layout da página, que ocorrem quando elementos como imagens, vídeos, fontes ou anúncios, são carregados ou redimensionados após o conteúdo já ter sido renderizado.
Lazy Loading: Técnica de otimização usada para adiar o carregamento de conteúdo não essencial de uma página até que ele seja realmente necessário, como quando o usuário rola a página até esse conteúdo. Isso melhora a performance inicial da página e a experiência do usuário, pois apenas os elementos visíveis ou prioritários são carregados imediatamente.

O Que é o Next.js?

Objetivamente, o Next.js é um framework para construir aplicações full-stack para Web, com muitas funcionalidades que otimizam o desenvolvimento, tanto no lado do cliente quanto do servidor. Ele facilita a criação de aplicações web com qualidade, renderização eficiente e estrutura organizada.

Ele utiliza de React Components para renderização da interface, e complementa a aplicação com features adicionais e otimização, além de proporcionar todo o ambiente para o desenvolvimento da aplicação, do client ao banco de dados.

O Next.js permite criar tanto o front-end quanto o back-end em um único ambiente.

Principais Características

A versão mais recente (v14) do Next.js traz inovações importantes, especialmente com a introdução do App Router e Server-Side Components.

Nos próximos artigos dessa série, vou abordar mais especificamente sobre como funciona o App Router e Server-Side Components.

As principais características incluem:

App Route

O App Router é a nova abordagem de roteamento no Next.js, que aproveita ao máximo as funcionalidades mais recentes do React, como Server Components e Streaming de Dados.

Suporte a Server e Client Components:

Com as versões mais recentes do Next.js, surgiu uma abordagem diferenciada para lidar com a renderização de componentes, dividindo-os em Server Components e Client Components.

Enquanto o Server Components se trata de componentes React que são renderizados exclusivamente (e opcionalmente armazenadas em cache) no servidor, o Client Components é pré-renderizado no servidor e pode usar JavaScript do cliente para executar no navegador.

Otimização Automática de Código (Code Splitting)

Para melhorar a experiência de navegação, o Next.js divide automaticamente o código do seu aplicativo por segmentos de rota, o chamado Code Splitting, melhorando a performance.

Route Handlers

Route Handlers é o substituto da antiga API Routes do Next.js, essa funcionalidade permite manipular requisições para uma rota específica usando as APIs da Web Request e Response. O que elimina a necessidade de um servidor back-end separado.

React e Next.js: Diferenças e Complementaridades

Neste momento é provável existir um vulto na sua cabeça sobre como separar o React do Next.js. Embora ambos sejam usados juntos, é importante entender suas funções distintas.

Enquanto o React é uma biblioteca focada na construção de interfaces de usuário (UI) com componentes reutilizáveis, o Next.js vai além e adiciona ferramentas e funcionalidades que facilitam o desenvolvimento full-stack. Entre essas funcionalidades está a geração de rotas automáticas e integração fácil com ferramentas de monitoramento e segurança.

Em resumo, o React cuida da interface, enquanto o Next.js fornece as ferramentas adicionais para otimização e gerenciamento da aplicação como um todo.

Vantagens do Next.js

Historicamente, os desenvolvedores tiveram que usar diferentes linguagens (por exemplo, JavaScript, PHP, Ruby) e estruturas ao escrever código para o servidor e o cliente. Atualmente, os desenvolvedores podem usar a mesma linguagem (JavaScript) e a mesma estrutura (por exemplo, Next.js). Essa premissa permite escrever código perfeitamente para ambos os ambientes, sem alternância de contexto.

Isso por si só valida os benefícios de se usar uma ferramenta como o Next.js, mas ele não é a única estrutura que resolve o problema de alternância de contexto, que devo dizer, essa é uma discussão muito mais antiga do que o próprio Next.js em si, então vamos às especificidades que fazem do Next.js ser de fato vantajoso:

1. Otimização Automática de Código:

Além do já citado code splitting, que faz a divisão automática de código, o Next.js automaticamente aplica lazy loading para Client Components. O lazy loading ajuda a melhorar o desempenho de carregamento inicial de um app diminuindo a quantidade de JavaScript necessária para renderizar uma rota.

2. Sistema de Rotas Simplificado:

Rotas baseadas em pastas e arquivos, o que para mim, pessoalmente, simplificou a configuração e estruturação do projeto.

O suporte tanto ao App Router (moderno) quanto ao Page Router (legado) continua.

3. Suporte Nativo a TypeScript:

Transição fácil para TypeScript, sem a necessidade de configuração manual.

4. Otimizações de Imagem next/image:

O componente <Image> é uma extensão da tag <img> que vem automaticamente com otimização de imagens.

Previne mudança de layout “Layout Shift” automaticamente quando as imagens são carregadas.
Redimensiona imagens para impedir imagens grandes demais em dispositivos com uma viewport menor.
Faz lazy loading por padrão (as imagens são carregadas à medida que entram na viewport).

5. Otimizações de Fonte next/fonte:

O Next.js otimiza automaticamente as fontes, baixando-as durante o processo de build e hospedando juntamente com os outros assets estáticos.

Isso significa que quando um usuário visita seu app, não há solicitações de rede adicionais para fontes que afetariam o desempenho, ou seja, zero Layout Shift.

6. Renderização Dividida por Segmentos de Rota

O processo de renderização é dividido em segmentos de rota, o que significa que diferentes partes da página podem ser renderizadas de maneira independente. Isso permite que a renderização aconteça de forma parcial e por streaming, o que melhora a experiência do usuário, pois partes da página podem ser exibidas à medida que ficam prontas, sem a necessidade de esperar que a página inteira seja processada.

7. Facilidade de Deploy na Vercel:

A implantação no Vercel é de configuração zero, a integração direta com a plataforma faz com que deploys sejam rápidos e muito convenientes, com CI/CD (Integração Contínua e Entrega Contínua) bastante simplificada.

Como Começar um projeto Next.js

Uma das vantagens do Next.js é a sua simplicidade de configuração. Criar um novo projeto é rápido e direto:

$ npx create-next-app@latest

Esse comando inicializa um projeto com todas as configurações necessárias para começar a desenvolver imediatamente, configurando o ambiente e instalando dependências básicas.

$ npm run dev

E seu projeto estará rodando por padrão na porta 3000: http://localhost:3000.

Conclusão

Esse artigo teve como objetivo cobrir os aspectos principais do Next.js e as novidades da versão 14, onde é introduzido um conjunto muito interessante de funcionalidades que tornam o desenvolvimento web ainda mais eficiente e eleva a experiência do usuário.

Por muito tempo o Next.js foi visto simplesmente como "o Framework para fazer SSR", espero ter conseguido mostrar que as possibilidades dessa ferramenta vão muito além.

Parabéns para você! Por adquirir um novo conhecimento hoje.🎉

Em breve estarei postando a sequência dessa série de artigos sobre Next.js ✨

Te vejo lá!

Meus Links 🔗

Se tiver dúvidas ou quiser trocar ideias, sinta-se à vontade para entrar em contato!

Referências

Server-Side Rendering (SSR): Uma Solução para SEO e Performance em Aplicações React

Sabrina Barros — Tue, 24 Sep 2024 00:21:38 +0000

Server-Side Rendering (SSR) ou Renderização do Lado do Servidor, é o processo de renderizar uma aplicação web no servidor antes de enviá-la ao navegador. Este método foi desenvolvido para resolver problemas de SEO (Search Engine Optimization) que surgem ao utilizar frameworks JavaScript como o React e performance num geral.

Disclaimer: Vou usar o React.js como exemplo nesse artigo, mas tudo que foi dito aqui se aplica para outras bibliotecas (Angular, Vue etc…) também, fechou? 😉👍

Entendendo o Problema

Para compreender o papel do SSR, é essencial entender como o React funciona na renderização de páginas:

Abertura do Site pelo Usuário: Quando um usuário clica para abrir um site feito com React, o navegador inicia o processo de carregar a página.
Download do HTML Inicial: O navegador baixa o HTML básico do site. Se você já trabalhou com React, sabe que este HTML geralmente contém apenas um <body> e uma <div> com o id root.
Carregamento e Execução do JavaScript: O navegador, em seguida, baixa e executa o JavaScript que realmente contém todo o conteúdo e a lógica da aplicação. A partir disso, o DOM (Document Object Model) é montado.

Esse processo, no entanto, cria um problema significativo para o SEO.

O Problema de SEO com Aplicações React

SEO (Search Engine Optimization), ou Otimização para Motores de Busca, é o conjunto de técnicas e estratégias que visam melhorar o posicionamento de um site nos resultados orgânicos de mecanismos de busca, como o Google. Um dos principais fatores que os motores de busca consideram ao indexar uma página é o conteúdo HTML.

No caso de aplicações React tradicionais, o HTML enviado ao navegador é praticamente vazio. Como o SEO analisa o HTML inicial da página para determinar seu conteúdo e relevância, um HTML vazio resulta em uma indexação deficiente, prejudicando o posicionamento da página nos resultados de busca.

A Solução: Server-Side Rendering (SSR)

Para contornar o problema de SEO em aplicações React, foi desenvolvida a técnica de Server-Side Rendering. Com o SSR, toda a aplicação em React é renderizada no servidor antes de ser enviada ao navegador. O processo funciona da seguinte maneira:

Requisição Inicial pelo Usuário: O usuário clica para abrir o site.
Renderização no Servidor: O servidor processa o JavaScript da aplicação e a partir dele, monta o HTML completo da página.
Envio do HTML Renderizado: O servidor entrega o HTML já renderizado juntamente com o JavaScript necessário para interatividade no navegador do usuário.

Benefícios do SSR

Além de resolver o problema de SEO, o SSR traz outras vantagens importantes:

Melhoria de Performance: Como o HTML já está pré-renderizado, o tempo de carregamento percebido pelo usuário é menor, o que proporciona uma experiência mais rápida e fluida. Isso é especialmente útil para usuários com dispositivos mais fracos ou conexões lentas.
Aumento da Segurança: Com o SSR, minimiza ou até mesmo anula o acesso do front-end direto às APIs, ja que todas as requisições são feitas pelo lado do servidor antes que o usuário tenha acesso à página. Isso reduz a o risco de ataque para potenciais vulnerabilidades.

Desvantagens e Custos do SSR

Apesar dos benefícios, o SSR também apresenta alguns desafios, como o custo operacional, manter um servidor ativo para realizar a renderização pode ser bem caro, especialmente em aplicações com um volume de tráfego muito grande. Serviços como Vercel, AWS, etc... Cobram pelo uso de recursos do servidor, o que pode aumentar significativamente os custos operacionais.

Opções para Implementar o SSR

Existem várias maneiras de implementar o SSR, dependendo das necessidades do projeto.

Uma delas é o SSR Tradicional, o servidor gera HTML para cada requisição, comum no PHP e em frameworks como Ruby on Rails.

O React Server Components (RSC) é um novo tipo de componente da versão 19 do React que é renderizado antecipadamente, antes do processo de build, em um ambiente separado do navegador ou do servidor SSR.

Eu diria que talvez o SSR Provider mais conhecido até então é o Next.js, que renderiza o conteúdo no servidor e entrega HTML pronto para o navegador, melhorando SEO e performance com menos esforço de configuração. Sendo esse o principal motivo para o Next.js ser o framework escolhido, com as novas atualizações do React, torna o futuro do Next.js incerto. Mas antes, mais um disclaimer:

Devo defender o Next.js, ele continua sendo uma ferramenta para construção de apps full-stack muito robusta, o React se atualizou e o Next.js também, e toda essa discussão sobre "pra que usar next agora?🤪" me inspirou a escrever uma série de artigos sobre Next.js, você pode acessar o primeiro dessa sequencia aqui: Conheça Next.js 14: O Framework Full-Stack para Aplicações Web Modernas

Get in Touch

Obrigado por chegar até aqui! Espero que esse artigo tenha te ajudado com suas dúvidas ou te ensinado algo novo. 😊

Para mim, pessoalmente, ensinar é a melhor forma de aprender. Então, se você tiver alguma dúvida ou sugestão, sinta-se à vontade para entrar em contato comigo:

Toda pergunta é valida! Bons estudos e que a sorte esteja sempre ao seu favor!

Referências

JSON: Uma Visão Abrangente sobre o Formato de Dados Interchange

Sabrina Barros — Thu, 25 Apr 2024 20:02:53 +0000

JSON é a abreviação de "JavaScript Object Notation", caso esse seja um conceito recente para você, não se assuste com o nome grande, é na verdade bem simples de entender.

Em sua essência, JSON é um formato de dados leve, com interoperabilidade ampla e de fácil legibilidade, tanto por seres humanos quanto por máquinas.

Desde sua primeira especificação por Douglas Crockford nos anos 2000, tornou-se uma escolha popular para troca e armazenamento de dados, e vem substituindo cada vez mais o formato padrão até então, o XML.

Neste artigo, pretendo explorar os fundamentos do JSON, suas características, aplicações e algumas técnicas um pouco mais avançadas para manipulação eficiente de dados.

Uma Breve História

O objetivo por trás da criação do JSON era ser uma alternativa simples e leve ao XML para a troca de dados entre diferentes sistemas e linguagens de programação, mas especialmente para comunicação entre clientes web e servidores.

Crockford percebeu que, embora o XML fosse amplamente utilizado para representar e trocar dados estruturados, ele tinha algumas desvantagens significativas, incluindo uma sintaxe mais complexa e uma sobrecarga maior em termos de tamanho de arquivo e processamento.

Inspirado pela sintaxe de objetos literais em JavaScript, o JSON foi formalizado pela primeira vez em 2006, quando Crockford publicou a especificação oficial no site json.org.

Hoje em dia, o JSON é amplamente utilizado em uma variedade de contextos, desde comunicação entre cliente e servidor, em aplicativos web, até representação de dados em bancos de dados NoSQL e Web APIs. Então quando você acessa alguma aplicação na web é altamente provável que ela esteja fazendo uso do JSON.

Estrutura de dados com JSON

O JSON representa dados estruturados no formato de objetos com pares de chave-valor. Ele é independente de linguagem, e pode ser compreendido e manipulado nativamente por uma variedade de linguagens de programação. Como por exemplo: Ruby, Python, PHP, JavaScript…Mas mesmo para as linguagens que não aceitam o JSON nativamente, no site oficial da especificação existem inúmeras bibliotecas que fazem o parser para essas linguagens.

A estrutura de um JSON consiste principalmente em objeto {} e array []. Um JSON, deve sempre começar com abre chaves { e terminar com fecha chaves }.

Os dados são armazenados dentro do JSON por pares de “nome”: “valor” e então separados por vírgula.

exemplo simples de um objeto JSON:



{
  "nome": "João",
  "idade": 21,
  "solteiro": false,
  "amigos": ["Robson", "Jorge", "Maria"]
}

Esse conjunto de informações é chamado de objeto. O valor de um objeto JSON pode conter: string, number, boolean, array, object ou null.

Observe a propriedade amigos, que contém um array como valor, um array JSON é uma coleção ordenada de valores, onde cada valor pode ser qualquer tipo de dado, assim como o objeto JSON, incluindo outros arrays ou objetos.

Aplicações de JSON

JSON é amplamente utilizado em uma variedade de contextos, incluindo:

Comunicação entre cliente e servidor em aplicativos web e móveis.
Armazenamento de configurações e preferências de usuário.
Intercâmbio de dados entre sistemas distribuídos e Web APIs.
Representação de dados em bancos de dados NoSQL, como o MongoDB.
Arquivos de configuração

Concorrentes

JSON não é o único no mercado de serialização de dados, seus principais concorrentes são:

YAML

Segundo o website oficial: "YAML é uma serialização de dados amigável para humanos e padrão para todas as linguagens de programação".

Exemplo da estrutura YAML:



library:
  - title: "The Great Gatsby"
    author: "F. Scott Fitzgerald"
    genre: "Novel"
    year: 1925
  - title: "To Kill a Mockingbird"
    author: "Harper Lee"
    genre: "Fiction"
    year: 1960

Geralmente, quando alguma ferramenta faz uso de arquivo de configuração, esse esquivo será feito em JSON ou YAML.

XML

O já citado antecessor ao JSON em relação a dominância de mercado, foi perdendo popularidade por ser muito menos intuitivo em termos de leitura, além da sobrecarga de processamento.

Exemplo da estrutura XML:



<?xml version="1.0" encoding="UTF-8"?>
<library>
  <book>
    <title>The Great Gatsby</title>
    <author>F. Scott Fitzgerald</author>
    <genre>Novel</genre>
    <year>1925</year>
  </book>
  <book>
    <title>To Kill a Mockingbird</title>
    <author>Harper Lee</author>
    <genre>Fiction</genre>
    <year>1960</year>
  </book>
</library>

Apesar da adoção do JSON pela maioria, o XML ainda é muito usado para atender melhor a demanda de dados mais completos, é comum o banco de dados utilizar XML como formato de armazenamento.

Normalização de Dados com JSON

Na ciência da computação existe um termo chamado “tipos de dados complexos”, e podemos ver o JSON basicamente como uma forma de organizar e estruturar dados complexos de maneira hierárquica e legível.

Um exemplo de tipos de dados complexo utilizado no JSON é o objeto, ou o array, por exemplo.

Ok, mas o tópico é sobre normalização de dados, certo? A questão é que embora tipos de dados complexos possam oferecer flexibilidade e profundidade aos seus dados, também podem surgir irregularidades e discrepâncias se os dados não forem estruturados e padronizados adequadamente.

E é aí que a normalização de dados entra, esse é o processo de organizar dados em uma estrutura que minimize a redundância e facilite a consulta e atualização dos mesmos. No contexto de JSON, isso geralmente é feito dividindo os dados em várias partes relacionadas e usando IDs para referenciá-las.

Por exemplo, este é um conjunto de dados JSON que representa informações sobre livros e autores:



{
  "livros": [
    {
      "id": 1,
      "titulo": "Dom Casmurro",
      "autor": "Machado de Assis"
    },
    {
      "id": 2,
      "titulo": "Memórias Póstumas de Brás Cubas",
      "autor": "Machado de Assis"
    }
  ],
  "autores": [
    {
      "id": 1,
      "nome": "Machado de Assis",
      "nacionalidade": "Brasileiro"
    }
  ]
}

Neste exemplo, cada livro contém o nome do autor. Isso pode resultar em redundância se o mesmo autor tiver escrito vários livros. Em vez disso, podemos normalizar os dados dividindo os livros e os autores e referenciando os autores pelos IDs:



{
  "livros": [
    {
      "id": 1,
      "titulo": "Dom Casmurro",
      "autor_id": 1
    },
    {
      "id": 2,
      "titulo": "Memórias Póstumas de Brás Cubas",
      "autor_id": 1
    }
  ],
  "autores": [
    {
      "id": 1,
      "nome": "Machado de Assis",
      "nacionalidade": "Brasileiro"
    }
  ]
}

Essa abordagem economiza espaço e simplifica a atualização de informações do autor. Além disso, permite consultas mais eficientes, especialmente em conjuntos de dados grandes, pois os autores agora são referenciados por IDs únicos.

Conclusão

Obrigado por chegar até aqui, caro leitor! Fico feliz por termos explorado os conceitos essenciais do JSON, desde sua origem até sua ampla adoção juntos. Além de abordar os fundamentos, discutimos também tópicos comumente menos abordados, como a normalização de dados. Compreender esses aspectos é crucial para criar soluções eficientes e escaláveis nos seus projetos.

Por último, vou recomendar algo que me ajudou muito, anos atrás durante o meu começo na área de desenvolvimento de software. Saber que se seu JSON é válido e está correto é muito importante, às vezes deixamos escapar pequenas coisas por conta do olhar viciado. O site JASONlint valida seu JSON, confere se há erros, seja de estrutura, tipo de dados etc…

Bons estudos e que a sorte esteja sempre ao seu favor!

Referências

O que é Markdown, e como ele pode melhorar o seu README no GitHub!

Sabrina Barros — Fri, 26 Mar 2021 21:50:33 +0000

O README no GitHub é uma parte essencial do seu repositório, onde você apresenta seu projeto ou organiza seu repositório!

E para formatar o seu arquivo README utilizamos a linguagem de marcação chamada Markdown. As possibilidades dessa linguagem incluem formatações de texto de forma fácil e útil, apesar de ser uma formatação simples contém o que há de mais essencial para você deixar seu texto bem construído e organizado, por exemplo: listas, tabelas, titulação, inserção de links e imagens, bloco de código, destaque, negrito, sublinhado, itálico etc...

Onde Markdown costuma ser usado?

No próprio GitHub além do já citado arquivo README.md, pull requests, issues e na wiki. Mas também em outras plataformas para escrever mensagens em fóruns ou rich text. Este artigo mesmo foi escrito e formatado em Markdown.

Como escrever em Markdown

A partir deste ponto eu vou te ensinar como executar essa linguagem na pratica passo a passo!

Primeiro vamos abrir um preview de Markdown, para que você possa acompanhar o resultado do seu código enquanto o executa.

Abra o editor de código VSCode. Usarei ele como base nesse tutorial. (Clique aqui para baixar o VSCode caso você não o tenha instalado.)
Crie um novo arquivo com o nome README.md, repare que .md é a extensão de um arquivo Markdown.
Pressione CTRL/CMD + SHIFT + P.
Isso fara com que uma janela se abra e nela você digitara Markdown, clique na extensão de nome *Markdown: Open Preview to the Side*.

Pronto! Agora sempre que quiser abrir sua preview é só dar o comando CTRL/CMD + K depois pressione V separadamente.

Agora vamos à prática!

A partir daqui vamos para as tags de formatação em Markdown, execute-os no seu arquivo ao mesmo tempo que os aprende para ver o resultado.

Titulação

Para você destacar títulos (como os títulos deste post, por exemplo), utiliza-se #.




# Título 1  


## Título 2 


### Título 3 


#### Título 4 


##### Título 5 


###### Título 6

Título 1

Título 2

Título 3

Título 4

Título 5

Título 6

Formatação

Às vezes, existe mais de uma forma de se fazer a mesma coisa em Markdown.

Itálico



*Itálico*



_Itálico_

Negrito



**Negrito**



__Negrito__

Itálico e Negrito



***Italico e Negrito***



___Italico e Negrito___

~~Riscado~~



~~Riscado~~

Destaque



`Destaque`

Repare que estou utilizando o acento invertido (è), e não o acento comum que utilizamos no dia a dia (é).

Links

Existem duas formas de se inserir links:

Com texto âncora.



[Texto](www.google.com)

Ou apenas o link direto



<www.exemplo.com>

Imagens

É parecido com inserir links.



![texto](www.caminhodaimagem.com)

Resultado:

Listas

Para criar listas não ordenadas é só utilizar - ou *.

E
Fica
Assim

E para listas ordenadas o bom e velho 1.

Item
Outro item
Mais um item

Em ambos os casos se lembre de dar um espaço depois do ícone para o comando funcionar.

Blockquote

Caso você precise fazer uma citação ou comentário é só utilizar >.

E fica assim.

Pra continuar outro “paragrafo” como este no blockquote você precisa utilizar outro > no começo da linha.



> Paragrafo.
> Outro paragrafo.
> Uau! Um terceito paragrafo.

Paragrafo.
Outro paragrafo.
Uau! Um terceito paragrafo.

Bloco de código

Sabe os blocos de código legais que você estava vendo ao longo desse artigo? Se faz assim:

```js

  
Console.log(3 > 2) 


```

Onde esta o js você pode substituir por qualquer outra linguagem que você quer exemplificar.

Você pode substituir o acento invertido (crase) por ~ que também funciona da mesma forma.

Tasklist

Isso aqui, sabe?

Se faz assim:



[x] Fazer Rascunho do artigo
[ ] Revisar artigo
[ ] Publicar artigo

Não esqueça do espaço entre os caracteres, quando completar sua tarefa é só colocar um x entre os colchetes.

Tabelas

No Markdown você literalmente tem que desenhar as tabelas.

| Para colunas.

- Para Divisórias de título.



Exemplo | Valor do exemplo 
--------- | ------ 
Exemplo 1 | R$ 10 
Exemplo 2 | R$ 8 
Exemplo 3 | R$ 7 
Exemplo 4 | R$ 8

Fica assim:

Exemplo	Valor do exemplo
Exemplo 1	R$ 10
Exemplo 2	R$ 8
Exemplo 3	R$ 7
Exemplo 4	R$ 8

Mas caso você goste de atalhos, recomendo este site que desenha tabelas em Markdown para você e é só copiar e colar!

Conclusão

Esses são os elementos mais básicos para quem está conhecendo o Markdown e pretende utilizá-lo no dia a dia. Com isso você já consegue usar o melhor do Markdown nas suas plataformas preferidas, formatar seus textos, artigos e seus README’s.

Espero que tenha sido útil para você!

Referencias

O que é um sistema de controle de versão?

Sabrina Barros — Tue, 23 Mar 2021 20:09:44 +0000

O melhor jeito de aprender é ensinando! E por isso eu vim aqui repassar meus conhecimentos a respeito de versionamento. É meu primeiro artigo sobre programação e espero ser útil para você.

Antes de mais nada lembre-se: Git e GitHub não são a mesma coisa.

Primeiramente o que é um sistema de controle de versão? É menos assustador do que o nome eu prometo. Quando falamos de versionamento queremos dizer literalmente várias versões de um mesmo projeto/código.

Imagine a seguinte situação: você tem o trabalho de fazer o layout de um site para um cliente, porem a cada versão do site que você apresenta, o cliente pede uma alteração, e em certo ponto ele pede para você voltar algumas versões atrás, por exemplo: você fez o layout amarelo, mas depois ele pediu para alterar para azul, depois vermelho, mas no fim das contas o cliente optou pelo amarelo que você fez no começo, que chato seria ter que refazer o mesmo trabalho tudo de novo ne? Não com o versionamento! Pois com ele você pode navegar entre todas suas versões anteriores sem precisar sacrificar suas versões mais recentes para isso, você consegue alterar e resgatar todas suas versões salvas no momento que você quiser.

Onde essas versões ficam guardadas?

Relaxe, você não precisa ter um hd infinito para guardar tantas versões, porque todas elas ficam armazenadas em nuvem, em um repositório remoto online (GitHub), isso significa que você poderá acessar o seu projeto de absolutamente qualquer lugar que você estiver basta ter uma rede Wi-fi.

Repositório nada mais é do que um servidor de armazenamento de arquivos, que pode ser tanto local, quanto remoto.

Como subir seu código para o seu repositório?

Com um terminal é claro! Como o Git por exemplo, a primeira vista um terminal pode parecer assustador, mas é bem mais simples do que parece, com poucos comandos você já consegue fazer tudo que você vai precisar no dia a dia.

O papel do terminal vai ser salvar o seu código no estado em que ele está, chamamos isso de commit, sempre que você quiser guardar alguma mudança você irá realizar um commit.

Para enviar o seu commit para o repositório remoto, você precisa realizar um push, que é um comando que nada mais faz do que subir suas últimas atualizações para seu repositório.

Mas não se espante com essas palavras novas, em breve publicarei um segundo artigo onde eu te ensino como utilizar esses comandos, fazer tudo isso na pratica e irei linkar o post aqui.