Prerequisites

Install Node.js and npm, the standard package manager for javascript.

Creating the React App

Once installed Node.js, create a new React app by running the following command with Vite.

npm create vite@latest

Next, React app project name

√ Project name: ... Login_app

And give the package name

√ Package name: ... reactlogin

Select a Framework

? Select a framework: » – Use arrow keys. Return to submit.

Then select TypeScript

Open the application in vs code. Open the terminal in VS Code and run the following command

npm install

Run the application  npm run dev

Create file Login.tsx and login.css

import { useState } from 'react'
import './Login.css'
import { BrowserRouter as Routers, Routes , Route, Navigate } from 'react-router-dom'
import HomePage from '../Home'
 

// eslint-disable-next-line @typescript-eslint/no-unused-vars
function Login(){

  const [email, setEmail] = useState("")
  const[password, setPassword] = useState("")
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const[emailError, setEmailError] = useState("")
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const[passwordError,setPasswordError]= useState("")
//  const navigate = useNavigate();

  const onButtonClick = () =>{
    setEmailError("")
    setPasswordError("")

    if("" === email){
      setEmailError("Please enter your email")
      return
    }

    if("" === password)
    {
      setPasswordError("Please enter a password")
      return
    }
    if(password.length<7){
      setPasswordError("password must be 8 character or longer")
      return
    }

    if(!/^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/.test(email)){
      setEmailError("please enter a vlid email address")
      return
    }
   
    if(email){
      return(
      <>
      {
        <Routers>
          {
          <Routes>
            <Route path='/' element={<HomePage />}>

            </Route>
          </Routes>
    }
        </Routers>
      }
       
      </>
      )
    }else{
      return <Navigate to='/Component/Login/Login'/>
    }
  //navigate("../Home")

  }

    return(
        <div className="login-box">
  <h2>Login</h2>
  <form>
    <div className="user-box">
        <input  
        value={email}
        placeholder='Enter email address here' 
        onChange={ev=> setEmail(ev.target.value)}
        className={"user-box"}      
        
        />
      
      <label className='errorLabel'>{emailError}</label>
    </div>
    <div className="user-box">
      <input 
      value={password}
      placeholder='Enter password here'
      onChange={ev=>setPassword(ev.target.value)}
      className={'user-box'}
      
      />
      <label className='errorLabel'>{passwordError}</label>
    </div>
    <input onClick={onButtonClick}
      className={"inputButton"}
      type="button"      
      value={"Submit"}
    />
  </form>
</div>     
        
)
}

export default Login

Login.css

html {
  height: 100%;
}
body {
  margin:0;
  padding:0;
  font-family: sans-serif;
  background: linear-gradient(#141e30, #446891);
}

.login-box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  padding: 40px;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,.5);
  box-sizing: border-box;
  box-shadow: 0 15px 25px rgba(0,0,0,.6);
  border-radius: 10px;
}

.login-box h2 {
  margin: 0 0 30px;
  padding: 0;
  color: #fff;
  text-align: center;
}

.login-box .user-box {
  position: relative;
}

.login-box .user-box input {
  width: 100%;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  margin-bottom: 30px;
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background: transparent;
}
.login-box .user-box label {
  position: absolute;
  top:0;
  left: 0;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  pointer-events: none;
  transition: .5s;
}

.login-box .user-box input:focus ~ label,
.login-box .user-box input:valid ~ label {
  top: -20px;
  left: 0;
  color: #03e9f4;
  font-size: 12px;
}

.login-box form a {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  color: #03e9f4;
  font-size: 16px;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  transition: .5s;
  margin-top: 40px;
  letter-spacing: 4px
}

.login-box a:hover {
  background: #03e9f4;
  color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 5px #03e9f4,
              0 0 25px #03e9f4,
              0 0 50px #03e9f4,
              0 0 100px #03e9f4;
}

.login-box a span {
  position: absolute;
  display: block;
}

.login-box a span:nth-child(1) {
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #03e9f4);
  animation: btn-anim1 1s linear infinite;
}

@keyframes btn-anim1 {
  0% {
    left: -100%;
  }
  50%,100% {
    left: 100%;
  }
}

.login-box a span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #03e9f4);
  animation: btn-anim2 1s linear infinite;
  animation-delay: .25s
}

@keyframes btn-anim2 {
  0% {
    top: -100%;
  }
  50%,100% {
    top: 100%;
  }
}

