How To Create React Login Page Using ANT Design

 Here I am going to explain how to create react login page using react js and ant design.

    

           

Step 1 ) Create react application 

     To create react application run below command. For more info click here

        npx create-react-app myfirstreact

Step 2) Install ant design and ant icons

     To install ant design in react 

      npm install antd

  and then install ant icons

npm install --save @ant-design/icons for more info click here

Step 3) Create Login.js page

        To create login page using ant and ant icons ,import Form, Input, Button, UserOutlined, LockOutlined

import {Form, Input, Button} from 'antd';

import {  UserOutlined, LockOutlined  }  from  '@ant-design/icons';

import React from 'react';

import logo from '../icons/logo.png';

import './Login.css'

import 'antd/dist/antd.css';

class Login extends React.Component

  {

    render () {

    const onFinish = async (values) => {

     

      alert(values.username);

     

    };

  

  

  return (

    <header className="Login-header">

        <img src={logo} className="App-logo" alt="logo" />

        <Spin spinning={this.state.loading}></Spin>

      

    <Form

      name="normal_login"

      className="login-form"

      onFinish={onFinish}>

      <Form.Item

        name="username"

        rules={[

          {

            required: true,

            message: 'Please input your Username!',

          },

        ]}>

        <Input prefix={<UserOutlined className="site-form-item-icon" />} 

placeholder="Username" />

      </Form.Item>

      <Form.Item

        name="password"

        rules={[

          {

            required: true,

            message: 'Please input your Password!',

          },

        ]}>

        <Input

          prefix={<LockOutlined className="site-form-item-icon" />}

          type="password"

          placeholder="Password"

        />

      </Form.Item>

      <Form.Item>

      <Button type="primary" htmlType="submit" className="login-form-button">

          Log in

      </Button>

       

      </Form.Item>

    </Form>

    </header> 

  );

} 

}

export default Login;

Step 4) Create Login.css

.Login-header

{

    background-color: #282c34;

    min-height: 100vh;

    text-align: center;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    font-size: calc(20px + 3vmin);

    color: white;

}

 So far we discuss about how to install react application and ant design and icons. And also

how to create login page . In next part we will discuss how to build react app. To learn more

click here