DEV Community: J.C. Hiatt

Let's re-implement JavaScript's Array.map method!

J.C. Hiatt — Tue, 02 Jul 2019 15:04:42 +0000

I've been posting daily JavaScript challenges on Twitter lately, and today's challenge involves re-implementing Array.map.

This is certainly not the only solution for this, but here's my stab at it.

What does Array.map do?

Full details can be found on the MDN docs, but here's the gist of things:

.map lives on the Array prototype
It returns a new Array from after calling a callback function on every element of the array on which you call it.
The callback function has 3 arguments, the last two of which are optional: the current item, the current index, and the original array you called .map on.
You can optionally pass in a second argument after the callback, which will be the this context to call the callback with. If you don't pass in a this context, the callback will be called with undefined as the this context.

Example of Array.map

const exercises = [
  "Bench Press", 
  "Svend Press", 
  "Chest Flyes",
  "Kettlebell Swing",
  "40 Yard Sprint",
];

const arr = exercises.map(item => {
  return "mapped " + item";
})

// returns:
[ 'mapped Bench Press',
  'mapped Svend Press',
  'mapped Chest Flyes',
  'mapped Kettlebell Swing',
  'mapped 40 Yard Sprint' ]

Re-implementing the method

1. Set up our function with the arguments we know it will take.

We know map accepts a callback and a this context. We also know that the this context will be set to undefined if one is not passed in, so we'll set a default value on that argument.

function newMap(callback, thisArg = undefined) {
  // more code will go here
}

2. Exit early if there's a problem and give error messages.

First check is to make sure newMap was called on an array.

function newMap(callback, thisArg = undefined) {
  // Ensure it called on an array.
  if (!Array.isArray(this)) {
    throw new TypeError('Must be called on an array');
  }
}

Next, make sure a callback was supplied since it is required.

function newMap(callback, thisArg = undefined) {
  // Ensure it called on an array.
  if (!Array.isArray(this)) {
    throw new TypeError('Must be called on an array');
  }

  // Make sure a callback was supplied.
  if ( !callback ) {
    throw new TypeError('undefined is not a function');
  }
}

Lastly, make sure that if a callback was supplied, it is a function.

function newMap(callback, thisArg = undefined) {
  // Ensure it called on an array.
  if (!Array.isArray(this)) {
    throw new TypeError('Must be called on an array');
  }

  // Ensure a callback was supplied.
  if ( !callback ) {
    throw new TypeError('undefined is not a function');
  }

  // Ensure the supplied callback is a function.
  if ( typeof callback !== 'function' ) {
    throw new TypeError(callback + " is not a function");
  }
}

3. Execute the callback for each item in the array.

function newMap(callback, thisArg = undefined) {
  // Ensure it called on an array.
  if (!Array.isArray(this)) {
    throw new TypeError('Must be called on an array');
  }

  // Ensure a callback was supplied.
  if ( !callback ) {
    throw new TypeError('undefined is not a function');
  }

  // Ensure the supplied callback is a function.
  if ( typeof callback !== 'function' ) {
    throw new TypeError(callback + " is not a function");
  }

  /**
  * Make a copy of the original array, just in case the callback 
  * does any mutations on the current value.
  */
  const self = Array.from(this);

  // Initialize a new array to build and return.
  let newArray = [];

  // Loop through the length of the original array.
  for (i = 0; i < this.length; i++) {
    /**
    * Execute the callback with `thisArg` as the `this` context.
    * Callback is executed with 3 arguments:
    * self[i] is the current value
    * i is the current index
    * this is the original array
    */
    let result = callback.call(thisArg, self[i], i, this);

    // Add the result of the callback to the new array.
    newArray[i] = result;
  }

  // Return the new array.
  return newArray;
}

Testing our new method.

We can attach our new method to the Array prototype and test it out like this:

Array.prototype.newMap = newMap;

const arr = exercises.newMap(item => {
  return {% raw %}`new ${item}`{% endraw %};
})

// Returns the same result as Array.map
[ 'new Bench Press',
  'new Svend Press',
  'new Chest Flyes',
  'new Kettlebell Swing',
  'new 40 Yard Sprint' ]

