I have spent several weeks just trying to make a basic CRUD app in React.
How in the FUCK do people survive this hell?! Holy crap. It's awful. Like, actually, awful. x.x
I have spent several weeks just trying to make a basic CRUD app in React.
How in the FUCK do people survive this hell?! Holy crap. It's awful. Like, actually, awful. x.x
Haven’t really looked at react, but I’ve thought about it over and over again. I’m just curious what your issue actually is. is it the JavaScript aspect of it or is it the react aspect?
First, if you aren't using a bundler, you aren't doing anything. But which one to choose? Webpack, Rollup, Vite? Bun's internal one? esbuild raw? And most of them are super different in, well, everything.
Second, everything only seems to work with React, unless otherwise specified - Preact (albeit smaller and MUCH more performant) is completely and utterly ignored. ChatGPT will happily create components for and with it - but Preact's compat layer is not tree-shakeable _and_ lacks (a lot of) features.
Third, the rage these days, schadcn-ui, doesn't just barf dependencies at you that you have never heared of, but also...you have to update it yourself, or manually invoke `npx shadcn-ui add X` to update something - it is NOT a package.
Next, unless you are a design-wiz and know shapes, colours and order inside out, TailwindCSS has amongst the steepest learning curve I've ever seen. It breaks my brain - but also because I am visually impaired and lack the graphical understanding...so, more a me-problem really.
And also, errors. Unless you are using TypeScript and intellisense (be it via plugins in VSCode or a dedicated-ish IDE), you will run into issues where a certain type is expected, not returned, and then becomes a problem. In general, whilst there are code examples for vanilla ES6, just about everyone would rather you just use TypeScript.
And I am not done yet.
Further, forms. I have spent three hours just to get one form input to work. Why? The beloved zod validator actually can't be arsed to return a raw defaults object - nope, you have to make it yourself. Because if you don't supply one, the schadcn-ui form, which really is based on Radix Primitives, will throw weird errors about "controlled elements" and "uncontrolled elements". What it actually means that one of the defaults you passed is "undefined" and thus trips the whole thing off. But, it won't tell you where, why or what.
Then, if you want to use an HTTP API to reach your backend, you will write a lot of async code - but React expects rendering to be sync. You can work around it with useEffect(), yes, but the fact that it ends up feeling super hacky implementing an async handler to then modify your state from lord knows where just feels incredbibly alien and detached.
And if I looked around in my previous issues, I'd probably find more. I am _just_ using Vite, and embedding the output in my Go application with `go:generate npm run build` and `go:embed build/*` and `wgo` to recompile everything on change... but this clusterf_ck has cost me so many nerves to get together and working in order. It's actually annoying...
> TailwindCSS has amongst the steepest learning curve I've ever seen
Interesting to hear. I got into turretcss.com and couple other util libraries before Tailwind and liked the utility aspects. I was working a job early on where I was writing large utility style-sheets and realized it was a thing frameworks did. Then I started using Tailwind's cdn sheet and still do for small jobs.
I found it extremely simple to get moving. I think coloring and adjustments through javascript and build systems gets complicated, but once learning how to write plugins it's become my go to. Id like to consider other things, but it's just too dang handy.
As said, it's very likely a me-problem; UI design and a visual impairment do not mix well x)
lol Understood! I'm genuinely curious why you felt it was difficult to learn? Are you against utility based CSS libraries or maybe not used to them? I know some people are totally against it.
I have a difficulty understanding how they fit together. But it's probably just the naming convention. I get that "h-full" means "height: 100%"...but the rest confuses me o.o
I just wish there was a component library built ontop of utility classes. This way, I could have premade components and not deal with designing my own - but leave the option open for those that want to.
Well I think components start to get opinionated, there are still large website written without frameworks and need things to be opinionated, but that's why they make TailwindUI, but it's not free.
Flowbite does this https://flowbite.com
There are a few other copy-past component libraries I use:
https://sailboatui.com/ (my personal preference)
https://www.hyperui.dev/ (also my personal preference)
ShadeCN is another really popular one most websites are copy-paste from here