ant-design/c0e3b1f9-async.45445db5.js

(("undefined"!=typeof globalThis?globalThis:self).makoChunk_antd=("undefined"!=typeof globalThis?globalThis:self).makoChunk_antd||[]).push([["c0e3b1f9"],{c0e3b1f9:function(e,a,s){"use strict";s.d(a,"__esModule",{value:!0}),s.d(a,"default",{enumerable:!0,get:function(){return h;}});var n=s("777fffbe"),l=s("f19d2b93"),d=n._(s("b622e337")),r=n._(s("97c488ea")),c=n._(s("676a306f")),t=n._(s("c96b0d01")),i=s("5b220c3d"),u=s("9c86e52a");function o(){let{texts:e}=(0,u.useRouteMeta)();return(0,l.jsx)(l.Fragment,{children:(0,l.jsxs)("div",{className:"markdown",children:[(0,l.jsxs)("p",{children:[e[0].value,(0,l.jsx)("strong",{children:e[1].value}),e[2].value,(0,l.jsx)(r.default,{href:"https://react.dev",sourceType:"a",children:e[3].value}),e[4].value,(0,l.jsx)(r.default,{href:"https://nodejs.org/",sourceType:"a",children:e[5].value}),e[6].value]}),(0,l.jsx)("p",{children:e[7].value}),(0,l.jsxs)("p",{children:[e[8].value,(0,l.jsx)(r.default,{to:"/docs/react/use-with-create-react-app",sourceType:"Link",children:e[9].value}),e[10].value]}),(0,l.jsx)("hr",{}),(0,l.jsxs)("h2",{id:"your-first-example",children:[(0,l.jsx)(r.default,{"aria-hidden":"true",tabIndex:"-1",href:"#your-first-example",sourceType:"a",children:(0,l.jsx)("span",{className:"icon icon-link"})}),"Your First Example"]}),(0,l.jsx)("p",{children:e[11].value}),(0,l.jsx)(c.default,{autorun:!0,children:"import React from 'react';\nimport { Button, Space, DatePicker, version } from 'antd';\n\nconst App = () => (\n  <div style={{ padding: '0 24px' }}>\n    <h1>antd version: {version}</h1>\n    <Space>\n      <DatePicker />\n      <Button type=\"primary\">Primary Button</Button>\n    </Space>\n  </div>\n);\n\nexport default App;"}),(0,l.jsx)("p",{children:e[13].value}),(0,l.jsxs)("h3",{id:"1-create-a-codesandbox",children:[(0,l.jsx)(r.default,{"aria-hidden":"true",tabIndex:"-1",href:"#1-create-a-codesandbox",sourceType:"a",children:(0,l.jsx)("span",{className:"icon icon-link"})}),"1. Create a codesandbox"]}),(0,l.jsxs)("p",{children:[e[14].value,(0,l.jsx)(r.default,{href:"https://u.ant.design/codesandbox-repro",sourceType:"a",children:e[15].value}),e[16].value]}),(0,l.jsxs)("h3",{id:"2-use-and-modify-an-antd-component",children:[(0,l.jsx)(r.default,{"aria-hidden":"true",tabIndex:"-1",href:"#2-use-and-modify-an-antd-component",sourceType:"a",children:(0,l.jsx)("span",{className:"icon icon-link"})}),"2. Use and modify an antd component"]}),(0,l.jsxs)("p",{children:[e[17].value,(0,l.jsx)("code",{children:e[18].value}),e[19].value]}),(0,l.jsxs)("p",{children:[e[20].value,(0,l.jsx)(r.default,{to:"/docs/react/use-with-create-react-app",sourceType:"Link",children:e[21].value}),e[22].value,(0,l.jsx)("code",{children:e[23].value}),e[24].value]}),(0,l.jsx)(d.default,{lang:"jsx",children:e[25].value}),(0,l.jsxs)("h3",{id:"3-explore-more-components",children:[(0,l.jsx)(r.default,{"aria-hidden":"true",tabIndex:"-1",href:"#3-explore-more-components",sourceType:"a",children:(0,l.jsx)("span",{className:"icon icon-link"})}),"3. Explore more components"]}),(0,l.jsxs)("p",{children:[e[26].value,(0,l.jsx)(r.default,{to:"/components/alert",sourceType:"Link",children:e[27].value}),e[28].value]}),(0,l.jsxs)("p",{children:[e[29].value,(0,l.jsx)("code",{children:e[30].value}),e[31].value]}),(0,l.jsx)(d.default,{lang:"diff",children:e[32].value}),(0,l.jsxs)("p",{children:[e[33].value,(0,l.jsx)("code",{children:e[34].value}),e[35].value]}),(0,l.jsx)(d.default,{lang:"diff",children:e[36].value}),(0,l.jsx)("p",{children:e[37].value}),(0,l.jsx)("img",{width:"420",src:"https://gw.alipayobjects.com/zos/antfincdn/JrXptUm1Nz/6b50edc4-3a3c-4b2a-843e-f9f0af2c4667.png",alt:"codesandbox screenshot"}),(0,l.jsx)("p",{children:e[38].value}),(0,l.jsxs)("h3",{id:"4-next-steps",children:[(0,l.jsx)(r.default,{"aria-hidden":"true",tabIndex:"-1",href:"#4-next-steps",sourceType:"a",children:(0,l.jsx)("span",{className:"icon icon-link"})}),"4. Next Steps"]}),(0,l.jsxs)("p",{children:[e[39].value,(0,l.jsx)("code",{children:e[40].value}),e[41].value]}),(0,l.jsxs)("ul",{children:[(0,l.jsx)("li",{children:(0,l.jsx)(r.default,{href:"https://pro.ant.design/",sourceType:"a",children:e[42].value})}),(0,l.jsx)("li",{children:(0,l.jsx)(r.default,{href:"https://github.com/ant-design/ant-design-examples/tree/main/examples/with-nextjs-inline-style",sourceType:"a",children:e[43].value})}),(0,l.jsxs)("li",{children:[e[44].value,(0,l.jsx)(r.default,{href:"https://scaffold.ant.design/",sourceType:"a",children:e[45].value})]})]}),(0,l.jsxs)("h2",{id:"test-with-jest",children:[(0,l.jsx)(r.default,{"aria-hidden":"true",tabIndex:"-1",href:"#test-with-jest",sourceType:"a",children:(0,l.jsx)("span",{className:"icon icon-link"})}),"Test with Jest"]}),(0,l.jsxs)("p",{children:[e[46].value,(0,l.jsx)("code",{children:e[47].value}),e[48].value,(0,l.jsx)(r.default,{to:"/docs/react/use-with-create-react-app",sourceType:"Link",children:e[49].value}),e[50].value]}),(0,l.jsxs)("p",{children:[e[51].value,(0,l.jsx)("code",{children:e[52].value}),e[53].value]}),(0,l.jsx)(d.default,{lang:"json",children:e[54].value}),(0,l.jsxs)("h2",{id:"import-on-demand",children:[(0,l.jsx)(r.default,{"aria-hidden":"true",tabIndex:"-1",href:"#import-on-demand",sourceType:"a",children:(0,l.jsx)("span",{className:"icon icon-link"})}),"Import on Demand"]}),(0,l.jsxs)("p",{children:[(0,l.jsx)("code",{children:e[55].value}),e[56].value,(0,l.jsx)("code",{children:e[57].value}),e[58].value]}),(0,l.jsxs)("h2",{id:"customize-your-workflow",children:[(0,l.jsx)(r.default,{"aria-hidden":"true",tabIndex:"-1",href:"#customize-your-workflow",sourceType:"a",children:(0,l.jsx)("span",{className:"icon icon-link"})}),"Customize your Workflow"]}),(0,l.jsxs)("p",{children:[e[59].value,(0,l.jsx)(r.default,{href:"https://webpack.js.org",sourceType:"a",children:e[60].value}),e[61].value,(0,l.jsx)(r.default,{href:"https://vitejs.dev/",sourceType:"a",children:e[62].value}),e[63].value,(0,l.jsx)(r.default,{href:"https://github.com/enaqx/awesome-react#react-tools",sourceType:"a",children:e[64].value}),e[65].value]}),(0,l.jsxs)("p",{children:[e[66].value,(0,l.jsx)(r.default,{href:"https://scaffold.ant.design/",sourceType:"a",children:e[67].value}),e[68].value]})]})});}var h=function(){return(0,l.jsx)(u.DumiPage,{children:(0,l.jsx)(i.Suspense,{fallback:(0,l.jsx)(t.default,{}),children:(0,l.jsx)(o,{})})});};}}]);