ant-design/377a4f30-async.8b95f00f.js

(("undefined"!=typeof globalThis?globalThis:self).makoChunk_antd=("undefined"!=typeof globalThis?globalThis:self).makoChunk_antd||[]).push([["377a4f30"],{"12248e42":function(e,a,t){"use strict";t.d(a,"__esModule",{value:!0}),t.d(a,"texts",{enumerable:!0,get:function(){return n;}}),t("d5f11379");let n=[{value:"Farm",paraId:0},{value:" is a Rust-Based Web Building Engine to Facilitate Your Web Program and JavaScript Library. This article will try to use ",paraId:0},{value:"Farm",paraId:0},{value:" to create a project and import antd.",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:"During the initialization process, ",paraId:2},{value:"farm",paraId:2},{value:" provides a series of templates for us to choose, We need choose the ",paraId:2},{value:"React",paraId:2},{value:" template.",paraId:2},{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:3},{value:"Then we go inside project and start it.",paraId:4},{value:"$ cd farm-project\n$ npm install\n$ npm start\n",paraId:5},{value:"Open the browser at ",paraId:6},{value:"http://localhost:9000",paraId:6},{value:". It renders a title saying ",paraId:6},{value:"Farm with React",paraId:6},{value:" on the page, which is considered successful.",paraId:6},{value:"Now we install ",paraId:7,tocIndex:1},{value:"antd",paraId:7,tocIndex:1},{value:" from yarn or npm or pnpm or bun.",paraId:7,tocIndex:1},{value:"Modify ",paraId:8},{value:"src/main.tsx",paraId:8},{value:", import Button component from ",paraId:8},{value:"antd",paraId:8},{value:".",paraId:8},{value:"import React from 'react';\nimport { Button } from 'antd';\n\nexport function Main() {\n  return (\n    <div>\n      <Button type=\"primary\">Button</Button>\n    </div>\n  );\n}\n",paraId:9},{value:"OK, you should now see a blue primary button displayed on the page. Next you can choose any components of ",paraId:10},{value:"antd",paraId:10},{value:" to develop your application. Visit other workflows of ",paraId:10},{value:"Farm",paraId:10},{value:" at its ",paraId:10},{value:"Official documentation",paraId:10},{value:".",paraId:10},{value:"Ref to the ",paraId:11,tocIndex:2},{value:"Customize Theme documentation",paraId:12,tocIndex:2},{value:". Modify theme with ConfigProvider:",paraId:11,tocIndex:2},{value:"import React from 'react';\nimport { Button, ConfigProvider } from 'antd';\n\nexport function Main() {\n  return (\n    <ConfigProvider theme={{ token: { colorPrimary: '#00b96b' } }}>\n      <Button type=\"primary\">Button</Button>\n    </ConfigProvider>\n  );\n}\n",paraId:13,tocIndex:2},{value:"We are successfully running the antd components using Rsbuild now, let\u2019s start build your own application!",paraId:14,tocIndex:2}];},"377a4f30":function(e,a,t){"use strict";t.d(a,"__esModule",{value:!0}),t.d(a,"default",{enumerable:!0,get:function(){return p;}});var n=t("777fffbe"),r=t("f19d2b93"),l=n._(t("b622e337")),s=n._(t("5437c7d5")),d=n._(t("97c488ea")),u=n._(t("c96b0d01")),i=t("5b220c3d"),o=t("9c86e52a"),c=t("12248e42"),p=function(){return(0,r.jsx)(o.DumiPage,{children:(0,r.jsx)(i.Suspense,{fallback:(0,r.jsx)(u.default,{}),children:(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)("div",{className:"markdown",children:[(0,r.jsxs)("p",{children:[(0,r.jsx)(d.default,{href:"https://www.farmfe.org/",sourceType:"a",children:c.texts[0].value}),c.texts[1].value,(0,r.jsx)("code",{children:c.texts[2].value}),c.texts[3].value]}),(0,r.jsxs)("h2",{id:"install-and-initialization",children:[(0,r.jsx)(d.default,{"aria-hidden":"true",tabIndex:"-1",href:"#install-and-initialization",sourceType:"a",children:(0,r.jsx)("span",{className:"icon icon-link"})}),"Install and Initialization"]}),(0,r.jsxs)("p",{children:[c.texts[4].value,(0,r.jsx)(d.default,{href:"https://github.com/yarnpkg/yarn",sourceType:"a",children:c.texts[5].value}),c.texts[6].value,(0,r.jsx)(d.default,{href:"https://pnpm.io",sourceType:"a",children:c.texts[7].value}),c.texts[8].value,(0,r.jsx)(d.default,{href:"https://bun.sh",sourceType:"a",children:c.texts[9].value}),c.texts[10].value]})]}),(0,r.jsx)(s.default,{npm:"$ npm create farm@latest",yarn:"$ yarn create farm@latest",pnpm:"$ pnpm create farm@latest",bun:"$ bun create farm@latest"}),(0,r.jsxs)("div",{className:"markdown",children:[(0,r.jsxs)("p",{children:[c.texts[11].value,(0,r.jsx)("code",{children:c.texts[12].value}),c.texts[13].value,(0,r.jsx)("code",{children:c.texts[14].value}),c.texts[15].value]}),(0,r.jsx)("p",{children:c.texts[16].value}),(0,r.jsx)("p",{children:c.texts[17].value}),(0,r.jsx)(l.default,{lang:"bash",children:c.texts[18].value}),(0,r.jsxs)("p",{children:[c.texts[19].value,(0,r.jsx)(d.default,{href:"http://localhost:9000",sourceType:"a",children:c.texts[20].value}),c.texts[21].value,(0,r.jsx)("code",{children:c.texts[22].value}),c.texts[23].value]}),(0,r.jsxs)("h2",{id:"import-antd",children:[(0,r.jsx)(d.default,{"aria-hidden":"true",tabIndex:"-1",href:"#import-antd",sourceType:"a",children:(0,r.jsx)("span",{className:"icon icon-link"})}),"Import antd"]}),(0,r.jsxs)("p",{children:[c.texts[24].value,(0,r.jsx)("code",{children:c.texts[25].value}),c.texts[26].value]})]}),(0,r.jsx)(s.default,{npm:"$ npm install antd --save",yarn:"$ yarn add antd",pnpm:"$ pnpm install antd --save",bun:"$ bun add antd"}),(0,r.jsxs)("div",{className:"markdown",children:[(0,r.jsxs)("p",{children:[c.texts[27].value,(0,r.jsx)("code",{children:c.texts[28].value}),c.texts[29].value,(0,r.jsx)("code",{children:c.texts[30].value}),c.texts[31].value]}),(0,r.jsx)(l.default,{lang:"tsx",children:c.texts[32].value}),(0,r.jsxs)("p",{children:[c.texts[33].value,(0,r.jsx)("code",{children:c.texts[34].value}),c.texts[35].value,(0,r.jsx)("code",{children:c.texts[36].value}),c.texts[37].value,(0,r.jsx)(d.default,{href:"https://www.farmfe.org",sourceType:"a",children:c.texts[38].value}),c.texts[39].value]}),(0,r.jsxs)("h3",{id:"customize-theme",children:[(0,r.jsx)(d.default,{"aria-hidden":"true",tabIndex:"-1",href:"#customize-theme",sourceType:"a",children:(0,r.jsx)("span",{className:"icon icon-link"})}),"Customize Theme"]}),(0,r.jsxs)("p",{children:[c.texts[40].value,(0,r.jsx)(d.default,{to:"/docs/react/customize-theme",sourceType:"Link",children:c.texts[41].value}),c.texts[42].value]}),(0,r.jsx)(l.default,{lang:"tsx",children:c.texts[43].value}),(0,r.jsx)("p",{children:c.texts[44].value})]})]})})});};}}]);