Interested in more tips and challenges? Follow me on Twitter and also check out my collection of previous tips and challenges.

Planning a JavaScript conference in only 10 weeks — Part 3

J.C. Hiatt — Tue, 26 Mar 2019 14:08:31 +0000

In case you missed it, this post is part of a series of updates I've been giving about MagnoliaJS, the conference I'm planning in only 10 weeks.

You can read last week's update here, and you can read the backstory here.

Here's how last week went!

I was able to secure a couple of additional sponsors. To date, our sponsors are:

There's still a few companies out there I've spoken with — hoping they come through! If you would like to sponsor this awesome conference, check out https://magnoliajs.com/sponsor.

I also went full on open source with the planning — moving all my high-level todos to the Github repo. HUGE shoutouts to Levi Robertson for helping get the speakers page on the website, Natalie Thomas for designing some awesome t-shirts and signage, and Jalen Davenport for volunteering to design speaker cards for Twitter!

I made some customizations to our event page on Tito so it was clearer who the speaker lineup was, and I also announced workshops!

I finalized the contract with the photographer and also booked the emcee for our event, Kenneth LaFrance, who came highly recommended.

The CFP closed, and now there's 68 submissions for me to go through! Not bad considering it was only open a couple of weeks and nobody had heard of this conference before!

Here's some stats from the past 3 weeks:

Talk submissions: 68
Tickets sold: 50 (more expected this week when I start promoting more)
Money raised: $10,500
Twitter followers: 153

Up next

Check out the Github repo to see what's up next!

How you can help

The best way to help is by buying a ticket! Early Bird is available for a few more days! Even if you can't make it, you can buy a ticket for someone who wants to attend but can't afford it. Just DM me on Twitter for more info!

The next best thing is helping to spread the word! Follow @MagnoliaJSconf on Twitter and share anything you see — that's sooo helpful!

👋

Planning a JavaScript conference in only 10 weeks — Part 2

J.C. Hiatt — Mon, 18 Mar 2019 22:42:41 +0000

Last week, I published the backstory of MagnoliaJS, as well as what I, along with a ton of support from the community, had been able to accomplish in my first week of serious planning.

Well, here's an update of how last week went!

First off, I was able to raise another ~$2,000. I still must raise at least another $10,000 within the next couple of weeks — reach out if you'd like to sponsor!

Thanks so much to Echobind, DevRelate, and Infinite Red for sponsoring!

I finally got a bank account open, so we actually can accept money now.

I ran a giveaway (sponsored by Infinite Red) to ChainReactConf. Congrats again to Dallas for winning! I have one more ticket to giveaway — keep an eye on our Twitter!

Next, I confirmed all Main Stage speakers! We have a really amazing lineup. I'm blown away — if you would have asked me 3 weeks ago if our lineup would be this good, I would have say definitely not.

Laurie Voss (@seldo)
Ken Wheeler (@ken_wheeler)
Jay Phelps (@_jayphelps)
Tae'lur Alexis (@taeluralexis)
Nader Dabit (@dabit3)
Joe Previte (@jsjoeio)
Gant Laborde (@gantlaborde)
Kurt Kemple (@kurtiskemple)
Sia Karamalegos (@thegreengeek)
Blake Watson (@blakewatson)

Lastly, I was able to launch Early Bird ticket sales using Tito! The page is a bit incomplete (I have to make some customizations tonight), but it's functional and we've sold our first tickets! I highly recommend Tito — it took me ~20 minutes from start to finish to be ready to accept money and sale tickets!

Up Next

High Priority

Get more sponsors
Add speakers to website (probably missing ticket sales because of this right now)
Close CFP on Friday and start selecting the rest of the speakers
Customize event page on Tito
Contact emcee who was recommended to me
Finalize and publish all workshops

Regular Priority

Contact meetup organizers in surrounding states and offer coupons, specifically:
- Atlanta
- Birmingham
- Little Rock
- Memphis
- Nashville
- New Orleans
Finalize contract with photographer
Generate speaker cards for Twitter using React-Sketchapp (thanks a ton to Peter Piekarczyk for showing me how I could use this to easily generate speaker card PNGs for Twitter!)
Conduct another giveaway for ChainReact Conf

