In the current times, WordPress and React.js are gaining appraisal across the planet for their functionality and efficiency for application development. Developers often feel conflicted when deciding which tool is better for developing applications and other content. To help developers make an informed choice, we at MindBowser have created a guide to illustrate the contrast between the two.
WordPress
The goal is to get us bootstrapped with a new React based WordPress theme with a few commands. If any of you are familiar with create-react-app, its basically the same functionality – but for WordPress. One primary difference is that it uses WordPress (not webpack), as the development server. The WordPress REST-API allows you to retrieve your content and generate the final HTML Frontity apps built with React serve your content and run separately on a Node.js server WordPress + React made easy Frontity connects seamlessly with WordPress so you can focus on building your website or blog. Use WordPress with React to Create Headless CMS for Your Web Application WordPress Rest API is one of the many great features WordPress offers. It enables developers to create fascinating plugins and themes, and also allows them to power third-party applications with WordPress CMS.
WordPress is a user-friendly software package that one can use to create websites, blogs, or applications. WordPress has access to beautiful designs, powerful features, along with the freedom to build anything.
WordPress is an open-source content management system (CMS) written in PHP and paired with a MySQL or MariaDB database. Its features include a plugin architecture and a template system, referred to within WordPress as Themes. WordPress was originally developed as a blog-publishing system but has evolved to support other types of web content including more traditional mailing lists and forums, media galleries, membership sites, learning management systems (LMS), and online stores.
Why Select WordPress For Application Development?
Extensive Support
WordPress has a huge community that is there to extend support whenever needed. People are generously contributing their ideas to constantly improve it. As a result, the community has evolved into a vibrant, open-source community that has helped several developers cut their support costs.
Security
Security is one of the primary concerns for web developers, and WordPress offers robust solutions in this regard. WordPress provides regular updates that protect you from security vulnerabilities. This along with a dedicated and helpful community has led WordPress to become one of the best software packages available for content designing.
Flexibility For Multiple Data Types
The default architecture of WordPress is designed such that it supports features like posts, pages, comments, media, and more. Likewise, people can also create multiple Custom Post Types (CPTs) and Taxonomies for specific needs.
SEO Friendly CMS
WordPress has one of the most SEO friendly CMS available to date. Content quality is essential for website performance and WordPress combines both tools and code to allow frequent content updates. WordPress provides robust and free SEO plugins thus augmenting its advantages.
Disadvantages Of WordPress
It’s quite impossible to develop any software that is perfect in all aspects. The same is true for WordPress. Some of the cons of using WordPress are:
Updates
Installing regular updates is critical to the health of any WordPress site, but can prove to be irksome if not done vigorously. Premium WordPress themes are often updated and improved upon. These updates are essential for preserving security on WordPress websites. Updates may sometimes bring some small problems to a website in which case reverting to an older website version may compromise functionality.
Vulnerability
Due to WordPress being an open-source platform, it is lucrative to potential hackers. To mitigate this risk, WordPress has frequent security updates augmented with a knowledgeable community that works tirelessly to solve any potential issues. The idea of security breaches may discourage certain developers to use WordPress.
Speed
Certain WordPress themes contain a lot of irrelevant generic code. This leads to a decrease in the speed of the site and causes slow load times. Without prior WordPress experience, it can be difficult to comprehend which part of the code is necessary and which is not.
React
React (also known as ReactJS or React.js) is an open-source JavaScript library useful for building user interfaces or UI components. It is individually maintained by Facebook and a community of developers and companies.
React can be used as a base for the creation of single-page or mobile applications. React is only concerned with rendering data to the Document Object Model, and hence developing React applications requires the use of additional libraries for state management and routing.
Why Select ReactJS For Application Development?
Easy To Create Dynamic Web Applications
To create a dynamic web application specifically with HTML strings was tricky because it required complex coding, but React JS solved that issue and made it easier. It requires much less coding and provides more functionality. ReactJS makes use of the JSX (JavaScript Extension), which is a particular syntax letting HTML quotes and HTML tag syntax to render particular subcomponents. It also supports the building of machine-readable codes.
Reusable Components
A ReactJS web application is made up of multiple components, and each component has its unique logic and controls. These components are responsible for outputting a small, reusable piece of HTML code which can be reused wherever you need them. The reusable code helps to make your apps easier to develop and maintain. The components can be nested with other elements to allow complex applications to be built out of simple building blocks.
Performance Enhancement
ReactJS improves performance due to virtual DOM. The DOM is a multi-platform programming API that deals with HTML, XML or XHTML. Most developers face a problem when the DOM is updated, which slows down the performance of applications. ReactJS solved this problem by introducing virtual DOM. The React Virtual DOM in its entirety exists in memory and is a representation of the web browser’s DOM.
Inherent Advantages Of JavaScript Library
Today, ReactJS is being chosen by a majority of web developers. It is because ReactJS offers a very rich JavaScript library that provides enhanced flexibility to web developers to choose the way they want to design their projects.
Disadvantages Of ReactJS
Just like WordPress, ReactJS also has its own set of disadvantages. Some of these are:
Rapid Pace Of Development
The high pace of development is both an advantage and a disadvantage. In case of disadvantage, since the environment continually changes rapidly, some developers do not feel comfortable to relearn the new ways of doing things regularly. It may be difficult for them to adopt all these changes with all the continuous updates. Developers need to frequently update their skills and learn new ways of doing things.
JSX Is A Requirement
ReactJS uses JSX. It is a syntax extension that allows HTML and JavaScript to be mixed together. This approach has its benefits, but some members of the development community consider JSX as a barrier, especially for new developers. Developers complain about its complexity in the learning curve.
Poor Documentation
It is yet another con that is common for constantly updating technologies. React technologies are evolving at such a rapid rate that there is no time to create proper documentation. To overcome this, developers have to write instructions on their own with the development of new releases and tools in their current projects.
Comparison Between WordPress And React.Js
Remote desktop connection for mac 2. To elaborate on how distinct WordPress and React.js are, here is a table outlining the basic differences between them both:
It’s been a while since I worked with WordPress, especially building themes. This time around, I wanted to bring in a bit more modern development experience into the process. I wanted to build a Single Page Application (SPA), with WordPress’ Rest API – but as a WordPress theme. The problem is, this can be a pain to setup. Especially with the build step and all.
I specifically wanted to use Reactfor the front end. React is Facebook’s product, and per their website: React is a library for building user interfaces. It has a very broad user base and lots of modules available, which makes it ideal for our theme. In conjunction, we’re using create-react-wptheme – which will make our theme up and running with React in no time. And of course, WP Rest API for the backend.
Note that this tutorial is geared towards PHP or WordPress developers – who are looking to get started working with Single Page Applications with React.
This will be the first of a series of posts:
The theme we’re going to build throughout this series is more of a starter theme. We’re calling it “barebones” and it contains just the right amount of functionality for a basic WordPress theme.
We will need the following to get started:
- nodejs + npm
- git bash (or terminal)
- local WordPress installation
create-react-wptheme
Let’s talk briefly about create-react-wptheme. The goal is to get us bootstrapped with a new React based WordPress theme with a few commands. If any of you are familiar with create-react-app, its basically the same functionality – but for WordPress. One primary difference is that it uses WordPress (not webpack), as the development server. This makes development consolidated in one – front end and back end.
In addition, since it’s a WordPress theme, you have access to all the core functions, filters, actions, hooks etc. Also, you can use WordPress’ nonce for authenticated requests. Lastly, if you must use plain PHP – say only for a specific page, you can still use WordPress’ page templates – which is very handy.
So with that in mind, let’s get started.
First, assuming you have a local WordPress installation, go ahead and start a terminal (git bash) in the themes directory.
Headless Wordpress React
In Windows, git bash is a pretty good tool, simply right click and “Git Bash Here”. This will launch the terminal, where we can start our installation. Type in the command below:
Note that “barebones” is the name of our theme. You can simply replace this with a theme name of your preference.
Once that’s done, you will see a message like above. The installation created a root folder, with a “react-src” directory inside it. Consider the react-src directory as the most important directory because it holds all of your un-compiled code. From this directory – we can build the rest. You’ll see what I mean later.
Note that at this step, our theme is not ready yet.
See, if you look inside wp-admin > themes, you will see “barebones” under the “Broken Themes” section.
This is because we don’t have the necessary files (mainly the styles.css) for it to be a valid theme. Note that we also need index.php, so the we can hold the JavaScript and CSS files together.
wpstart
Let’s go back to our terminal and type the following:
2 | npm run wpstart |
Wordpress React Gutenberg
We’re going into our theme directory and inside “react-src” by using the “cd” command, then we run wpstart. This will fix the “Broken Themes” issue, and if we go back to the browser and go in wp-admin > themes themes, you should be able to see our theme.
Now let’s activate the theme by clicking “Activate“. This will tell WordPress to use this theme we just built. Now let’s go and view our site in the browser. You should see a message
“Please restart the Nodejs watcher now… “
What this means is that we have to run wpstart a second time, for the script finish setting things up. Let’s go back to git bash and do a “CTRL + C”. Then type in:
Now, once this is done, a new browser tab should have opened automatically and looks like below:
It may not look like much, but this tells us a lot. This page indicates that we’ve just successfully installed our React theme. This includes the PHP, CSS and JavaScript files, plus all the resources to run our React application. So well done!
Note: wpstart is for “dev” mode.
From this point onward, when you’re in wpstart mode, (when you do npm run wpstart) that means you are in development mode. What this means is that anytime you change something in the react-src directory, the files will get recompiled and placed in the proper places. Any changes will also cause your browser to refresh – so you see your changes instantly.
Do Not Edit the files in ROOT
The files in the root folder (outside of react-src), is the compiled version of your code that is needed for WordPress and React to run. You shouldn’t edit anything in here because as soon as you save files in react-src – the files in the root will be replaced with the new. So anything you change here will get OVERWRITTEN.
File Structure
Let’s take a quick look at at the file structure for it’s important to know what it is and how create-react-wptheme use it. In a regular WordPress theme, all we really need are the PHP (such as header, footer) and CSS.
In our new theme, it looks something like below:
As you can see, there is none of the familiar files you would expect in a WP theme. Remember we’re building an SPA – which will all be in JavaScript.
As mentioned previously, inside react-src are the uncompiled and “editable” version of your code. Everything else (the root and static folder) are the output of what you have in react-src. Take note of that text file that’s titled !DO_NOT_EDIT_THESE_FILES!.txt. Remember what I said about not editing files in the root?
The “public” folder
The author of create-react-wptheme saved a special folder for our non-react files called “public”. Whatever you add in this folder, gets copied directly to the root. So, things like functions.php, or page templates – even CSS or JS can be dumped in here – and it will get copied into the root at compile time.
Again, this folder can be extremely helpful – especially for developers who would still like to access core functionality such as hooks, filters, actions etc.
Also, index.php – will only get loaded once, and is the entry way for your React application. The goal is, once loaded, all interactions will be through the REST api. So whatever PHP has produced in index.php will stay the same all throughout your application (except PHP page templates).
The “build” folder
We haven’t covered wpbuild yet, but since we talking about the file structure, you will notice a folder called “build“. This is a special folder that holds the final “deployable” code.
What that means is, almost like the contents of the “root” folder, but compressed, minified and optimized for production. Also, it doesn’t contain any dev files (such as react-src).
This brings us to the last section: wpbuild:
Wordpress React Plugin
wpbuild
So let’s get back to git bash and do CTRL + C. Type in the following command:
You will see messaging that looks something like:
This simply shows files that have been created, optimized and placed in the build folder, as well as the root. This means that you see your optimized code right away.
Wordpress Reactions Plugin
To see how that looks, when you refresh your browser, you will see just a bunch of compressed code like this:
Your WordPress theme’s source code has been flattened, ready for world consumption. Also, take a look at the contents of the root directory:
You notice the absence of the file !DO_NOT_EDIT_THESE_FILES!.txt. That means, that you’ve just run wpbuild and its now in “build” mode.
When you’re ready to go back to making some changes, don’t forget to go back into “dev” mode, by running “npm run wpstart” in the react-src directory.
Wordpress React Version
And there you have it. We have our React application running as a WordPress theme. I’ve created a Github repo for Barebones theme. You can go ahead and fork it for your next project, or stay tuned for more tutorials.