IntelliJIDEA的搭建React+Ant design新手入门

落日映苍穹つ 2023-10-12 14:15 68阅读 0赞

> 根据官方的文档在IntelliJIDEA的搭建React+Ant design的项目

# 1. 新建项目 #

![在这里插入图片描述][0709eb69583d4d9c8364ab1073843a6e.png]

![在这里插入图片描述][573281de373242d5a91dde58fe15be74.png]

![在这里插入图片描述][b590c3e1a38a443da3e5a7685bd5532c.png]  
或者在终端输入

create-react-app 你的项目名

# 2.新建的项目下引入antd组件库 #

yarn add antd  或者npm install antd --save

![在这里插入图片描述][8860d0392b0649d281952bac49c57446.png]

# 3.测试antd启动 #

yarn start
    或者
    npm start

![在这里插入图片描述][7e488c3ab63e445286edcc92d39c0c79.png]

# 4.导入组件 #

[参考][Link 1]：https://ant.design/docs/react/getting-started-cn

![在这里插入图片描述][92d74712ccad48e5a635f02d71e8f749.png]

## 代码 ##

index.js

import React from "react";
    import {
         createRoot } from "react-dom/client";
    import {
         Button, DatePicker, Space, version } from "antd";
    import 'antd/dist/reset.css';
    import "./index.css";
    
    const App = () => {
        
      return (
        <div className="App">
          <h1>antd version: {
        version}</h1>
          <Space>
            <DatePicker />
            <Button type="primary">Primary Button</Button>
          </Space>
        </div>
      );
    };
    
    const root = createRoot(document.getElementById("root"));
    root.render(<App />);

index.html

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <title>React App</title>
      </head>
      <body>
        <noscript>You need to enable JavaScript to run this app.</noscript>
        <div id="root"></div>
      </body>
    </html>

index.css

.App {
        
      padding: 20px;
    }

package.json

{
        
      "dependencies": {
        
        "react-dom": "18.x",
        "react": "18.x",
        "dayjs": "latest",
        "antd": "^5.0.0-rc.1"
      },
      "keywords": [],
      "name": "antd-reproduction-template",
      "description": ""
    }

## 页面显示 ##

![在这里插入图片描述][b2bcc85292d7463ca66cc87e9d71a159.png]

[0709eb69583d4d9c8364ab1073843a6e.png]: https://img-blog.csdnimg.cn/0709eb69583d4d9c8364ab1073843a6e.png
[573281de373242d5a91dde58fe15be74.png]: https://img-blog.csdnimg.cn/573281de373242d5a91dde58fe15be74.png
[b590c3e1a38a443da3e5a7685bd5532c.png]: https://img-blog.csdnimg.cn/b590c3e1a38a443da3e5a7685bd5532c.png
[8860d0392b0649d281952bac49c57446.png]: https://img-blog.csdnimg.cn/8860d0392b0649d281952bac49c57446.png
[7e488c3ab63e445286edcc92d39c0c79.png]: https://img-blog.csdnimg.cn/7e488c3ab63e445286edcc92d39c0c79.png
[Link 1]: https://ant.design/docs/react/getting-started-cn
[92d74712ccad48e5a635f02d71e8f749.png]: https://img-blog.csdnimg.cn/92d74712ccad48e5a635f02d71e8f749.png
[b2bcc85292d7463ca66cc87e9d71a159.png]: https://img-blog.csdnimg.cn/b2bcc85292d7463ca66cc87e9d71a159.png