Explorer Lab - JavaScript DOM

Repositório Oficial do Projeto

• rocketseat-education/explorer-lab-01

Layout Figma

Você pode visualizar o layout do projeto através DESSE LINK.

É necessário ter conta no Figma para acessá-lo.

Tecnologias Utilizadas

Esse projeto foi desenvolvido com as seguintes tecnologias:

• HTML e CSS
• JavaScript e JSON
• Node e NPM
• Vite
• iMask

Projeto

• O Rocketpay é um componente que simula o formulário de preenchimento de cartão de crédito, onde é possível adicionar máscara aos inputs e atualizar elementos HTML via DOM.

GitHub

Iniciar o Repositório git

• Iniciando um Novo repositório local

git init

Enviando repositório para o GitHub com Git (CLI)

• Criando um repositório no GitHub pelo Git (CLI)

gh repo create

Abrindo o repositório na WEB

• Solicito que seja aberto no navegador meu repositório

gh repo view --web

Comandos do Git

Comandos iniciais para um fluxo de commit no GitHub

Verificando arquivos modificados

• Verifico todos os arquivos modificados disponíveis para o commit

git status

Adicionando arquivos ao Stage

• Adicionando os arquivos ao stage e efetuando o commit nomeado

git add .
git commit -m "commit message"

Commitando para o Master

• Este comando envia o código para o repositório na brach master

git push origin master

Vite

Iniciando o Projeto (Novo)

Utilize este comando para criar um Novo projeto do ZERO caso necessário

npm create vite@latest

Iniciando o Projeto (Clone do repositório do Myke)

Fork que Fiz do Repositório Oficial:

• explorer-lab-01: Javascript e DOM

Utilize este comando para iniciar um repositório clonado

npm i

Adicionando o IMask

Página do IMask

• IMask

Instalando o IMask

• Executo o comando via npm para instalar o package do IMask

npm install imask

Fazendo o import do IMask no "main.js"

• No arquivo main.js adicione o import do IMask logo abaixo do index.css

import IMask from "imask"

Expressões Regulares no JavaScript

Criando uma expressão regular via literal

• Usando um literal de expressão regular

const re = /foo/;

Criando uma expressão regular via função construtora

• Chamando a função construtora do RegExp

const re = new RegExp(/foo/);

Publicando na Vercel

Projeto publicado na Vercel conforme instruções do Explorer

Link

• https://vercel.com/

Passo a Passo:

1. Cadastre-se na vercel
2. Efetue o login vinculando a conta da vercel com a seua conta do GitHub
3. Crie um novo projeto e aponte ele para o seu repositório no GitHub
   • Em alguns casos será necessário permitir que a vercel veja seu repositorio
4. Clique em Deploy

Projeto publicado na Vercel (Oficial do Explorer-Lab-01)

• https://rocketseat-explorer-lab-javascript-dom.vercel.app/

Publicando no GitHub Pages

Teste adicional feito para verificar como fica a publicação no gh-pages

instalando o plugin-react para o vite

npm i @vitejs/plugin-react

Criando o vite.config.js

Defina no arquivo de configurações da propriedade base para "/rocketseat-explorer-lab-javascript-dom/"

import { defineConfig } from "vite"
import react from "@vitejs/plugin-react"

// https://vitejs.dev/config/
export default defineConfig({
  base: "/rocketseat-explorer-lab-javascript-dom/",
  plugins: [react()],
})

Ajustes no package.json

{
  "name": "projeto-base",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview --port 8080",
  },
  "devDependencies": {
    "gh-pages": "^4.0.0",
    "vite": "^3.1.0"
  },
  "dependencies": {
    "@vitejs/plugin-react": "^2.1.0",
    "imask": "^6.4.3"
  }
}

Gerando o build e o deploy da página estatica

run build

Verificar o preview gerado

run preview

Adicionando a pasta dist ao repositório

Antes deste passo remova dist do .gitignore

git add dist -f

Faça o commit da pasta dist

git commit -m "Adding dist"

Gerando a branch gh-pages

git subtree push --prefix dist origin gh-pages

Deploy final no gh-pages

Para realizar o Deployed da sua página, entre no seu repositório.

Siga os passos a baixo:

1. Navegue até a página Settings.
2. Role a página para baixo até a guia Pages.
3. Faça o link do GitHub pages com seu repositório estatico.

Projeto publicado GitHub Pages

• https://claudneysessa.github.io/rocketseat-explorer-lab-javascript-dom/

Licença

Esse projeto está sob a licença MIT.

Onde me encontrar

Veja o meu Perfil no Github

• github.com/claudneysessa

Contatos

• Instagram
• Linkedin