ReactJs笔记摘录

前言

以前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