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
