阿西河

所有教程

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

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      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的教程都有!

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

      目录
      目录