#DEVLOG

EM PRODUÇÃO

Isso não é um tutorial

Digital Business Card

Este é o primeiro projeto solo do curso de React do Scrimba.

Infelizmente esse projeto não é mais parte do plano gratuito do curso, mas felizmente eu tenho o design salvo na minha conta do Figma pois estou revisitando o curso. Agora com mais conhecimento e atenção.

🔗 LINK DO DESIGN No Figma para quem quiser faze-lo.

Começando do jeito certo

Os maiores objetivos ao fazer esses pequenos projetos são

Treinar para o mercado de trabalho
Demonstrar suas habilidades como profissional
Fixar os conhecimentos

Para atingir esses objetivos é importante fazer tudo sem se sabotar, sem pular passos e buscando completar a tarefa da forma mais real possível. Neste caso eu vou começar criando um repositório no Github para hospedar o meu código, manter o controle de versão e utilizar a ferramenta Github Pages para publicar este projeto e poder disponibilizar como portifólio de para quem quiser ver apenas com um link.

Pequena Curiosidade
Para treinar, este post está todo sendo escrito em HTML

Criando Repositŕorio no Github

Quase todo trabalho de programador frontend vai te exigir trabalhar com GitHub então é bom começar por aqui, e em segundo lugar acredito que assim que criamos e configuramos todo o ambiente de trabalho, fica mais fácil fluir com o projeto. Mesmo este sendo um projeto pequeno a intenção aqui é treinar para como faremos no dia a dia como desenvolvedores.

Depois de criar meu novo repositório preciso cria-lo em minha máquina e conecta-los

Criando App React com Vite

Antes de criar meu repositório git local, preciso ter o que versionar. Como meu objetivo é publicar um aplicativo React vou usar o Vite para criar meu boiler plate e poder edita-lo posteriormente.

Hora de testar o App

Criando Repositóri Git Local e Conectando com o Github


  git init

  git add .

  git commit -m "Criando App React com Vite"

  git branch -M main

  git remote add origin https://github.com/flou-ainan/scrimba-learn-react-first-project.git

  git push -u origin main

Repositório no GitHub sincronizado

Protegendo meu código

Agora vou criar um segundo Branch para desenvolvimento, para aumentar a segurança do meu código fonte.

Configurando o Github Pages

Esta é a última etapa do processo de preparar o ambiente de desenvolvimento para depois eu começar a de fato por a mão no código.

Para essa tarefa abrirei meu repositório no VScode.

SEGUIR ESTES PASSOS

Fazendo o Deploy da Aplicação

Depois de tudo configurado, fiz o commit e o push das alterações no branch dev e apenas executei o novo comando adicionado


	npm run deploy

E magicamente meu deploy foi feito pelo github

Resultado

Note para o endereço, não esta mais em localhost e sim nos servidores do GitHub

Hora do código!

Limpeza do código

Nesta etapa a primeira coisa que farei será limpar todo o código e deixar o App "limpo".

Modelagem HTML

Gosto de analisar o design e dividir em tags antes de começar a por os dados e estilos. Para se construir uma casa aprimeiro fazemos a estrutura e esse conceito também unciona muito bem por aqui.

Como eu fiz

Depois de fazer essa estrutura em pseudo-código baseada em HTML comecei a implementar o código de fato com o conteúdo. Separei os componentes em arquivos a parte e por fim implementei a estilização. Esse processo levou tempo e muitas etapas

Essa foi a estrutura de arquivos que usei. O Código está disponível no meu Repositório do Github

Agora para finalizar este projeto eu adicionarei um README.MD na Raiz do Projeto com:

Um link de acesso à página
Um print da página pronta
Uma breve explicação do projeto
Um link para este artigo

Arquivo readme em ingles, linguagem que uso em meu github; com pré-visualização escrito no VSCode.

Repositório antes do Readme

Repósitório depois do Push com o novo arquivo Readme.

Mestre Flou

Pesquisar este blog

Publicando o Primeiro Projeto Solo - Série Scrimba React Course