Full stack part 4: a small detour to the world of React

Even though I’ve been doing web ‘stuff’ for years and years, I find it’s often quite quick to pick up new skills, and it’s usually just as easy to just google stuff. Github Copilots and such belong to a later chapter, although I might include ChatGPT or Claude here and there as those are also interesting in many different contexts.

But I digress; maybe I mentioned already the learning curve, and I like online tutorials easy to follow, with end results other than a cryptic error message. This is partly because I have done a lot of tutorials, where the majority of time is spent googling error messages that the creator of the tutorial did not encounter. And I suppose various package updates/upgrades, version control, and all other things create a sort of mine field where I cannot guarantee that what works for me today, would work for you the same way tomorrow.

Here someone will bring up docker, or nvm, vagrant, or some other tool that guarantees the same environment for a set of developers.
So, I’m not really aiming to be different, as I’m sure any time I did encounter an error in the very recent past as well as over the years, it was not the tutorial author’s intention.

What is slightly different here is my approach in going through the learning material mainly through existing tutorials and picking up pieces of information here and there. What errors we encounter, we also document in this blog. But again I’ve diverted from what I was trying to say - I want to keep things simple enough for beginner level and not pretend that I’m already a know-it-all coder. Whatever we go through on these pages, are easy to follow video or online tutorials, showing very basics of important aspects of web development.

I should still say that while all errors encountered during any tutorials do take a lot of time occasionally to solve, they’re probably very important part of learning as they force us to focus our minds on what we’re trying to accomplish instead of just blindly copy-pasting code from tutorial pages to our own document.

Back to React.

We’ll do a few React related tutorials just to have a bit of variety, and also to show that it’s not so difficult to jump from one framework to another, it will not require years of careful studying after all. Just to keep us attached to Go, we’ll start with a tutorial that has Go backend (using Fiber again), and React front-end.

On with the show:
https://www.youtube.com/watch?v=QevhhM_QfbM&ab_channel=TomDoesTech

Let’s meet where we get stuck, or at the end if we’re lucky - it’s only 38 minutes.

Ok, four minutes in, Tom uses Yarn as the package manager. I can’t say which you should use, I’d like a world where we all used the same and it would still be in development to be ever better. But in this case I’ve just decided I want to complicate the tutorial and not my ‘routine’ - I’m guessing quite a few of you use npm.

Just as well we could introduce Yarn here and you’d have one more tool that you’ve used. So as it does not affect the end result, do use Yarn, or use npm if you’d rather do that. I’m going with npm, so here’s what I had to do around 4 minutes into the tutorial, instead of the yarn commands:

npm init vite@latest react-client-ui -- --template react-ts
cd react-client-ui/
npm install
npm install @mantine/core @mantine/hooks
npm install swr
npm install @primer/octicons-react

Now, you could combine some of these install things, but one by one works too.

Next stop around 17 minutes - Trying the Mantine Box hello world application. I could not see the Hello world. And Console showed a few errors, mainly:

Uncaught Error: @mantine/core: MantineProvider was not found in component tree, make sure you have it in your app

So I googled a bit, and seems not many people are having the same issue. I ended up adding MantineProvider in the imports next to Box, and wrapped the <Box> in <MantineProvider>; that cleared the error and I was ready to continue on to the CORS issue.

With the CORS AllowOrigins, maybe it’s obvious, but note the address and the port - in the tutorial it’s http://localhost:4000, in my case it was http://127.0.0.1:5173, otherwise you might get an error similar to

The 'Access-Control-Allow-Origin' header contains the invalid value ''

Next, around 25 minutes we’re adding useForm from mantine/hooks, but it seems it should be from mantine/form, so we’ll quickly install:

npm install @mantine/form

…and then update useForm to be imported from mantine/form instead.

Now, I have the app up and running but it does not look anything like the one in the tutorial, I have a massive close-button in the Modal, which is also not centered, and the ‘Add ToDo’ is small and grey. Maybe this is to do with me having added the MantineProvider - which was not needed until September 2023.
https://github.com/mantinedev/mantine/issues/4908#issuecomment-1739134735

Right. The end. Reached the end and seems it’s working but it’s not looking like anything in the tutorial. Just a few months down the line from the tutorial and it’s not really the same at all. I don’t know how many versions of React and Mantine that is. A few versions of Go, but that’s the back-end so it does not affect us.

So the search for a fix starts - head over to https://mantine.dev/getting-started/ and see if they have anything to offer. At the time of writing, there’s a few additional packages to install:

npm i --save-dev postcss postcss-preset-mantine postcss-simple-vars

And then add the postcss.config.cjs file to the root, and the import to the App.tsx file, and yes, we have something different. But not a modal. Button is now blue and the modal overlay is there, but no modal. It’s relatively easy to google Mantine Modal not showing - someone will have encountered the issue. I’m not very impressed with Mantine so far. Turns out some css imported by Vite causes the issue. If I remove the css, I get the Modal but I still don’t have the same layout. But I don’t intend to use Mantine in my own projects at least in the near future so I’m not going to bother spending much more time on this issue.

a side note here

I’ve become busy with a couple of other projects, just for a while. We’ll be heading towards another front-end tutorial soon enough.