ReactJS – Creating Login Page

npm install react-router-dom

src/
├── components/
│   ├── LoginPage.js       # Login page component
│   ├── WelcomePage.js     # Welcome page component
├── App.js                 # Main application file
└── index.js               # Entry point

import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';

const LoginPage = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const navigate = useNavigate();

  const handleLogin = (e) => {
    e.preventDefault();
    // Simple authentication logic
    if (username === 'admin' && password === 'password') {
      alert('Login Successful!');
      navigate('/welcome'); // Navigate to welcome page
    } else {
      alert('Invalid credentials. Try again!');
    }
  };

  return (
    <div style={styles.container}>
      <h1 style={styles.heading}>Login to Insurance Portal</h1>
      <form onSubmit={handleLogin} style={styles.form}>
        <input
          type="text"
          placeholder="Username"
          value={username}
          onChange={(e) => setUsername(e.target.value)}
          style={styles.input}
          required
        />
        <input
          type="password"
          placeholder="Password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          style={styles.input}
          required
        />
        <button type="submit" style={styles.button}>Login</button>
      </form>
    </div>
  );
};

const styles = {
  container: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    height: '100vh',
    backgroundColor: '#f7f9fc',
  },
  heading: {
    fontSize: '2rem',
    marginBottom: '1.5rem',
  },
  form: {
    display: 'flex',
    flexDirection: 'column',
    width: '300px',
  },
  input: {
    marginBottom: '1rem',
    padding: '10px',
    fontSize: '1rem',
  },
  button: {
    padding: '10px',
    fontSize: '1rem',
    backgroundColor: '#007bff',
    color: '#fff',
    border: 'none',
    cursor: 'pointer',
  },
};

export default LoginPage;

import React from 'react';

const WelcomePage = () => {
  return (
    <div style={styles.container}>
      <h1 style={styles.heading}>Welcome to Insurance Portal</h1>
      <p style={styles.paragraph}>Your trusted partner for all insurance needs!</p>
    </div>
  );
};

const styles = {
  container: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    height: '100vh',
    backgroundColor: '#f0f8ff',
    color: '#333',
    fontFamily: 'Arial, sans-serif',
  },
  heading: {
    fontSize: '3rem',
    marginBottom: '1rem',
  },
  paragraph: {
    fontSize: '1.2rem',
    textAlign: 'center',
  },
};

export default WelcomePage;

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import LoginPage from './components/LoginPage';
import WelcomePage from './components/WelcomePage';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<LoginPage />} />
        <Route path="/welcome" element={<WelcomePage />} />
      </Routes>
    </Router>
  );
}

export default App;

npm start

Module not found: Error: Can't resolve 'react-router-dom' in 'D:\React_Project\insurance-app\src'
ERROR in ./src/App.js 5:0-74
Module not found: Error: Can't resolve 'react-router-dom' in 'D:\React_Project\insurance-app\src'

ERROR in ./src/components/LoginPage.js 6:0-47
Module not found: Error: Can't resolve 'react-router-dom' in 'D:\React_Project\insurance-app\src\components'

webpack compiled with 2 errors
PS D:\React_Project\insurance-app> npm install react-router-dom

added 6 packages, and audited 1366 packages in 7s

263 packages are looking for funding
run npm fund for details

8 vulnerabilities (2 moderate, 6 high)

To address all issues (including breaking changes), run:
npm audit fix --force

Run npm audit for details.
PS D:\React_Project\insurance-app> npm start

insurance-app@0.1.0 start
react-scripts start

(node:31960) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
(Use node --trace-deprecation ... to show where the warning was created)
(node:31960) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
Starting the development server…
Compiled successfully!

You can now view insurance-app in the browser.

Local: http://localhost:3000
On Your Network: http://192.168.1.37:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully