UI Framework RSuite JS<\/h2>\n
RSuite (<\/span>React Suite)<\/span><\/a> l\u00e0 m\u1ed9t th\u01b0 vi\u1ec7n React components th\u00edch h\u1ee3p cho vi\u1ec7c x\u00e2y d\u1ef1ng c\u00e1c \u1ee9ng d\u1ee5ng web, \u0111\u1eb7c bi\u1ec7t l\u00e0 c\u00e1c trang qu\u1ea3n l\u00fd d\u00e0nh cho c\u00e1c doanh nghi\u1ec7p v\u1eeba v\u00e0 nh\u1ecf. C\u00e1c \u0111i\u1ec3m m\u1ea1nh c\u1ee7a RSuite bao g\u1ed3m: thi\u1ebft k\u1ebf giao di\u1ec7n th\u00e2n thi\u1ec7n v\u1edbi user, d\u1ec5 d\u00e0ng ch\u1ec9nh s\u1eeda, \u0111a d\u1ea1ng c\u00e1c lo\u1ea1i components\u2026<\/span><\/p>\n Khi x\u00e2y d\u1ef1ng m\u1ed9t \u1ee9ng d\u1ee5ng web b\u1eb1ng React, c\u00e1c developers th\u01b0\u1eddng g\u1eb7p ph\u1ea3i nh\u1eefng UI ho\u1eb7c t\u00ednh n\u0103ng t\u01b0\u01a1ng t\u1ef1 nhau. Thay v\u00ec x\u00e2y d\u1ef1ng c\u00e1c components n\u00e0y t\u1eeb \u0111\u1ea7u th\u00ec ch\u00fang ta c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng m\u1ed9t UI Framework<\/a>, \u0111i\u1ec1u n\u00e0y gi\u00fap t\u0103ng t\u1ed1c \u0111\u1ed9 develop c\u0169ng nh\u01b0 h\u1ea1n ch\u1ebf bug. <\/span><\/p>\n Theo l\u1eddi c\u00e1c developers c\u1ee7a React Suite, \u201c\u0110\u00e2y l\u00e0 m\u1ed9t b\u1ed9 (suite) c\u00e1c React components v\u1edbi UI \u0111\u00e3 \u0111\u01b0\u1ee3c nghi\u00ean c\u1ee9u v\u00e0 thi\u1ebft k\u1ebf m\u1ed9t c\u00e1ch h\u1ee3p l\u00fd, mang \u0111\u1ebfn tr\u1ea3i nghi\u1ec7m th\u00e2n thi\u1ec7n cho developer c\u0169ng nh\u01b0 end-user\u201d. <\/span><\/p>\n Trong th\u1ef1c t\u1ebf,\u00a0 React Suite \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf v\u00e0 tri\u1ec3n khai \u0111\u1ec3 s\u1eed d\u1ee5ng tr\u00ean desktop browsers thay v\u00ec mobile browsers. V\u00ec v\u1eady, trong b\u00e0i vi\u1ebft n\u00e0y, ch\u00fang ta s\u1ebd c\u00f9ng t\u00ecm hi\u1ec3u v\u00e0 x\u00e2y d\u1ef1ng m\u1ed9t \u1ee9ng d\u1ee5ng Todo App b\u1eb1ng RSuite JS.<\/span><\/p>\n Trong khu\u00f4n kh\u1ed5 b\u00e0i vi\u1ebft, ch\u00fang ta s\u1ebd x\u00e2y d\u1ef1ng m\u1ed9t Todo App s\u1eed d\u1ee5ng React k\u1ebft h\u1ee3p v\u1edbi th\u01b0 vi\u1ec7n UI Component RSuite. \u1ee8ng d\u1ee5ng cho ph\u00e9p ng\u01b0\u1eddi d\u00f9ng t\u1ea1o v\u00e0 c\u1eadp nh\u1eadt danh s\u00e1ch c\u00e1c vi\u1ec7c c\u1ea7n l\u00e0m. <\/span><\/p>\n Th\u00f4ng qua v\u00ed d\u1ee5 n\u00e0y, hy v\u1ecdng c\u00e1c b\u1ea1n c\u00f3 th\u1ec3 bi\u1ebft c\u00e1ch s\u1eed d\u1ee5ng m\u1ed9t th\u01b0 vi\u1ec7n UI Component \u0111\u1ec3 x\u00e2y d\u1ef1ng \u1ee9ng d\u1ee5ng, t\u1eeb \u0111\u00f3 \u00e1p d\u1ee5ng cho c\u00e1c th\u01b0 vi\u1ec7n t\u01b0\u01a1ng t\u1ef1 nh\u01b0: Ant Design, Headless UI, React Bootstrap,…<\/span><\/p>\n Ch\u00fang ta h\u00e3y b\u1eaft \u0111\u1ea7u b\u1eb1ng c\u00e1ch thi\u1ebft l\u1eadp d\u1ef1 \u00e1n m\u1edbi. Ch\u1ea1y l\u1ec7nh b\u00ean d\u01b0\u1edbi \u0111\u1ec3 t\u1ea1o React project:<\/span><\/p>\n L\u1ec7nh tr\u00ean s\u1ebd t\u1ea1o m\u1ed9t th\u01b0 m\u1ee5c m\u1edbi t\u00ean l\u00e0 react-suite-app. B\u00ean trong th\u01b0 m\u1ee5c n\u00e0y, l\u1ec7nh create-react-app \u0111\u00e3 t\u1ea1o ra c\u1ea5u tr\u00fac m\u1eb7c \u0111\u1ecbnh c\u1ee7a d\u1ef1 \u00e1n v\u00e0 c\u00e0i \u0111\u1eb7t c\u00e1c th\u01b0 vi\u1ec7n li\u00ean quan. B\u00e2y gi\u1edd h\u00e3y m\u1edf project v\u1eeba \u0111\u01b0\u1ee3c t\u1ea1o b\u1eb1ng text editor y\u00eau th\u00edch c\u1ee7a b\u1ea1n. \u0110\u1ed1i v\u1edbi c\u00e1c minh h\u1ecda trong b\u00e0i vi\u1ebft n\u00e0y, ch\u00fang ta s\u1ebd s\u1eed d\u1ee5ng Visual Studio Code.\u00a0<\/span><\/p>\n Sau khi \u0111\u00e3 di chuy\u1ec3n v\u00e0o b\u00ean trong th\u01b0 m\u1ee5c v\u1eeba \u0111\u01b0\u1ee3c t\u1ea1o, ch\u1ea1y l\u1ec7nh sau \u0111\u1ec3 m\u1edf d\u1ef1 \u00e1n b\u1eb1ng VSCode:<\/span><\/p>\n Sau khi vi\u1ec7c c\u00e0i \u0111\u1eb7t ho\u00e0n t\u1ea5t, ch\u1ea1y l\u1ec7nh b\u00ean d\u01b0\u1edbi \u0111\u1ec3 ch\u1ea1y application tr\u00ean browser:<\/strong><\/p>\n N\u1ebfu b\u1ea1n m\u1edf application tr\u00ean browser c\u1ee7a m\u00ecnh, b\u1ea1n s\u1ebd th\u1ea5y m\u00e0n h\u00ecnh hi\u1ec3n th\u1ecb nh\u01b0 b\u00ean d\u01b0\u1edbi:<\/strong><\/p>\n Nh\u01b0 v\u1eady l\u00e0 ch\u00fang ta \u0111\u00e3 t\u1ea1o xong d\u1ef1 \u00e1n m\u1edbi v\u00e0 c\u00e0i \u0111\u1eb7t c\u00e1c th\u01b0 vi\u1ec7n c\u1ea7n thi\u1ebft. Ph\u1ea7n ti\u1ebfp theo, m\u00ecnh v\u00e0 c\u00e1c b\u1ea1n s\u1ebd b\u1eaft \u0111\u1ea7u code c\u00e1c UI c\u1ea7n thi\u1ebft cho Todo App. <\/span><\/p>\n \u0110\u1ea7u ti\u00ean, ch\u00fang ta s\u1ebd t\u1ea1o giao di\u1ec7n t\u1ed5ng quan cho Todo App, bao g\u1ed3m:<\/span><\/p>\n M\u1edf file<\/span> .\/src\/App.js<\/span><\/i> v\u00e0 ch\u1ec9nh s\u1eeda nh\u01b0 sau:<\/span><\/p>\n Trong \u0111o\u1ea1n code tr\u00ean, ch\u00fang ta \u0111\u00e3 import CSS b\u1ea3n r\u00fat g\u1ecdn (minified) c\u1ee7a React Suite, \u0111\u00e2y l\u00e0 file ch\u1ee9a CSS d\u00e0nh cho c\u00e1c component c\u1ee7a RSuite.<\/span><\/p>\n Ti\u1ebfp theo, ch\u00fang ta s\u1eed d\u1ee5ng c\u00e1c component \u0111\u01b0\u1ee3c RSuite cung c\u1ea5p s\u1eb5n \u0111\u1ec3 nhanh ch\u00f3ng ho\u00e0n thi\u1ec7n ph\u1ea7n UI mong mu\u1ed1n:<\/span><\/p>\n C\u00e1c components \u0111\u01b0\u1ee3c import bao g\u1ed3m:<\/span><\/p>\n L\u01b0u file v\u1eeba ch\u1ec9nh s\u1eeda v\u00e0 quay l\u1ea1i browser, b\u1ea1n s\u1ebd th\u1ea5y k\u1ebft qu\u1ea3 nh\u01b0 sau:<\/span><\/p>\n Th\u1eadt l\u00e0 nhanh ch\u00f3ng \u0111\u1ec3 c\u00f3 m\u1ed9t UI c\u01a1 b\u1ea3n \u0111\u00fang kh\u00f4ng n\u00e0o? Ti\u1ebfp theo ch\u00fang ta s\u1ebd s\u1eed d\u1ee5ng c\u00e1c component trong th\u01b0 vi\u1ec7n \u0111\u1ec3 x\u00e2y d\u1ef1ng form nh\u1eadp t\u00ean c\u1ee7a c\u00f4ng vi\u1ec7c (Todo) m\u1edbi.<\/span><\/p>\n Ch\u00fang ta s\u1ebd t\u1ea1o <\/span>TodoForm<\/span><\/i> component \u0111\u1ec3 ng\u01b0\u1eddi d\u00f9ng nh\u1eadp n\u1ed9i dung vi\u1ec7c c\u1ea7n l\u00e0m (Todo) m\u1edbi. T\u1ea1o folder m\u1edbi t\u00ean l\u00e0 <\/span>components<\/i><\/b> b\u00ean trong folder <\/span>src<\/i><\/b>. B\u00ean trong folder <\/span>components<\/i><\/b> v\u1eeba t\u1ea1o, t\u1ea1o m\u1ed9t folder m\u1edbi t\u00ean l\u00e0 <\/span>todos<\/i><\/b> v\u00e0 file <\/span>TodoForm.js<\/i><\/b> v\u1edbi \u0111o\u1ea1n code nh\u01b0 sau:<\/span><\/p>\n \u1ede \u0111\u00e2y ch\u00fang ta import c\u00e1c components nh\u01b0 <\/span>FlexboxGrid<\/span><\/a>, <\/span>Panel<\/span><\/a>, <\/span>Form<\/span><\/a>, <\/span>ButtonToolbar<\/span><\/a>, <\/span>Button<\/span><\/a> \u0111\u1ec3 t\u1ea1o form cho ng\u01b0\u1eddi d\u00f9ng nh\u1eadp todo. \u0110\u1ec3 s\u1eed d\u1ee5ng <\/span>TodoForm<\/i><\/b> component v\u1eeba \u0111\u01b0\u1ee3c t\u1ea1o, ch\u00fang ta c\u1ea7n import v\u00e0o file App.js:<\/span><\/p>\n Sau \u0111\u00f3, th\u00eam <\/span>TodoForm<\/span><\/i> v\u00e0o trong <\/span>FlexboxGrid.Item<\/span><\/i> component. <\/span><\/p>\n Khi b\u1ea1n quay l\u1ea1i browser, l\u1ea7n n\u00e0y b\u1ea1n s\u1ebd th\u1ea5y form nh\u1eadp todo.<\/span><\/p>\n B\u00e2y gi\u1edd, ch\u00fang ta s\u1ebd t\u1ea1o <\/span>TodoList<\/span><\/i> component \u0111\u1ec3 hi\u1ec3n th\u1ecb danh s\u00e1ch Todo m\u00e0 ng\u01b0\u1eddi d\u00f9ng nh\u1eadp. T\u1ea1o file <\/span>TodoList.js<\/i><\/b> trong<\/span> components<\/i><\/b> folder v\u00e0 th\u00eam \u0111o\u1ea1n code sau:<\/span><\/p>\n Trong \u0111o\u1ea1n code tr\u00ean, ch\u00fang ta import th\u00eam <\/span>List<\/span><\/a> v\u00e0 <\/span>IconButton<\/span><\/a> t\u1eeb React Suite \u0111\u1ec3 \u0111\u1ecbnh ngh\u0129a cho danh s\u00e1ch todo trong application. Sau \u0111\u00f3 ch\u00fang ta s\u1ebd l\u1eb7p qua m\u1ea3ng c\u00e1c todos (\u1edf \u0111\u00e2y ch\u00fang m\u00ecnh fetch data m\u1eabu) v\u00e0 hi\u1ec3n th\u1ecb n\u1ed9i dung todo. Trong file <\/span>App.js<\/span><\/i>, import <\/span>TodoList<\/span><\/i> component:<\/span><\/p>\n Sau \u0111\u00f3 th\u00eam <\/span>TodoList<\/span><\/i> v\u00e0o trong <\/span>FlexboxGrid.Item<\/span><\/i> component. <\/span><\/p>\n \u1ee8ng d\u1ee5ng Todo App c\u1ee7a ch\u00fang ta hi\u1ec7n t\u1ea1i s\u1ebd tr\u00f4ng nh\u01b0 h\u00ecnh d\u01b0\u1edbi \u0111\u00e2y:<\/span><\/p>\n Nh\u01b0 v\u1eady l\u00e0 v\u1edbi s\u1ef1 tr\u1ee3 gi\u00fap c\u1ee7a th\u01b0 vi\u1ec7n RSuite, ch\u1ec9 c\u1ea7n m\u1ed9t \u00edt th\u1eddi gian l\u00e0 ch\u00fang ta \u0111\u00e3 c\u00f3 th\u1ec3 x\u00e2y d\u1ef1ng \u0111\u01b0\u1ee3c m\u1ed9t UI tr\u00f4ng kh\u00e1 \u0111\u1eb9p d\u00e0nh cho Todo App. B\u1ea1n c\u00f3 th\u1ec3 b\u1ed5 sung th\u00eam ph\u1ea7n thao t\u00e1c v\u1edbi d\u1eef li\u1ec7u (CRUD) \u0111\u1ec3 t\u1ea1o n\u00ean Todo App ho\u00e0n ch\u1ec9nh. \u1ede b\u00e0i vi\u1ebft n\u00e0y, ch\u00fang m\u00ecnh ch\u1ec9 gi\u1edbi thi\u1ec7u c\u00e1ch d\u00f9ng components c\u1ee7a React Suite \u0111\u1ec3 x\u00e2y d\u1ef1ng giao di\u1ec7n cho application.<\/span><\/p>\n K\u1ebft th\u00fac b\u00e0i vi\u1ebft n\u00e0y, b\u1ea1n \u0111\u00e3 \u0111\u01b0\u1ee3c l\u00e0m quen v\u1edbi th\u01b0 vi\u1ec7n UI cho React l\u00e0 RSuite. Ch\u00fang ta c\u0169ng \u0111\u00e3 c\u00f3 th\u1ec3 t\u1ea1o giao di\u1ec7n Todo App m\u1ed9t c\u00e1ch d\u1ec5 d\u00e0ng b\u1eb1ng c\u00e1ch import v\u00e0 s\u1eed d\u1ee5ng c\u00e1c component m\u00e0 RSuite cung c\u1ea5p s\u1eb5n.<\/span> M\u00ecnh tin r\u1eb1ng m\u1ed7i l\u1ea7n th\u1ef1c h\u00e0nh s\u1ebd t\u1ea1o ra nhi\u1ec1u s\u1ef1 kh\u00e1c bi\u1ec7t, v\u00ec v\u1eady n\u1ebfu c\u00e1c b\u1ea1n c\u00f3 h\u1ee9ng th\u00fa v\u1edbi vi\u1ec7c x\u00e2y d\u1ef1ng m\u1ed9t giao di\u1ec7n t\u01b0\u01a1ng t\u00e1c v\u1edbi user m\u1ed9t c\u00e1ch d\u1ec5 d\u00e0ng, h\u00e3y b\u1eaft tay v\u00e0o t\u00ecm hi\u1ec3u, s\u1eed d\u1ee5ng React Suite v\u00e0 m\u1edf r\u1ed9ng th\u00eam c\u00e1c ch\u1ee9c n\u0103ng c\u1ee7a application.\u00a0<\/span><\/p>\n C\u00f3 m\u1ed9t l\u01b0u \u00fd l\u00e0 React Suite \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf v\u00e0 tri\u1ec3n khai \u0111\u1ec3 s\u1eed d\u1ee5ng tr\u00ean desktop browsers thay v\u00ec mobile browsers, v\u00ec v\u1eady n\u1ebfu c\u00e1c b\u1ea1n mu\u1ed1n ph\u00e1t tri\u1ec3n s\u1ea3n ph\u1ea9m c\u00f3 th\u1ec3 responsive tr\u00ean mobile browsers th\u00ec c\u1ea7n c\u00e2n nh\u1eafc n\u00ean s\u1eed d\u1ee5ng UI Framework kh\u00e1c ph\u00f9 h\u1ee3p h\u01a1n.<\/span><\/p>\n M\u00ecnh mong l\u00e0 b\u00e0i vi\u1ebft s\u1ebd mang l\u1ea1i h\u1eefu \u00edch cho nh\u1eefng b\u1ea1n \u0111ang t\u00ecm hi\u1ec3u v\u1ec1 UI Framework. Ch\u00fac c\u00e1c b\u1ea1n c\u00f3 m\u1ed9t ng\u00e0y t\u1ed1t l\u00e0nh \ud83d\ude00<\/span><\/p>\n","protected":false},"excerpt":{"rendered":" Trong b\u00e0i vi\u1ebft n\u00e0y, ch\u00fang ta s\u1ebd c\u00f9ng nhau t\u00ecm hi\u1ec3u v\u1ec1 UI Framework RSuite JS. Nh\u01b0ng tr\u01b0\u1edbc ti\u00ean h\u00e3y c\u00f9ng t\u00ecm hi\u1ec3u v\u1ec1 Framework RSuite JS.<\/p>\n","protected":false},"author":44,"featured_media":2966,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[132,134,129,128,131,22,130,133],"class_list":["post-2964","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology","tag-application","tag-framework","tag-javascript","tag-react","tag-rsuite","tag-technical","tag-todo-app","tag-ui"],"_links":{"self":[{"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/posts\/2964","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/users\/44"}],"replies":[{"embeddable":true,"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/comments?post=2964"}],"version-history":[{"count":0,"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/posts\/2964\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/media\/2966"}],"wp:attachment":[{"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/media?parent=2964"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/categories?post=2964"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/tags?post=2964"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}T\u1ed5ng quan v\u1ec1 \u1ee9ng d\u1ee5ng m\u00e0 ch\u00fang ta s\u1ebd x\u00e2y d\u1ef1ng<\/h2>\n
C\u00e1c b\u01b0\u1edbc th\u1ef1c hi\u1ec7n b\u1ea1n c\u1ea7n bi\u1ebft<\/h2>\n
T\u1ea1o m\u1ed9t d\u1ef1 \u00e1n m\u1edbi v\u1edbi Create React App v\u00e0 c\u00e0i \u0111\u1eb7t RSuite<\/h3>\n
npx create-react-app react-suite-app && cd react-suite-app<\/pre>\n
code .<\/pre>\n
![\"2.](\"https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2023\/01\/30193935\/2-246x300.png\")
<\/p>\nTi\u1ebfp theo, ch\u00fang ta s\u1ebd ch\u1ea1y l\u1ec7nh sau \u0111\u1ec3 c\u00e0i \u0111\u1eb7t RSuite:<\/span><\/h3>\n
yarn add rsuite<\/pre>\n
yarn start<\/pre>\n
![\"3.](\"https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2023\/01\/30193938\/3-300x194.png\")
<\/p>\nT\u1ea1o layout c\u01a1 b\u1ea3n cho Todo App<\/h3>\n
\n
import React from \"react\";\r\nimport { Container, Header, Navbar, Nav, Content } from \"rsuite\";\r\nimport CogIcon from \"@rsuite\/icons\/legacy\/Cog\";\r\nimport \"rsuite\/dist\/rsuite.min.css\";\r\nimport \".\/App.css\";\r\n\r\nconst App = () => {\r\n const [activeKey, setActiveKey] = React.useState(1)<\/pre>\n return (\r\n <div className=\"main\">\r\n <Container>\r\n <Header>\r\n <Navbar appearance=\"inverse\">\r\n <Navbar.Brand href=\"#\">RSUITE<\/Navbar.Brand>\r\n <Nav onSelect={setActiveKey} activeKey={activeKey}>\r\n <Nav.Item eventKey=\"1\">Todo<\/Nav.Item>\r\n <\/Nav>\r\n <Nav pullRight>\r\n <Nav.Item icon={<CogIcon \/>}>Settings<\/Nav.Item>\r\n <\/Nav>\r\n <\/Navbar>\r\n <\/Header>\r\n <Content>\r\n <FlexboxGrid justify=\"center\">\r\n <FlexboxGrid.Item colspan={12}>\r\n <\/FlexboxGrid.Item>\r\n <\/FlexboxGrid>\r\n <\/Content>\r\n <\/Container>\r\n <\/div>\r\n );\r\n};\r\n\r\nexport default App;\r\n<\/pre>\nimport \"rsuite\/dist\/rsuite.min.css\";<\/pre>\n
\n
![\"4.](\"https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2023\/01\/30193944\/4-300x197.png\")
<\/p>\nT\u1ea1o Todo Form<\/h3>\n
![\"5.](\"https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2023\/01\/30193946\/5-300x64.png\")
<\/p>\nimport React from \"react\";\r\nimport { FlexboxGrid, Panel, Form, ButtonToolbar, Button } from \"rsuite\";\r\n\r\nconst TodoForm = () => {\r\n return (\r\n <Panel header={<h3>Add ToDo<\/h3>} bordered>\r\n <Form fluid>\r\n <Form.Group>\r\n <Form.ControlLabel>What you want to do?<\/Form.ControlLabel>\r\n <Form.Control name=\"task\" \/>\r\n <\/Form.Group>\r\n <Form.Group>\r\n <ButtonToolbar>\r\n <Button appearance=\"primary\">Create<\/Button>\r\n <\/ButtonToolbar>\r\n <\/Form.Group>\r\n <\/Form>\r\n <\/Panel>\r\n );\r\n};\r\n\r\nexport default TodoForm;<\/pre>\n...\r\nimport TodoForm from \".\/components\/todos\/TodoForm\";\r\n...<\/pre>\n
...\r\n<FlexboxGrid.Item colspan={12}>\r\n <TodoForm>\r\n<\/FlexboxGrid.Item>\r\n...<\/pre>\n![\"6.](\"https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2023\/01\/30193948\/6-300x197.png\")
<\/p>\nT\u1ea1o Todo List<\/h3>\n
import React from \"react\";\r\nimport { List, IconButton, FlexboxGrid } from \"rsuite\";\r\nimport { Icon } from \"@rsuite\/icons\";\r\n\r\nconst MinusSvg = React.forwardRef((props, ref) => (\r\n <svg {...props} xmlns=\"http:\/\/www.w3.org\/2000\/svg\" version=\"1.1\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" ref={ref}>\r\n <title>minus-copy<\/title>\r\n <path d=\"M2 7h12c0.552 0 1 0.448 1 1s-0.448 1-1 1h-12c-0.552 0-1-0.448-1-1s0.448-1 1-1z\" \/>\r\n <\/svg>\r\n));\r\n\r\nconst TodoList = () => {\r\n const [todos, setTodos] = React.useState([]);\r\n\r\n React.useEffect(() => {\r\n fetch(\"http:\/\/jsonplaceholder.typicode.com\/posts?_limit=10\")\r\n .then(res => res.json())\r\n .then(posts => setTodos(posts))\r\n .catch(err => {\r\n console.error(err);\r\n });\r\n }, []);\r\n\r\n return (\r\n <section>\r\n <List>\r\n {todos.map((todo, i) => (\r\n <List.Item key={i} index={i}>\r\n <FlexboxGrid justify=\"space-around\">\r\n <FlexboxGrid.Item colspan={12}>\r\n <h5>{todo.title}<\/h5>\r\n <\/FlexboxGrid.Item>\r\n <FlexboxGrid.Item colspan={10}><\/FlexboxGrid.Item>\r\n <FlexboxGrid.Item colspan={2}>\r\n <IconButton icon={<Icon as={MinusSvg} \/>} color=\"red\" appearance=\"primary\" circle \/>\r\n <\/FlexboxGrid.Item>\r\n <\/FlexboxGrid>\r\n <\/List.Item>\r\n ))}\r\n <\/List>\r\n <\/section>\r\n );\r\n};\r\n\r\n\r\nexport default TodoList;\r\n\r\n<\/pre>\n...\r\nimport TodoList from \".\/components\/todos\/TodoList\";\r\n...<\/pre>\n
...\r\n<FlexboxGrid.Item colspan={12}>\r\n ...\r\n <TodoList \/>\r\n<\/FlexboxGrid.Item>\r\n...<\/pre>\nCh\u1ea1y application v\u00e0 xem l\u1ea1i giao di\u1ec7n ho\u00e0n ch\u1ec9nh<\/h3>\n
![\"7.](\"https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2023\/01\/30193952\/7-300x196.png\")
<\/p>\nK\u1ebft lu\u1eadn<\/h2>\n