前言

以前2018年搞過一段時間react + antd開發，兜兜轉轉又回到react世界。

TODO中

Hook函數

JSX語法

根元素與斜杠

注意局部的jsx片段也要加根元素:

return (<div>{items.map((item) => (// 此處只能有一個根元素!!!<>...<div className="flex min-w-fit min-h-fit h-24 w-24 border-4 rounded-md bg-white-100 justify-center">// img后要加斜杠<img loading="lazy" src="http://www.icoolcms.com/cms/link/logo/2384"/></div></>))}</div>
)

使用變量

<img className="logoImg" loading="lazy" src={`http://www.icoolcms.com/cms/link/logo/${item.linkId}`}/>

UI 問題

選擇哪個UI框架？

除了大名鼎鼎的antd之外，其實還有很多選擇。react-bootstrap也是堂堂正正，大部分UI組件都不錯。

Multilevel menu 和 mega menu

antd支持multilevel-dropdown-menu，但貌似不支持Mega Menu。

參考鏈接

UI框架

• Ant Design: 88k stars，可惜不是基于tailwindcss的。
• react-bootstrap
• daisyui： 27k stars
• material-ui
• shadcn
• hyperui
• flowbite
  Build websites even faster with components on top of Tailwind CSS，Start developing with an open-source library of over 600+ UI components, sections, and pages built with the utility classes from Tailwind CSS and designed in Figma.
• primefaces
• preline： Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.
• 基于Tailwindcss的headlessui
• Evergreen Segment
• Blueprint React UI
• Material Design for Bootstrap v5 & v4: Top quality open-source UI Kits
• Grommet
• visx
• Chakra
• React-admin
  About A frontend Framework for building data-driven applications running on top of REST/GraphQL APIs, using TypeScript, React and Material Design
• Semantic UI React
• nextui: Beautiful, fast and modern React UI library.
• fluent2
• retool: 要收費
• React Redux

組件

• multilevel-dropdown
• how-create-multilevel-dropdown-menu