Rewriting blog frontend to React

Source

Why

I was always a little bit reserved to getting into React, since the community wasn't too fond of the license it used. And also I've been developing in Laravel for a while now, and Laravel goes out of the way to promote Vue js (and makes it really easy to get started). Also we've used Vue for a project at my job and it made more sense to focus on Vue.

But since, in the same month, they changed the license to (from what I understand) a more liberal one, and released a (backwards compatible) fully rewritten v16, I decided to dip into it a little bit after all.

First I went for a Hearths Card Game , never really finished it for a variety of reasons (design) but quickly decided to rewrite this blog instead, since I already had a working backend.

What I used

I used:

• React for SPA framework
• React Router v4 for history managment
• React Redux for state
• Radium for styles

And some other common libraries like axios .

First impressions of React

Some things are not completely intuitive first. Personally I wasn't a huge fan writing DOM in js at first, but now I don't mind it anymore. I also wasn't a huge fan of the way Radium does styles, again all with javascript, at first. But soon I started to love it. I deeply don't care for CSS. Even SASS barely makes it bareable at best. But when you write all your styles with javascript like that you can get really creative with it and write classes, functions, have states, all without learning another language.

Apart from that, React in itself is really really easy to get into. All you need to know is how to create a React component and what the render() method does and you can already create some things. Then you learn about props, ways to manage state, special functions and then you're pretty much left to your own architecture and javascript skills.

Problems I encountered

I didn't have many problems with the libraries themselves or interaction between them. I still don't quite understand everything, for example what redux-promise-middleware and redux-thunk do. I understand one of them enables redux dispatch to return a promise. But I'm not sure which one, or what the other one does then. Regardless, I didn't have problems getting them to work.

I had a bit of an issue with React router not fetching the new blog post from API, when the route stayed the same, just the slug changed. But managed to solve it by checking if current props aren't equal to previous props before each render. If props changed, fetch the new post. I wouldn't be surprised if there was a cleaner way, but it gets the job done for now.

React or Vue

I really like Vue and will continue to use it on the project I'm building with a friend. It makes you productive and it has a clean, understandable API. Also some bigger companies seem to have started using it, like Gitlab , which means it shouldn't go away soon. Shoutout to One Plus One - also built with Vue (noticed it when I was ordering my new lovely One Plus 5t two weeks ago).

But for my next small projects I'll use React for a while at least. Mostly because I would really like to learn architecture of programs a little bit and it feels like React gives you complete power and responsibility over your code. Tough but empowering.

Also I really like how easy it is to achieve a really high Google Page Speed score with inlining CSS. But more on that in a separate post.