If you have any tips at all or would like to help out, please reach out!

And if you haven't already, go purchase an Early Bird ticket and come hang with us on April 18!

Planning a JavaScript conference in only 10 weeks

J.C. Hiatt — Mon, 11 Mar 2019 16:06:58 +0000

I love going to conferences. The energy is always high, I always learn something (usually multiple things), and I always leave motivated to go Crush It™️.

Conferences I've been to are usually pretty big — there's lots of great speakers, huge sponsor booths, great food, awesome after parties (looking at you, Connect.Tech!!), and of course, awesome swag 😎.

There's usually a nice venue, with hundreds of people, listening to lots of speakers from all over the world, sponsored by [usually] some pretty big companies. That's a lot of things to coordinate! How long do you think it takes to plan one of those conferences?

I'm genuinely asking.

I'm asking because earlier this year I was approached by the Mayor of Jackson, Mississippi (my homeland) to plan a developer conference. And not just any conference — Mississippi's first-ever developer conference. See, he's throwing a large general tech conference called Tech JXN April 16 and 17 because he wants to help promote Jackson as a place ripe for technological innovation — he wants to put us on the map. And he wanted a developer conference the next day, April 18th.

About 12 weeks away.

And I said yes.

Why?

Mississippi lags behind in tech. A lot. And this is for a whole host of reasons, a few of which include lack of technologically innovative companies, lack of access to capital, lack of access to a large population with early adopter traits, and lack of talent.

Yes, there are developers here. But most don't stay (and here's a great talk by my friend Tim Mask on this problem — something he refers to as "Brain Drain").

I actually organize the only developer meetup in central Mississippi (and one of less than 5-ish in the state). The need for developers here is real, y'all.

It's simply a different world here than a lot of the tech hubs out there. While the Internet has created an even playing field for information, most of the opportunity has been centralized to large cities.

And that's fine. I'm not complaining. That's honestly to be expected in this early stage of the digital age we are still in. But what it does mean is that somebody (people like Tim and I) has to work really hard to bring innovation here.

How?

Okay, so back to the mayor. He knows that we need companies, capital, and talent to push us forward. Kudos to him for seeing that!

His office offered me the Jackson Convention Center as well as a small seed fund and help with logistics and printing. I need to take a pause here to say THANK YOU to the City of Jackson for giving me the initial momentum here and helping in such big ways!

By the time I said yes and was able to work out a few upfront hurdles I perceived, we were 10 weeks out. You may think I'm crazy for saying yes. How will I get speakers and sponsors so quickly? Will sponsors even be able to cut a check before the event? How will I get the word out?

Before I go into the specifics of what I've been doing, let me say upfront: I have never done this before. I've attended conferences, but never planned them.

Okay, so the first thing I did was recruit some help. I knew assembling a committee and divvying up tasks could take a while and burn through precious time, so I opted to hire one friend (an event planner with no tech background) to handle the logistics, and I would handle everything else.

But obviously I still needed others' advice and opinions. After all, I have little to no idea about what I'm doing here.

So I took to Twitter, where all great conversations happen™️. I decided to "plan in public," (inspired by the brilliant essay series by @swyx and the community really showed up!

Here's the original thread.

I've gotten a lot of great support from the dev community so far. People have DM'd me about sponsoring, volunteering, and speaking, and many have helped me spread the word! A special shoutout to Gant Laborde and Shawni Danner of Infinite Red for hopping on a call and giving me a ton of advice from their experience planning ChainReactConf. Oh, and they hooked me up with a couple of tickets to giveaway to ChainReact in order to promote my conference! I'm incredibly grateful!

So far, I've had the community help decide what to call it, what the topic(s) should be, who should speak, and more! I was able to fork a great repo from JavaScript & Friends Conference to spin up a website within a few hours. A logo was created by a coworker of mine, Ryan Stephen. I've confirmed 3 Main Stage speakers (and a few others are pending!). I've decided on a theme for the conference ("how coding can change your life"). I've launched the CFP. I've raised $8,000 of our $40,000 goal. I got a local entrepreneur to give us a bridge loan of up to $10,000 (if needed) in order to front costs while we wait for certain sponsor checks to come in (many larger companies we are approaching cannot cut checks for 60-90 days and I definitely don't have the money myself to pay for everything upfront).

