/VEL_Desktop

Página Front End Desktop

Primary LanguageJavaScript

Virtual Easy Log

Entrando no projeto pela primeira vez? Confira o passo a passo:

Baixando o projeto

  1. Localize o botão de criar um "Fork" no canto direito superior:

image

  1. Preencha o nome do seu usuário, DEMARQUE a caixinha e dê uma descrição ao fork, Exemplo: "Alteração de Diogo Antonny, fazendo as tela de pagamento, lading page e a tela de login.", em seguida clique em "create Fork" ou "Criar Fork":

image

  1. Após esses passos, o ambiente será baixado em seu github:

image

  1. Escolha o seu time de trabalho/Branch:

image

  1. Baixe o repositório para a sua maquina via git:

image

Como funciona a estrutura do código:

image

  • Pasta "Pages": Ficará todas as páginas html de nosso projeto (Tirando a index.html);
  • Pasta "assets": Ficaram os arquivos de imagens e estilos css.
  • Pasta "Paginas": Ficaram os componentes reacts que serão utilizados pelas as páginas html.
  • Pasta "Components": Ficaram os componentes reacts filhos de cada componente da pasta "Paginas".

Como iniciar o código:

  1. Abra o terminal, Ctrl + Shift + '

  2. Digite o comando npm run dev, caso o ocorra um erro, certifique-se de estar dentro da pasta "ambiente", para isso utilize o comando cd .\ambiente\

  3. No navegador escreva o seguinte link: http://localhost:5173

  4. Precione Ctrl + C para finalizar o terminal.

Criando uma página:

  1. Crie uma página html na pasta "pages" e crie a estrutura inicial dela, exemplo:

image

<!doctype html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Página Exemplo</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="Link do componente na pasta 'Paginas' aqui!"></script>
  </body>
</html>
  1. Após isso, dentro da pasta "Paginas", crie outra pasta de acordo com o nome da sua pagina html:

image

  1. Depois da ter criado a pasta, dentro dela, crie um arquivo chamado "main.jsx" com a seguinte estrutura:
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './app.jsx' 

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)
  1. Após isso, crie outro arquivo, na mesma pasta, com o nome de "app.jsx" com a seguinte estrutura:
function App() {
  return (
    <>
      {/* Comece a codar por aqui! */}
    </>
  )
}

export default App;

Criando e utilizando componentes:

Utilizando o exemplo anterior.

  1. Crie uma pasta dentro de "components" de acordo com o nome da sua página:

image

  1. Após isso, já é possivel criar um componente, exemplo:

image

export default function HelloWorld(){
    return(
        <>
            <h1>Hello World!</h1>
        </>
    )
}
  1. Desse jeito, poderemos utilizar o componente em nosso app.jsx:

image

Abrindo o arquivo no navegador:

  1. localize o arquivo "app.jsx" dentro da pasta "src":

image

  1. Dentro dela, adicione o caminho/link da sua página html (Adicione a tag <a href""></a>):

Neste caso adicionamos <a href="../pages/paginaTeste.html">Tela teste aqui!</a>

image

  1. Depois disso, no terminal, execute o comando npm run dev e no navegador escreva o seguinte link: http://localhost:5173

image

  1. Agora basta clica no link da sua página para visualiza-la em tempo real:

image

Enviando as alterações:

  1. Selecione a Branch/equipe que você deseja enviar:

image

  1. Localize e clique no botão "Contribute", depois clique em "Open Pull Request":

image

  1. Após isso, adicione um título e descrição e clique em "Create Pull Request":

image