.login-box a span:nth-child(3) {
  bottom: 0;
  right: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(270deg, transparent, #03e9f4);
  animation: btn-anim3 1s linear infinite;
  animation-delay: .5s
}

@keyframes btn-anim3 {
  0% {
    right: -100%;
  }
  50%,100% {
    right: 100%;
  }
}

.login-box a span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(360deg, transparent, #03e9f4);
  animation: btn-anim4 1s linear infinite;
  animation-delay: .75s
}

@keyframes btn-anim4 {
  0% {
    bottom: -100%;
  }
  50%,100% {
    bottom: 100%;
  }
}

.mainContainer {
  flex-direction: column;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.titleContainer {
  display: flex;
  flex-direction: column;
  font-size: 64px;
  font-weight: bolder;
  align-items: center;
  justify-content: center;
}

.resultContainer, .historyItem { 
  flex-direction: row;
  display: flex;
  width: 400px;
  align-items: center;
  justify-content: space-between;
}

.historyContainer {
  flex-direction: column;
  display: flex;
  height: 200px;
  align-items: center;
  flex-grow: 5;
  justify-content: flex-start;
}

.buttonContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 260px;
}

.inputContainer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.inputContainer > .errorLabel {
  color: red;
  font-size: 12px;
}

.inputBox {
  height: 48px;
  width: 400px;
  font-size: large;
  border-radius: 8px;
  border: 1px solid grey;
  padding-left: 8px;
}
input[type="button"] {
  border: none;
  background: cornflowerblue;
  color: white;
  padding: 12px 24px;
  margin: 8px;
  font-size: 15px;
  border-radius: 8px;
  cursor: pointer;
}

Open the App.tsx and call the login function

import './App.css'
import Login from './Login'

function MyApp() {

  return (
    <>
    <Login  />     
    </>
  )
}

export default MyApp

Run the application

npm run dev

See More: React Conference 2023 / 2024

The post Create a Login Form in React TypeScript appeared first on Tech Insights.

Declarative UI in React

React uses a declarative paradigm that makes it easier for developers to create and maintain complex user interfaces by allowing them to specify the desired state of the UI based on its current data with the specified state in place, react then takes care of the complex task of updating the DOM (Document Object Model).

import { useState} from 'react'

const Counter =() =>{
  const [count,setCount] = useState(0);

  const handleIncrement = () =>{
    setCount(count + 1);
  };

  return (
    <div>
      <h2>Counter: {count}</h2>
      <button onClick={handleIncrement}>Increment</button>
    </div>
  );
};

export default Counter;

Component-Based Architecture

Developers use a component-based architecture to build React Applications. Components are self-contained units that encapsulate a specific piece of functionality. Understanding component structure and composition is essential for developing scalable and maintainable React apps.

//Header.tsx
const Header =()=>{
    return(
        <header>
            <h1>React Apps</h1>
        </header>
    );
};

export default Header;

//SideMenu.tsx

const SideMenu =()=>{
    return(
        <ul>
            <li>Admin</li>
            <li>Trasaction</li>
            <li>Report</li>
        </ul>
    );
};

export default SideMenu;

// App.tsx

import Header from "./Header";
import SideMenu from "./SideMenu";


function App(){

  return (
    <>
    <Header />
    <SideMenu />
    
    </>
  );
}
    

export default App

Functional Components and Hooks

For Defining React components, functional components are now the preferred choice. And functional components may now gracefully manage state and side effects, through the introduction of hooks, such as “useState” and “useEffect”, and Code is now easier to read and maintain.

import { useState, useEffect} from 'react'

const Counter =() =>{
  const [count,setCount] = useState(0);

  useEffect( ()=> {
    document.title = 'Count: ${count}';
  },[count]);

 

  return (
    <div>
      <h2>Counter: {count}</h2>
      <button onClick={()=>  setCount(count+1)}>Counter</button>
    </div>
  );
};

export default Counter;

JSX

JSX is a syntax extension for JavaScript, that enables integrated HTML–like elements into JavaScript code. This not only enhances the expressiveness and readability of React components but is also a powerful tool for creating complex UI structures in a declarative manner.

const JsxComponent =()=>{
    return(
        <div>
            <h1>WelCome , React..!</h1>
            <p>Example of JSX-Powered component.</p>
        </div>
    );

};

export default JsxComponent;

Conclusion

React.js continues to be a powerful and widely adopted library for creating modern user interfaces. developers must become proficient in the newest ideas and industry best practices. In this article, we’ll discuss Key Concepts and Best Practices of React.

The post Key Concepts and Best Practices of React appeared first on Tech Insights.