Oh, and all of this happened in the past 8 days. It's AMAZING what can happen when the community comes together.

What's Next?

Our CFP is open until March 22 (go here if you want to speak!). After that, we'll announce all the speakers on the website. We are prioritizing first-time speakers (though anyone can submit!) — it's my first time to plan a conference. Let it be your first time to speak.

Right now we need sponsors very badly, so I'm solely focused this week on raising more funds. We have sponsorship levels starting at $100, so if you are feeling generous, please consider sponsoring or asking your boss if your company could sponsor! All sponsorship details are available on our website.

I'm also working on getting things ready to go live with Early Bird sales this Friday, the 15th.

I just had a call with Natalie Thomas, a local designer who has volunteered to help out with t-shirts, signage, etc.

There's a ton more to do — that's just what we're working on this coming week. I'm expecting there may be another follow-up post to this one soon. 🤓

This conference means so much to me. It will be the first of many conferences in Mississippi. It will be a positive Mississippi experience to visitors who join us from other places. It will be a shining beacon for what can be achieved when the community comes together. It will be the beginning of greater things for tech in mS

We are just under 6 weeks out. Can a respectable conference be planned in such a short amount of time? Well, I don't know. We'll find out together soon enough.

Headless WordPress with React

J.C. Hiatt — Mon, 13 Feb 2017 19:01:38 +0000

An intro to building decoupled WordPress-powered websites using the WordPress REST API and Create ReactÂ App

In recent months, I've taken a big interest in the WordPress REST API (hereto referred to as the WP-API) and React. I've been writing an introductory series to the WP-API, but decided to break for a more full-length, detailed post.

This post will outline how to get started building decoupled (or “headless”) WordPress web applications with Create React App and the WP-API. While this post is going to focus on React for the frontend, some of the general concepts still apply if you want to build your frontend with something else such as Angular, Rx, Ember, or Vue.

And you don't have to stop with web applications. You can use the WP-API to power not only web applications, but also mobile apps, gaming console apps, and more, simultaneously.

Before getting started, feel free to clone the repository for this demo.

Why?

Why WordPress?

Your first question may be “why should I care that WordPress has an API?” I've already written about this a bit in another post, but if you aren't up for opening another tab, here are a few highlights:

As of November, WordPress now powers over 27% of the web. And as of version 4.7, released just a couple of months ago, all the content endpoints for the WP-API are now included in WordPress core, so millions of new APIs just went online.
WordPress is super user-friendly. This may be the single biggest reason why WordPress has seen such widespread adoption. It allows anyone, even non-technical people, to create and edit a website. There is no other tool with the same amount of features and support in existence that's as empowering as WordPress.
WordPress is a powerful content management platform. It's a common misconception among some developers who have never used WordPress (or who haven't used it in a long time) that WordPress is merely for blogging. While it's great for blogging, it's actually great for effectively managing custom content via Custom Post Types.

Why Create ReactÂ App?

Unless you've been living under a rock in the web development world, you've undoubtedly heard of React by now. Going into the background of React is beyond the scope of this article, but I do want to introduce you to Create React App, the easiest way to get started with React.

Getting started with React itself is pretty easy. You can drop React and ReactDOM into your application today:

<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>

But if you're looking at using React on more than one small part of your application, the depth of the rabbit hole can quickly become overwhelming. Wanting to deeply learn React usually leads to a plethora of over things to learn: ES6, JSX, Babel, Webpack, and much moreâ€Š–â€Šeach of these requiring a significant time investment to really understand.

Then, even after acquiring a deep knowledge of these subjects, you'll still spend a significant amount of time in configuration on most non-trivial projects.
But what if you just want to try React itself? Or what if you want to start with a set of configuration defaults and then modify those defaults as you go along?

Well, there's hope: Create React App.

Last summer, Facebook released Create React App, a boilerplate tool with a sensible set of configuration standards so you can quickly get started with React itself and then go down the rabbit hole at your own pace.

Create React App comes bundled with Webpack, ESLint, Babel, Autoprefixer, Jest, and other great tools from the community.

Why Headless WordPress?

