RSS
 

Rewriting mobeigi.com with React

20 Jul 2020

Learning React

Recently I have spent some time learning React as it is the front end library of choice at my workplace Atlassian. Learning React was quite easy and intuitive. I used a handful of resources and one I’d like to heavily recommend to beginners is React.js Essential Training by Eve Porcello. Previously, all of my websites had been written in PHP and while I am very comfortable with PHP and do enjoy writing it. However, I do see the immense value in writing reusable components and the benefits of conditional rendering.

React Pros

Here are the things I like about React:

  • Reusable components
  • Conditional rendering (for performance and user experience, also no more custom XMLHttpRequest (XHR) requests
  • Typescript integration (find bugs by devs at compile time rather than by customers at runtime)
  • Flexible and powerful styling options (inline styling, styled components, css modules)
  • Helpful addon packages that just work (axios, react router)
  • API driven architecture (decoupling front end and back end using API’s)
  • React Developer Tools addon provides some nice features such as profiling

 

React Cons

Some things that bothered me (nothing major though!):

  • Lot of boilerplate code to get a simple app running (although create-react-app (CRA) helps with this).
  • Tracking down errors can be very tough
  • Harsh linting rules (use more relaxed linting rules or else you won’t be able to use best practices at times!)

 

Rewriting mobeigi.com

To fully appreciate React I rewrote my website (landing page) from scratch in React.

The source code is available here:
https://github.com/mobeigi/mobeigi.com

It is a pretty simple site with only a few features:

  • Standing landing page with links to social networks
  • A page to show off my trading history
  • A popup dialog to download my Resume (password protected)
  • A link to my blog

 

In the end I was able to reproduce a clone of my original website in React.

Both the new and old versions looked almost identical:

mobeigi.com React Rewrite Side by Side

mobeigi.com React Rewrite Side by Side Mobile

Differences include:

  • New website addressed some styling issues (such as button onhover text not contrasting with button background colour)
  • New website is properly responsive using rem for sizing and em for padding (old website was partially responsive using pixels for sizing).
  • And not much else!

 

Finally, I decided to use Lighthouse from the Google Developer tools window to analyse my website to see the performance before and after the change.
The desktop profile was used.

Old Website:
Lighthouse Old Mobeigi.com Website

New Website:

Lighthouse New Mobeigi.com Website

So overall not a huge difference for such a small website but a step in the right direction.

 
No Comments

Posted in Website Development

 

Leave a Reply