WordPress VS React – What I learned from my first day with React

It was 3 years ago that I worked with people who used React for the first time. After that, I had many chances to get in contact with React. But I haven’t really write frontend using React until today.

I am quite amazed with the React ecosystem and would like to share my comparison here.

Little about my background

I have been website developers for many years (6+ years). Most of my works nowadays are WordPress development for corporate clients. I and my team dealt with advanced WordPress tools such as custom themes and plugins made from scratch.

My experience with React is stated in the first paragraph. I did followed one tutorial on React Native before. But it merely helped me memorize the core of React.

React Native app I followed the tutorial from MAPT.io

WordPress VS React

It would be funny to argue between WordPress which is CMS (Content Management System) versus React which view (Yes, it is not even MVC framework. Please stop comparing it to AngularJS). However, React can be used to build a web application by cooperating with other libraries as well.

Note: When I referred to React in this article, I usually mean the whole React ecosystem with other libraries rather than just React.

Therefore, I will list some advantages of choosing WordPress or React to build a website. Note that I am not an expert in React, please feel free to jump in and correct me.

Good things about WordPress

Easy to start – It is easy to install and start your own WordPress website in few minutes. Some hosting providers have one-click installation tool ready in their DirectAdmin as well.

Small learning curve for beginners – If you want to build a simple website with necessary functions, then WordPress got it all for you out of the box e.g. Post Editor for writing articles, Drag and drop menus and sidebars tools, Authentication system with multiple roles etc.

Top-class of Content Management System – Clients are happy with how easy it is to do things in WordPress.

Lots of plugins & themes – Need a web form with every submission sent to your email? Just install a plugin. Need a webboard? Just install a plugin. Need auto backup system? Just install a plugin. Need beautiful website but you are not a designer? Just install a theme.

Low cost hosting – Most low cost web servers are running PHP which make the cost of setting up new WordPress website becomes considerably low. However, I found that these servers usually run old/deprecated versions of PHP which is insecure and have bad performance.

SEO is just too good – If you are building website which rely on good SEO, then using WordPress gives you good SEO out of the box. There are lots of SEO plugins to help you improve your ranking as well as social sharing. React does have SSR (server-side rendering) which is great, but SEO in WordPress is still the best from what I have seen so far.

Good things about React (Ecosystem)

Fast – When browsing WordPress website, you have to load every part of websites again and again. However, in React, you can just load the data and rerender. Users love fast websites.

Build native apps with React Native – When you learned React, you can extend your knowledge to build mobile apps on both Android and iOS. Unlike building responsive website, native app has good performance and usually give better experience for users as well.

Most libaries are FREE and supported by community – Now that WordPress is overwhelmed with paid themes and plugins, building app with React is 100% free most of the time. I also love the way React community help supporting each other’s plugins.

Best for building website which gets data from API – New generation of web ecosystem turned into lots of APIs, which is a good thing because APIs require lower bandwidth to send data, thus make the web faster. Not that WordPress cannot receive data from API, but React is clearly more beautiful and easier to parse the received data into components.

How to get started with React

Here is how I started learning React.

Learn the fundamental concepts

First, you need to learn React. There are free tutorials on the official website. I recommend you to look on the internet for other resources such as videos. Recently, I found the website React.express which explained fundamental of React quite well.

Here are fundamental concepts of React that you really need to understand:

Start project with starter kit

In terms of getting started with React project, I found create-react-app to be the easiest way to start building web application with React. It comes with configured setup so you don’t have to do it yourself. You can use ES6 right away. If you need extra features such as SASS, the tutorial links in the README file are provided.

Learn other libraries one by one

Starting with popular libraries are great because you can easily find tutorials and Stackoverflow questions if you stuck.

I started using styled-components today and love it. The tutorials on official website is great, but I got stuck trying to make emmet works with styled-components. Since this library is quite popular, I quickly found a solution in Google.

Tomorrow I will learn about Redux which might come in handy for the project I am building.

Feel free to comment. Any advice on how to learn React is appreciated!