Okay, so WordPress is great. React is great. So why should we combine the two?

JavaScript is the future of WordPress. In late 2015, Automattic, the company behind WordPress, re-wrote their entire admin application (codenamed “Calypso”) in JavaScript. And a few weeks later, Matt Mullenweg, CEO of Automattic, gave a massive homework assignment to all WordPress developers: “learn JavaScript, deeply.”
Because a frontend/backend split is good for the worldâ€Š–â€Šboth users and developers. Better user experiences are possible. Maintaining large codebases is more efficient. Better performance.
Your company can hire more specialized talent. Frontend engineers don't have to know WordPress and vice-versa. Instead of hiring a generalist WordPress theme/plugin developer, you can hire separate roles who each have a deep knowledge of frontend engineering and Wordpress, respectively.

Onward!

Okay, so now that we've established why this matters, let's dive in!

What We'll BeÂ Building

For this tutorial, we'll be building a simple app that displays data about each of the Star Wars movies. The data will be supplied by a WordPress REST API we'll build, and we'll consume it with a React frontend built with Create React App.

Step One: Create New WordPress Installation

I won't go into much depth on this, as there are thousands of resources on the web for setting up a WordPress installation.

If this is your first time delving into WordPress, then I'll assume you don't have a local environment set up. There are some out-of-the-box solutions, such as MAMP and DesktopServer, which are great for getting going quickly. Currently, I'm using Vagrant with Varying Vagrant Vagrants and Variable VVV.

Once you have your new WordPress install set up, go ahead and visit your admin dashboard: http://your-site.dev/wp-admin

Step Two: Install the WordPress REST API Plugin (may not be required)

This step is only required if you are running a WordPress version older than 4.7. You can check what version of WordPress you are running by going to Dashboard>Updates:

As of WordPress 4.7, the WP-API is integrated into WordPress core. So if you're running 4.7 or greater, you're good to go.

Otherwise, navigate to Plugins>Add New and search for “WordPress REST API (Version 2)”. Go ahead and Install it and then Activate it.

Step Three: SanityÂ Check

Fire up your favorite API request tool (I like to use Postman) or a Terminal window if you prefer.

Fire off a GET request to http://your-site.dev/wp-json/. You should get back some JSON that contains all your WordPress site's resources and their respective endpoints.

For a quick demo, send a GET request to http://your-site.dev/wp-json/wp/v2/posts/1â€Š–â€Šyou should get back JSON with information about the “Hello World!” test post that comes with all new WordPress installs by default. If you already deleted the test post, you won't get anything back.

Step Four: Install Plugins for thisÂ Project

The next thing to do is install the plugins we'll need for this demo project. Go ahead and install these and then come back for the explanation of each (unless otherwise noted, each can be searched and installed from Plugins>Add New).

CPT UI

Custom Post Types (CPTs) is one of the most powerful features of WordPress. It allow you to create custom content types to go beyond the default Posts and Pages that WordPress ships with.

While it's certainly possible (and pretty trivial) to create CPTs via PHP, I really like how easy CPT UI is to use. Plus, if you're reading this with no prior WordPress experience, I'd rather you be able to focus on the WP-API itself instead of WordPress and PHP.

For our demo, we'll be creating a CPT called Movies.

I'm going to cover how to manually add the Movies CPT, but if you'd like to skip that and just import the data, go to CPT UI>Tools and paste in the following:

{
"movies": {
"name": "movies",
"label": "Movies",
"singular_label": "Movie",
"description": "",
"public": "true",
"publicly_queryable": "true",
"show_ui": "true",
"show_in_nav_menus": "true",
"show_in_rest": "true",
"rest_base": "movies",
"has_archive": "false",
"has_archive_string": "",
"exclude_from_search": "false",
"capability_type": "post",
"hierarchical": "false",
"rewrite": "true",
"rewrite_slug": "",
"rewrite_withfront": "true",
"query_var": "true",
"query_var_slug": "",
"menu_position": "",
"show_in_menu": "true",
"show_in_menu_string": "",
"menu_icon": "",
"supports": [
"title",
"editor",
"thumbnail"
],
"taxonomies": [],
"labels": {
"menu_name": "",
"all_items": "",
"add_new": "",
"add_new_item": "",
"edit_item": "",
"new_item": "",
"view_item": "",
"search_items": "",
"not_found": "",
"not_found_in_trash": "",
"parent_item_colon": "",
"featured_image": "",
"set_featured_image": "",
"remove_featured_image": "",
"use_featured_image": "",
"archives": "",
"insert_into_item": "",
"uploaded_to_this_item": "",
"filter_items_list": "",
"items_list_navigation": "",
"items_list": ""
},
"custom_supports": ""
}
}

