Coding an Advent Calendar: Day 7 (REST API + ReactJS)
- WP REST API!!
- Today is the big day! WordPress 4.7 launched this morning (in Korea) with the WordPress REST API content endpoints included in core (and a pretty great updated REST API Developer Reference as well). So… you know what that means. Today is the day I get the Advent Calendar to pull my blog posts with the (core) WP REST API! There are X steps:
- Revisit Day 2 where I set up the basic infrastructure for ReactJS & REST
- Update to WordPress 4.7 – where REST endpoints will work immediately (cool)
- Install Postman for Chrome* to test calls to the REST API
- Configure the REST URL (I have mine pull from THIS Category)
- Add it to the Codepen
- Watch the magic happen!! (…almost)
*Side note: Be sure to get Postman’s output as JSON for an easier view.
- React Component
- Actually, I hadn’t already created my React function to render the retrieved Component. I’d only filled in a blank
<div>as a placeholder. So, the next step was to create an HTML structure in the React class that would receive the array of Posts from my REST API query and render them to the page.
Then, I added some basic CSS styling to make them look a little better on the page after loading.
But… that’s Codepen. If I wanted to continue local development, it wasn’t going to be nearly so easy as that. I’d never heard of BabelJS before this, so I started investigating it and found out that it is often used with React and other scripts to create modern JS like ES2016. I realized I’d need to install the Node Modules for React, Babel, and Grunt to run all of these together, so my research and work began. There were X steps to complete this process:
npm install --save-dev babel-cli babel-preset-latest babel-preset-react grunt-babelto install all the necessary development dependencies
npm install --save react react-domto save the necessary project dependencies
package.jsonto recognize babel (rather than creating a
Gruntfile.jsto “watch” for changes to my React app’s JS file and run the compile task
- Separate out my React Component code from the
functions.jsfile to better manage the two separately
- Also, include React and React-DOM in the React app’s JS file
So far, I’ve been able to get Grunt to successfully “watch” for changes to my Sass files and my ReactJS files and run their compilation tasks. But, now I’m getting an
Uncaught ReferenceError: require is not defined(...)error. Well, looks like fixing this is on the schedule for tomorrow!~
The following are some React and BabelJS references I was perusing today as I tried to get things to work. I haven’t finished reading through all of them yet:
- Writing React components as CommonJS modules
- NPM: A RequireJS plugin for loading jsx in require.js and r.js
- The React.js Way: Getting Started Tutorial
- 9 things every React.js beginner should know
- ES6 with Babel.JS
- Setting up an ES6 Project Using Babel and Browserify
- Babel + Grunt === ES6 Now!
- ES6 with Babel & Grunt
Additionally, I just stumbled across a Lynda.com video that addresses using BabelJS to compile React. In this video, Eve Porcello shows how you can do in-browser Babel compilation by importing the script via a CDN, then using
<script type="text/babel"> tags around any code you want compiled by Babel.
She does note that in-browser compilation is slow – and shouldn’t be used in a production environment. So, it’s good that I’ve started getting Babel set up as a module to precompile my JS before using it in the webpage.
Work Completed (to date)
- December 7, 2016
- Pull post data with the WP REST API in WordPress core!!
- Write structural code for the React Component to be rendered
- Install and setup BabelJS to compile the React code
- December 6, 2016
- Add README.md
- Add a GitHub Issue to hold usable images
- Add LICENSE
- December 5, 2016
- Create a GitHub repository and full site files for easier management
- Setup Grunt.js to compile my Sass into CSS
- Begin blogging about the process
- December 4, 2016
- Countdown clock (JS Date class & jQuery Easing) with SVGs
- Dynamic text output for Year based on the current date
- CSS only slider (off by 5px each slide)
- December 3, 2016
- CSS bow & ribbon
- Footer with FontAwesome presents
- Hover, active, and “Christmas Day” styles for footer presents
- December 2, 2016
- React.js + Axios.js initial code structure
- Color palette
- CSS → Sass
- December 1, 2016
- Let it snow
- Typography choices
- CSS presents (first design)
- Design notes menu