Projeto de React JS para Iniciantes

Neste tutorial, vamos criar uma página de login utilizando React JS. O React JS é uma biblioteca JavaScript popular para a criação de interfaces de usuário interativas.

Passos para criar a tela de login

1. Crie um novo projeto React JS utilizando o comando npx create-react-app tela-de-login.
2. Navegue até a pasta do projeto e abra o arquivo App.js.
3. Adicione os campos de entrada para o nome de usuário e senha utilizando os componentes <input type="text"> e <input type="password">.
4. Crie um botão de login usando o componente <button>.
5. Crie um estado para armazenar o nome de usuário e senha utilizando o hook useState.
6. Crie uma função de login que verifica se o nome de usuário e senha estão corretos.
7. Implemente a lógica de redirecionamento para a página principal após o login bem-sucedido.

Código exemplo

import React, { useState } from 'react';

function App() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = () => {
    if (username === 'admin' && password === 'admin123') {
      window.location.href = '/home';
    } else {
      alert('Nome de usuário ou senha incorretos');
    }
  };

  return (
    

       setUsername(e.target.value)} placeholder="Nome de usuário" />
      

       setPassword(e.target.value)} placeholder="Senha" />
      

      Login
    
  );
}

export default App;

Com estes passos simples, você pode criar uma tela de login funcional utilizando React JS. Este projeto é ideal para iniciantes que desejam aprender mais sobre o desenvolvimento de aplicações web usando React JS.