阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

    教程列表

    数据库
    抓包专区
    测试专区

    Ant Design 在 create-react-app 中使用

    前言

    create-react-app 是 React 的脚手架,本文会尝试在 create-react-app 创建的工程中使用 antd 组件,并自定义 webpack 的配置以满足各类工程化需求。

    你可以通过 create-react-app 教程 查看这个是怎么使用的

    初始化项目

    参考 create-react-app 项目安装和使用 创建项目

    npx create-react-app my-app
    cd my-app
    npm start
    
    # 或者
    yarn start
    

    项目的目录

    项目的目录如下

    └─my-app
        │  .gitignore
        │  package.json
        │  README.md
        │  yarn.lock
        │
        ├─node_modules
        ├─public
        │      favicon.ico
        │      index.html
        │      logo192.png
        │      logo512.png
        │      manifest.json
        │      robots.txt
        │
        └─src
                App.css
                App.js
                App.test.js
                index.css
                index.js
                logo.svg
                serviceWorker.js
                setupTests.js
    

    安装并引入 antd

    $ yarn add antd
    

    使用

    修改 src/App.js,引入 antd 的按钮组件。

    import React from 'react';
    import { Button } from 'antd';
    import './App.css';
    
    const App = () => (
      <div className="App">
        <Button type="primary">Button</Button>
      </div>
    );
    
    export default App;
    

    修改 src/App.css,在文件顶部引入 antd/dist/antd.css

    @import '~antd/dist/antd.css';
    

    好了,现在你应该能看到页面上已经有了 antd 的蓝色按钮组件,接下来就可以继续选用其他组件开发应用了。

    我们现在已经把 antd 组件成功运行起来了,开始开发你的应用吧!

    卖前端学习教程

    只需几十元,就能买到培训班的内部教程!开启高薪之路!

    零基础小白阿里P7的教程都有!

    同时长期收购所有培训班的前端教程

    目录
    目录