Now for the manual process:

Go to CPT UI>Add/Edit Post Types
For the Post Type Slug, enter moviesâ€Š–â€Šthis is the URL slug WordPress will use.
For the Plural Label, enter Movies
For the Singular Label, enter Movie
IMPORTANT: Scroll down to the Settings area and find the “Show in REST API” option. By default, this is set to False. If you don't change it to True, you will not be able to query this CPT using the WP-API. Right underneath that option, you should see the “REST API base slug” optionâ€Š–â€Šyou can enter movies here.
Scroll all the way down and click Add Post Type.

You should see a new Movies option appear in the sidebar:

Advanced Custom Fields

Speaking in database terms, if CPTs are the tables, Custom Fields are the columns. This isn't actually how WordPress stores CPTs and Custom Fields in its database, but I find this illustration helpful to those who have limited to no WordPress experience. CPTs are the resource (i.e. “Movies”) and Custom Fields are the metadata about that resource (i.e. “Release Year, Rating, Description”).

Advanced Custom Fields (ACF) is the plugin for WordPress Custom Fields. Of course, you can create Custom Fields with PHP (just like CPTs), but ACF is such a time-saver (and it's a delight to use).

You can get this one from Plugins>Add New, but if you want to use the import function to import my sample data, you'll need the Pro version, which you can find here).

If you have the Pro version, go to Custom Fields>Tools after Activating the plugin. You can then paste in this JSON to import the fields you'll need:

[
{
"key": "group_582cf1d1ea6ee",
"title": "Movie Data",
"fields": [
{
"key": "field_582cf1d9956d7",
"label": "Release Year",
"name": "release_year",
"type": "number",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"default_value": "",
"placeholder": "",
"prepend": "",
"append": "",
"min": "",
"max": "",
"step": ""
},
{
"key": "field_582cf1fc956d8",
"label": "Rating",
"name": "rating",
"type": "number",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"default_value": "",
"placeholder": "",
"prepend": "",
"append": "",
"min": "",
"max": "",
"step": ""
},
{
"key": "field_5834d24ad82ad",
"label": "Description",
"name": "description",
"type": "textarea",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"default_value": "",
"placeholder": "",
"maxlength": "",
"rows": "",
"new_lines": "wpautop"
}
],
"location": [
[
{
"param": "post_type",
"operator": "==",
"value": "movies"
}
]
],
"menu_order": 0,
"position": "normal",
"style": "default",
"label_placement": "top",
"instruction_placement": "label",
"hide_on_screen": "",
"active": 1,
"description": ""
}
]

If you don't have the Pro version, here's how to setup your Custom Fields:

Create the Field Group

ACF organizes collections of Custom Fields in Field Groups. This is domain-specific to ACF. That's all you really need to know about Field Groups for now.

1.Go to Custom Fields>Field Groups

Click “Add New”
For the Field Group title, enter “Movie Data”
Scroll down until you see the Location metabox. Set this Field Group to only show if Post Type is equal to Movie:

You can then scroll down to the Settings metabox. You should be able to leave all these options set to their defaults, but you can still give it a once over compared against this screenshot:

After that, click Update to save your Field Group settings.

Create the Custom Fields

First, create a Release Year field:

Field Label: Release Year
Field Name: release_year
Field Type: Number
Required? No

Next is the Rating field:

Field Label: Rating
Field Name: rating
Field Type: Number
Required? No

And lastly, the Description field:

Field Label: Description
Field Name: description
Field Type: Text Area
Required? No

Don't forget to click Update to save your new Custom Fields.

Now, if you to to Movies>Add New, and then scroll down a bit, you should see a metabox called Movie Data (the name of your field group) along with each of the Custom Fields you created inside it:

ACF to REST API

Now that we have our Custom Fields, we need to expose them to the WP-API. ACF doesn't currently ship with WP-API support, but there's a great plugin solution from the community called ACF to REST API. All you have to do is install (you can find it by searching for it at Plugins>Add New) and activate it, and it will immediately expose your ACF custom fields to the API.

If we had created our Custom Fields directly via PHP (without the use of a plugin), there's also a couple of nifty functions for exposing the field to the API. More on that here.

Step Five: Post DataÂ Import

This is the last step to get our WordPress installation ready to serve our Star Wars data.

First, we need to import all the Movies. Lucky for you, I already did all the manual work and all you have to do is import a nifty file.Â :-)

