skip to Main Content

WordFlix – Single Page App tutorial: Step 2 – Prepare React App

Post Series: WordFlix – Super Powered Single Page App Tutorial

Step 2 – Starting Point

If you followed the previous steps of the tutorial, you should be able to continue here, but if you’re just jumping in or got lost in the last steps or just want to skip ahead, you can either check-out this branch of the Github repo or change directories to the “1” theme (wp-content/themes/1)

Cleaning up the “Create React App” boilerplate code

In this step, we’re removing the boilerplate code that came with “Create React App” so we can start working on our own app.

Remove files

In this step, we remove all files in the “app/src” directory except for the index.js file, as that serves as our main entry to the app.

Go ahead and remove those files now.

Update index.js

Now, with just the index.js file left in our “app/src” directory, we will update the file to be super-minimal so we can work forward and get things going and understand each step of the way.

So, clear all the contents of the index.js file and replace it with:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

/**
 * This is the only component we actually render directly to the DOM!
 */
class App extends Component {
  render() {
    return(
      <h1>WordFlix, your friendly super powered single page app!</h1>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

The first 2 lines import our dependencies (which live in our node_modules directory during development).

Then we define a new “App” component which renders an <h1>.

And finally, we render the App component to the div#root, which exists in our index.php file.

So, this is telling React to find the div#root, and render the <App> component, which contains an H1.

At this point, your WordPress site should look like this:

Leave a Reply

Share This
Back To Top