React: my experiences

I have been coding React daily for the last 4 months and I want to sum up what I think about it.

React

Easy to setup
First of all React is really easy to set up and get started with. I use it for developing internal dev pages, tools, etc, because its super fast to set up in a new project. Where I previously used jQuery or VanillaJS to do a quick thing I now use React!

Refactoring becomes easier
Major refactorings become easy. We got a request from our designer for a major redesign of the application UI halfway through the project. And it needed to be done fast. We got a little worried if we were going to make it but when we got started we quickly found out it was surprisingly easy. We used most of the time tweaking the CSS. The JS refactoring we had to do was mostly moving some components to new places. A lot of modern Javascript framework probably makes these kinds of refactorings easier nowadays when the code no longer is thightly coupled to the DOM. But React definitely is one of them. And the deadline was reached! (with some late night work on a Sunday).

Bad editor integration
React uses an extension to Javascript called JSX, which looks similar to XML and is embedded in the Javascript. I haven’t yet found an editor that handles this smoothly with syntax highlighting, refactoring tools, etc. In emacs I have to switch back and forth between js-mode and web-mode constantly. Other people on the team use different editors (Brackets, Visual Studio Code, Atom) and none of them has good integration with JSX. Of course you can code react without JSX but we don’t and now it would be too big cost to refactor what we have.

Isomorphic application
An isomorphic application is an application that both runs on the server and the client and is really useful for doing server side rendering of your application (for SEO and a impression of faster loading speeds). With React it is easy (in theory) to create an isomorphic application. Creating an isomorphic app has been a little tricky for us and we ran into many bugs the first weeks. The reason is mostly because we chose Reflux as a Flux-library handling data storage. Because Reflux uses singleton as stores it gave us a lot of headache the first months. We had parts of the data never updating itself between requests and it was really tricky for us to debug.

Conclusion
To sum it up I’m very happy with React. I have coded frontend project with several different libraries and tools, such as jQuery and knockout.js and I have never felt I got the same structure and readability as on the backend. Now when using React it feels like it’s easy to understand and reason about the application even though its quite many lines of code now. I will definitely use it on my next frontend project!


Master the complexity in the React ecosystem!

Get an email everytime I post by signing up to the email list below.

Subscribe now and you will get a free code review checklist you can use to improve your own code.