Go to Tools>Import. At the bottom of the page you should see an option to import from WordPress with an Install Now link underneath:

After the WordPress Import installs, you should see a link to run the importer. Click that and import this file at the next screen.

The next screen will ask you to assign the imported posts to an author. You can just assign them to your default admin account and click Submit:

Lastly, go to Movies>All Movies. You should see a listing of Star Wars movies (Episodes 1–7). Because I developed in my local environment, the import file couldn't import the featured images for the Movies (it couldn't fetch them from the origin server), so you'll have to add those manually (it only takes about 30 seconds).

My preferred way (and the fastest way) is to hover over each of the posts on the All Movies page and hold Command (Control on Windows) and click Edit for each one. This will open one tab for each Movie.

On each of the edit pages, in the right sidebar, find the Featured Image metabox and click Set Featured Image. Here's a ZIP file with each of the images you'll need. Or you can use any other images you'd like.

For the first one, it's easiest to upload all the images to the Image modal that you see when you click Set Featured Image and then only select the one you need for that first Movie (this will save you the time of uploading each image individually across all your Movies):

If that seems unclear, here's a GIF that will hopefully make more sense than my poor attempt at explanation.

For each Movie, be sure to click Update after selecting featured image.

Now you're good to go! Now leave your WordPress server running and let's move on.

Step Six: Install Create ReactÂ App

Assuming you already have Node and npm installed on your machine, simply run this command:

npm install -g create-react-app

That's it! You're ready to use Create React App.

Step Seven: Create theÂ App

cd into the directory you'd like to create the frontend (this doesn't have to be (and shouldn't be) the same directory as your WordPress installation). Then run:

create-react-app headless-wp

The process will take a few minutes, but once it's complete you should be able to cd into the newly created headless-wp directory. From there, run:

npm start

This command fires off a number of things, but all you need to know at the moment is that it'll boot up a Webpack dev server. Your browser should automatically open to http://localhost:3000:

You can leave the server running in your shell. Hot reloading will automatically refresh your webpage every time you save a file.

Step Eight: Create Your Component

Since this demo app is very simple, we'll only be using one component. We could easily create another component (it's as easy as creating another ComponentName.js file and importing it into its parent component), but we're instead going to edit our App.js component.

Open up App.js. You can go ahead and delete all the existing code from this file except for the first and last lines.

At this point, App.js should look like this:

import React, { Component } from 'react';
export default App;

Next, create the render() function for this component. This function gets called every time the state changes. If you aren't sure what this means, have some patience. It'll make sense soon.

App.js should now look like this:

import React, { Component } from 'react';
class App extends Component {
  render() {
    return (
      <div>
        <h2>Star Wars Movies</h2>
      </div>
    )
  }
}
export default App;

Whatever render() returns is what gets painted on the DOM. If you save this file and go back to your browser, it should automatically reload and you should see this h2 we created:

This is great and all, but what about all that great data we stored in WordPress about the Star Wars movies? Time to get that data!

Update App.js like so:

import React, { Component } from 'react';
class App extends Component {
  constructor() {
    super();
    this.state = {
      movies: []
    }
  }
componentDidMount() {
    let dataURL = "http://headless-wp.dev/wp-json/wp/v2/movies?_embed";
    fetch(dataURL)
      .then(res => res.json())
      .then(res => {
        this.setState({
          movies: res
        })
      })
  }
render() {
return (
      <div>
        <h2>Star Wars Movies</h2>
      </div>
    )
  }
}
export default App;

