Building A Web App Skin With React And WordPress

Building A Web App Skin With React And WordPress

Johnny Greaves

If you are a web developer, then you might have already thought about how to create WordPress theme. There are a few ways that you can do this, and, here, we explain the basics of building a web app skin with React and WordPress.

Building The Theme

To get started, you’ll need to use your localhost to create an instance of WordPress. You should choose a name of a theme that you are going to use to set the direction for when you are building themes in the future. Once you have done this, you should create a new folder for this theme and place it in the wp-content\themes folder. You should then create a folder under the name of your chosen theme in the C:\xampp\htdocs\yourtheme \wp-content\themes\ folder. You should then add the following files to this folder: index.php, style.css and functions.php. Finally, you should head to your themes from the main menu and locate the theme that you did this for.

Using React For The Theme

After you have laid the foundations, you can start to use React to create WordPress theme. Firstly, use an NPM to initialise the project. You should then use the command npm init and from here your project should load with the relevant files. You will also need to install any NPM packages that you might need. To do this, you should input install –save react react-dom and press enter. To progress, you’ll need to install Webpack to your computer and make sure that everything is running smoothly. This should then have set up your basic theme and aid you in building a web app skin.

The WordPress Rest API

If you want to take advantage of the WordPress REST API then you need to think about making separate cells for all of the elements in it. This will mean that you will be able to get all of the details about the author and any featured images. You’ll want to add some code to create variables that will let you input your own data into your theme.

React and JSX

Because we are using React to create the theme, it is important to know where the HTML needs to be written. When you use React, you need to know that the HTML is written inside the JavaScript code rather than having the JavaScript written in the HTML itself. Make sure that you input the correct code into the correct place to make everything work properly.

Stateless and Stateful Components

The last important thing about this that we are going to touch on is the difference between stateless and stateful components. For stateless components, when the variable changes, the component is rendered again. When it comes to stateful components, the variables in the state are used when it comes to the inner communication between the component.

There’s plenty more to know about using React and WordPress to build a skin but we have covered the basics here for you.

Johnny Greaves

Author Johnny Greaves

Johnny has been building websites for 9 years, from small family-run company websites to internal web-apps for large enterprises. He has a management degree from the University of Manchester and likes to break things to see how they work. As far as we’re aware he can function solely on coffee and jelly-beans.

More posts by Johnny Greaves