# Introdução

Para iniciar o desenvolvimento da página de login é preciso verificar se você possui Nodejs instalado na máquina e para isso é preciso acessar o terminal e digitar (“node - -version”) como na imagem abaixo.

Caso não tenha instalado o nodejs acesse https://nodejs.org/en/download/ e faça a instalação. Feito isso agora partiremos para criação do ambiente de desenvolvimento.

# Configurando Ambiente de Desenvolvimento

A IDE de desenvolvimento que irei utilizar hoje será o Visual Studio code que você pode encontrar aqui https://code.visualstudio.com/. Após fazer o download é só fazer a instalação que é muito simples e não nos aprofundaremos nesse artigo, mais caso queira saber mais acesse https://code.visualstudio.com/docs.

# Criando o Projeto

Abra o terminal(“cmd-shell”) e navegue até a área de trabalho como abaixo.

Agora digite (“npx create-react-app my-app”) subistituindo o “my-app” por o nome de sua escolha que no meu caso será “login”.

#Agora é só aguarda o download e instalação do projeto react, pode levar alguns minutos então não fiquem preocupados é normal :).

Ao finalizar você verá uma tela como a minha abaixo, basta acessar a pasta do projeto com (“cd login”) e depois digitar (“npm start”) e aguardar.

#logo verá o projeto rodando em localhost:3000 no seu navegador :).

#Após o teste você poderá fechar tudo e abrir o vscode na pasta login que estará na área de trabalho(Desktop).

# Código

Com o projeto aberto no vscode agora iremos remover alguns arquivos que não são importantes para o desenvolvimento do projeto, abaixo estão os arquivos que serão removidos.

#(“App.test.js-logo.svg-serviceWorker.js-setupTests.js”)

Após remover os arquivos iremos rodar novamente o server do react e verificar se irá continuar funcionando, para isso vá na aba terminal>new terminal e abrirá um terminal integrado logo abaixo, digite (“npm start”) e dê enter.

Esse problema acontece devido a falta dos arquivos que estão sendo referenciados em app.js e para corrigir isso acesse src/App.js e remova as seguintes linhas.

E preciso também remover algumas linha em src/Index.js.

#Agora o servidor irá rodar normalmente em localhost:3000 porém não retornará nada.

Agora em src/App.js iremos apagar todas as linhas e digitar o seguinte código.

import React from 'react'
import './App.css'

export default class App extends React.Component{
    render(){
        return(
            <h1>Hello world Onion Hack</h1>
        )
    }
}

#Abra o navegador em localhost:3000 e verá um Hello world.

No arquivo src/App.js apague tudo e insira o trecho de código abaixo, logo verá que em localhost:3000 já terá dois campos de input e um botão de submit e uma img, porém para que a imagem seja renderizada é preciso criar uma pasta em src/ chamada de assets, agora insira uma imagem qualquer e importe ela dentro de src/App.js .

import React from "react";
import "./App.css";

//importando a imagem de src/assets
import user from "../src/assets/user.png";
export default class App extends React.Component {
  state = {
    email: "",
    password: "",
  };
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.submit = this.submit.bind(this);
  }
  handleChange(e) {
    if (e.target.name === "email") {
      this.setState({ email: e.target.value });
    } else {
      this.setState({ password: e.target.value });
    }
  }
  submit(e) {
    e.preventDefault();
    //enviar dados para backend, geralmente utilizo axios para o envio dos dados.
    
    alert("enviado os dados para backend válidar");
  }

  render() {
    return (
      <div className="container">
        <div className="container-box">
          <img src={user} alt="img" className="user" />


          <input
            placeholder="Username"
            value={this.state.email}
            name="email"
            onChange={this.handleChange}
          />
          <input
            type="password"
            placeholder="Password"
            value={this.state.password}
            name="password"
            onChange={this.handleChange}
          />

          <button onClick={this.submit}>Entrar</button>
        </div>
      </div>
    );
  }
}

#Agora precisaremos estilizar a nossa página, e para isso acessem src/App.css e apaguem todo o conteúdo e insira o código abaixo.

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.container{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #61dafb;
}

.container-box{
  outline: none;
  height: 400px;
  width: 400px; 
  display: flex;
  flex-wrap: wrap;
 justify-content: center;
 align-items: center;
 border-radius: 20px;
background-color: #ffffff;

}
.container-box > img{
  
  height: 100px;
  width: 100px;
border-radius: 50%;
}


.container-box >input{
  width: 100%;
padding: 15px;
margin: 0px 50px 0px 50px;
border: 1px solid#61dafb;
outline: none;
  border-radius: 5px;
  font-size: 15px;
  text-align: center;

}
.container-box > input:hover{
  border: 1px solid #61dafb7e;
}

.container-box > button{
  height: 40px;
  width: 100%;
  padding: 10px;
  margin: 0px 70px 0px 70px;
  border-radius: 5px;
  font-size: 15px;
  border: none;
  background-color: #61dafb;
  color: #fff;
}
.container-box > button:hover{
animation-name: longshow;
animation-duration: 1s;
animation-fill-mode: forwards;
}
@media(max-width:600px){
  .container-box{
    width: 100%;
    height: 100vh;
    border-radius: none!important;
  }
}
@keyframes longshow{
from{

}
to{
  margin: 0px 50px 0px 50px;
}
}

#Agora novamente acessem localhost:3000 e verá a página já estilizada.

# Na versão mobile

#Final

Agora com a página finalizada é só enviar os dados do state(“email,password”) para backend validar, e para isso criei a função (“submit()”) para tratar do envior dessas informações, lembrando que é possivel fazer algumas verificações dos dados ainda no frontend.

Repositório do Projeto Para clonar o projeto basta ler a documentação em Readme.md.