ant-design/b46943b4-async.59a6d438.js

(("undefined"!=typeof globalThis?globalThis:self).makoChunk_antd=("undefined"!=typeof globalThis?globalThis:self).makoChunk_antd||[]).push([["b46943b4"],{b46943b4:function(a,e,n){"use strict";n.d(e,"__esModule",{value:!0}),n.d(e,"texts",{enumerable:!0,get:function(){return t;}}),n("8f2c3340");let t=[{value:"Vite",paraId:0},{value:" is one of the best React application development tools. Let's use ",paraId:0},{value:"antd",paraId:0},{value:" within it.",paraId:0},{value:"Before all start, you may need install ",paraId:1,tocIndex:0},{value:"yarn",paraId:1,tocIndex:0},{value:" or ",paraId:1,tocIndex:0},{value:"pnpm",paraId:1,tocIndex:0},{value:" or ",paraId:1,tocIndex:0},{value:"bun",paraId:1,tocIndex:0},{value:".",paraId:1,tocIndex:0},{value:"The tool will create and initialize environment and dependencies automatically, please try config your proxy setting, or use another npm registry if any network errors happen during it.",paraId:2},{value:"Then we go inside ",paraId:3},{value:"antd-demo",paraId:3},{value:" install dependencies and start it.",paraId:3},{value:"$ cd antd-demo\n$ npm install\n$ npm run dev\n",paraId:4},{value:"Open the browser at ",paraId:5},{value:"http://localhost:5173/",paraId:5},{value:". It renders a header saying ",paraId:5},{value:"Vite + React",paraId:5},{value:" on the page.",paraId:5},{value:"Below is the default directory structure.",paraId:6,tocIndex:1},{value:"\u251C\u2500\u2500 public\n\u2502\xa0\xa0 \u2514\u2500\u2500 vite.svg\n\u251C\u2500\u2500 src\n\u2502\xa0\xa0 \u2514\u2500\u2500 assets\n\u2502       \u2514\u2500\u2500 react.svg\n\u2502\xa0\xa0 \u251C\u2500\u2500 App.css\n\u2502\xa0\xa0 \u251C\u2500\u2500 App.js\n\u2502\xa0\xa0 \u251C\u2500\u2500 index.css\n\u2502\xa0\xa0 \u251C\u2500\u2500 main.js\n\u2502\xa0\xa0 \u2514\u2500\u2500 logo.svg\n\u251C\u2500\u2500 index.html\n\u251C\u2500\u2500 package.json\n\u2514\u2500\u2500 vite.config.ts\n",paraId:7,tocIndex:1},{value:"Now we install ",paraId:8,tocIndex:1},{value:"antd",paraId:8,tocIndex:1},{value:" from yarn or npm or pnpm or bun.",paraId:8,tocIndex:1},{value:"Modify ",paraId:9},{value:"src/App.js",paraId:9},{value:", import Button component from ",paraId:9},{value:"antd",paraId:9},{value:".",paraId:9},{value:"import React from 'react';\nimport { Button } from 'antd';\n\nconst App = () => (\n  <div className=\"App\">\n    <Button type=\"primary\">Button</Button>\n  </div>\n);\n\nexport default App;\n",paraId:10},{value:"OK, you should now see a blue primary button displayed on the page. Next you can choose any components of ",paraId:11},{value:"antd",paraId:11},{value:" to develop your application. Visit other workflows of ",paraId:11},{value:"Vite",paraId:11},{value:" at its ",paraId:11},{value:"User Guide",paraId:11},{value:".",paraId:11},{value:"We are successfully running antd components now, go build your own application!",paraId:12}];}}]);