- Localize o botão de criar um "Fork" no canto direito superior:
- 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":
- Após esses passos, o ambiente será baixado em seu github:
- Escolha o seu time de trabalho/Branch:
- Baixe o repositório para a sua maquina via git:
- 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".
-
Abra o terminal,
Ctrl + Shift + '
-
Digite o comando
npm run dev
, caso o ocorra um erro, certifique-se de estar dentro da pasta "ambiente", para isso utilize o comandocd .\ambiente\
-
No navegador escreva o seguinte link:
http://localhost:5173
-
Precione
Ctrl + C
para finalizar o terminal.
- Crie uma página html na pasta "pages" e crie a estrutura inicial dela, exemplo:
<!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>
- Após isso, dentro da pasta "Paginas", crie outra pasta de acordo com o nome da sua pagina html:
- 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>,
)
- 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;
Utilizando o exemplo anterior.
- Crie uma pasta dentro de "components" de acordo com o nome da sua página:
- Após isso, já é possivel criar um componente, exemplo:
export default function HelloWorld(){
return(
<>
<h1>Hello World!</h1>
</>
)
}
- Desse jeito, poderemos utilizar o componente em nosso
app.jsx
:
- localize o arquivo "app.jsx" dentro da pasta "src":
- 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>
- Depois disso, no terminal, execute o comando
npm run dev
e no navegador escreva o seguinte link:http://localhost:5173
- Agora basta clica no link da sua página para visualiza-la em tempo real:
- Selecione a Branch/equipe que você deseja enviar:
- Localize e clique no botão "Contribute", depois clique em "Open Pull Request":
- Após isso, adicione um título e descrição e clique em "Create Pull Request":