We just added two new functions to our render() function: constructor() and componentDidMount().

The constructor() function is where we initialize state. Since we're only dealing with some JSON about our movies, our state is going to be pretty simple. Our initial state will just be an empty movies array since we're expecting to get back that JSON.

The componentDidMount() function fires after the component mounts. This is the best place to make external API calls, so this is where we've added our code to use the fetch API to grab all the movies from our WordPress API (be sure to update the URL to reflect your own URL!). Then, we're taking the response, parsing it as JSON, and then pushing it into our state object.

Once the response gets pushed into our state, the component will re-render by firing the render() function because the state has changed. But this doesn't really matter right now, because currently our render() function is still only returning a div with a h2 inside.

Let's fix that.

We're now going to add a bit of extra code to our render() function that will take the JSON in the our state (currently stored in this.state.movies) and map each movie and its data into a div.

App.js should now look like this:

import React, { Component } from 'react';
class App extends Component {
  constructor() {
    super();
    this.state = {
      movies: []
    }
  }
componentDidMount() {
    let dataURL = "http://headless-wp.dev/wp-json/wp/v2/movies?_embed";
    fetch(dataURL)
      .then(res => res.json())
      .then(res => {
        this.setState({
          movies: res
        })
      })
  }
render() {
    let movies = this.state.movies.map((movie, index) => {
      return <div key={index}>
      <img src={movie._embedded['wp:featuredmedia'][0].media_details.sizes.large.source_url} />
      <p><strong>Title:</strong> {movie.title.rendered}</p>
      <p><strong>Release Year:</strong> {movie.acf.release_year}</p>
      <p><strong>Rating:</strong> {movie.acf.rating}</p>
      <div><strong>Description:</strong><div dangerouslySetInnerHTML={ {__html: movie.acf.description} } /></div>
      </div>
    });
return (
      <div>
        <h2>Star Wars Movies</h2>
      </div>
    )
  }
}
export default App;

If you save your file, the page will reload, but you still won't see the Star Wars movie data load on the page. That's because there's one last thing to add. We're mapping each of our movies to their own respective divs, and then storing all those movies inside the movies variable in our render() function. Now we just need to tell our render() function to return our movies variable by adding {movies} underneath our h2.

Finished App.js:

import React, { Component } from 'react';
class App extends Component {
  constructor() {
    super();
    this.state = {
      movies: []
    }
  }
componentDidMount() {
    let dataURL = "http://headless-wp.dev/wp-json/wp/v2/movies?_embed";
    fetch(dataURL)
      .then(res => res.json())
      .then(res => {
        this.setState({
          movies: res
        })
      })
  }
render() {
    let movies = this.state.movies.map((movie, index) => {
      return <div key={index}>
      <img src={movie._embedded['wp:featuredmedia'][0].media_details.sizes.large.source_url} />
      <p><strong>Title:</strong> {movie.title.rendered}</p>
      <p><strong>Release Year:</strong> {movie.acf.release_year}</p>
      <p><strong>Rating:</strong> {movie.acf.rating}</p>
      <div><strong>Description:</strong><div dangerouslySetInnerHTML={ {__html: movie.acf.description} } /></div>
      </div>
    });
return (
      <div>
        <h2>Star Wars Movies</h2>
        {movies}
      </div>
    )
  }
}
export default App;

Switch back over to your browser window and you should see the Star Wars data after the page reloads:

Going Further

This is only the beginning of what you can do with the WP-API and React. Both have many other features and both have huge communities.

You can take the WP-API further by learning about authentication and POST requests, custom endpoints, and more complex queries.

And as I said earlier, Create React App is made for you to just get your feet wet. When you're ready to learn more, you can learn more about things like Redux, ES6, Webpack, React Native, and more.

I'll be covering many of these topics and more in future posts, so be sure to check back. Or if you'd prefer to have these posts sent directly to your inbox, shoot me an email and I'll add you to my mailing list.

Questions?

I'm happy to help! Leaving a comment below is the fastest way to get a response (plus, it helps others who have the same problem!). Otherwise, drop me a line on Twitter or shoot me an email and I'll do what I can to help!