This includes the PHP, CSS and JavaScript files, plus all the resources to run our React application. This page indicates that we’ve just successfully installed our React theme. It may not look like much, but this tells us a lot.
Now, once this is done, a new browser tab should have opened automatically and looks like below: Let’s go back to git bash and do a “CTRL + C”. What this means is that we have to run wpstart a second time, for the script finish setting things up. “ Please restart the Nodejs watcher now... “ Now let’s go and view our site in the browser. This will tell WordPress to use this theme we just built. Now let’s activate the theme by clicking “ Activate“. 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. We’re going into our theme directory and inside “react-src” by using the “cd” command, then we run wpstart. Let’s go back to our terminal and type the following: cd barebones/react-src Note that we also need index.php, so the we can hold the JavaScript and CSS files together. This is because we don’t have the necessary files (mainly the styles.css) for it to be a valid theme. See, if you look inside wp-admin > themes, you will see “barebones” under the “Broken Themes” section. Note that at this step, our theme is not ready yet. From this directory – we can build the rest. Consider the react-src directory as the most important directory because it holds all of your un-compiled code.
The installation created a root folder, with a “react-src” directory inside it. Once that’s done, you will see a message like above. You can simply replace this with a theme name of your preference. Note that “barebones” is the name of our theme. Type in the command below: npx create-react-wptheme barebones This will launch the terminal, where we can start our installation. In Windows, git bash is a pretty good tool, simply right click and “Git Bash Here”. Lastly, if you must use plain PHP – say only for a specific page, you can still use WordPress’ page templates – which is very handy.įirst, assuming you have a local WordPress installation, go ahead and start a terminal (git bash) in the themes directory. Also, you can use WordPress’ nonce for authenticated requests. In addition, since it’s a WordPress theme, you have access to all the core functions, filters, actions, hooks etc. This makes development consolidated in one – front end and back end. One primary difference is that it uses WordPress (not webpack), as the development server. If any of you are familiar with create-react-app, its basically the same functionality – but for WordPress. The goal is to get us bootstrapped with a new React based WordPress theme with a few commands. Let’s talk briefly about create-react-wptheme. We will need the following to get started: We’re calling it “barebones” and it contains just the right amount of functionality for a basic WordPress theme.
The theme we’re going to build throughout this series is more of a starter theme. This will be the first of a series of posts: Note that this tutorial is geared towards PHP or WordPress developers – who are looking to get started working with Single Page Applications with React. And of course, WP Rest API for the backend. In conjunction, we’re using create-react-wptheme – which will make our theme up and running with React in no time. It has a very broad user base and lots of modules available, which makes it ideal for our theme. React is Facebook’s product, and per their website: React is a library for building user interfaces. I specifically wanted to use React for the front end. The problem is, this can be a pain to setup.
I wanted to build a Single Page Application (SPA), with WordPress’ Rest API – but as a WordPress theme. This time around, I wanted to bring in a bit more modern development experience into the process. It’s been a while since I worked with WordPress, especially building themes.