React的学习之路（二）引入antd组件库

最新推荐文章于 2024-04-22 18:01:49 发布

我真的好想笑

最新推荐文章于 2024-04-22 18:01:49 发布

阅读量1.6k

点赞数

分类专栏： React学习之路文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/qq_34988939/article/details/122208910

版权

React学习之路专栏收录该内容

5 篇文章 2 订阅

订阅专栏

引入antd组件库，利用组件库完成登录页面

文章目录

引入antd组件库，利用组件库完成登录页面
1.引入组件库
2.修改替换创建的React项目文件名,并修改代码
3.完成代码修改，运行项目
- 3.1 运行项目
4.总结

1.引入组件库

1.执行命令 npm add antd安装并引入 antd。

2.修改替换创建的React项目文件名,并修改代码

2.1 修改目录中的App.cs/App.js为Login.cs/Login.js。

修改完成后的目录

2.2 修改index.js代码

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Login from './Login';
import reportWebVitals from './reportWebVitals';


ReactDOM.render(
  <React.StrictMode>
    <Login/>
  </React.StrictMode>,
  document.getElementById('root')
);
reportWebVitals();

2.3 修改index.css代码

body {
  display: flex;
  justify-content:center;
}
code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

2.4 修改index.html 代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <link ref="stylesheet" href="../src/Login.css"/>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

2.4 修改Login.js代码

import './Login.css';
import React from 'react';
import { Form, Input, Button, Checkbox,Card } from 'antd';
const Login = () => {
  const onFinish = async(values: any) => {
    console.log('Success:', values);
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };
  return (
    <div className="loginForm">
      <Card title="Login" style={{ width: 300 }}>
        <Form
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off">
          <Form.Item
            label="Username"
            name="username"
            rules={[{ required: true, message: 'Please input your username!' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="Password"
            name="password"
            rules={[{ required: true, message: 'Please input your password!' }]}
          >
          <Input.Password />
          </Form.Item>
          <Form.Item name="remember" valuePropName="checked" wrapperCol={{ offset: 8, span: 16 }}>
            <Checkbox>Remember me</Checkbox>
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button type="primary" htmlType="submit">
              Login
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
};
export default Login;

2.5 修改Login.css代码

@import '~antd/dist/antd.css';
.loginForm{
    display: flex;
    justify-content:center;
    align-items:center;
}
#root{
    display: flex;
    justify-content: center;
}

3.完成代码修改，运行项目

3.1 运行项目

 npm run start

成功后应该会显示如下页面：
运行成功后的页面

4.总结

组件库我了解的有Ant Design与Element React 两种，但是使用过Element之后感觉并不如Ant Design顺手，所以我选择了Ant Design组件库，全凭个人喜好。
前端布局我使用了Flex布局，好用！
参考学习博客链接:
Flex.
Ant Design.
侵删。
作者本人也是菜鸟一个，刚刚学习react这种比较先进的响应式前端框架，如有哪里有错误，请多多指教。

我真的好想笑

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
React的学习之路（二）引入antd组件库

引入antd组件库，利用组件库完成登录页面文章目录引入antd组件库，利用组件库完成登录页面1.引入组件库2.修改替换创建的React项目文件名,并修改代码2.1 修改目录中的App.cs/App.js为Login.cs/Login.js。2.2 修改index.js代码2.3 修改index.css代码2.4 修改index.html 代码2.4 修改Login.js代码2.5 修改Login.css代码3.完成代码修改，运行项目3.1 运行项目4.总结1.引入组件库1.执行命令 npm add a
复制链接

扫一扫