Coding an Advent Calendar: Day 8

This year, I decided to create an Advent Calendar website in HTML5, CSS3, and JavaScript. My hopes for the site are to showcase some of my frontend development abilities as well as make something fun, functional, and reusable.

Day 8

Use React and Babel via CDN
Since yesterday I was unable to get React and Babel fully working on my stand-alone localhost site, I decided to take a step backward today and try to get a clearer understanding of what was required to do so. Therefore, I started watching:

Learn React.js: The Basics on Lynda.com

I decided to take a slow, step-by-step approach to learning React from the ground up, which meant one of the first steps I did was load in React and Babel via CDN:

  • React: https://unpkg.com/react@15/dist/react.js
  • ReactDOM: https://unpkg.com/react-dom@15/dist/react-dom.js
  • Babel: https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.min.js (the author states that Babel 6.0 and above won’t work as in-browser compilers)

This allowed me to at least start getting my site to render without JavaScript syntax errors.

Install React developer Tools for Chrome
After loading React and Babel, I also found it helpful to install the 2 React developer tools to Chrome that Eve Porcello mentioned on the Lynda videos:

  1. React Detector: detects whether a website is using React or not, and lights up bright blue if so (install it, and then visit AirBnB to see it working)
  2. React Developer Tools: adds an additional tab labeled “React” to the F12 Chrome Developer Tools and allows you to view React Components and debug things in the browser


I found both of these to be very helpful tools.

Create very basic React.js pages  
Finally, as I began working through the Lynda.com videos, I thought about how I might apply the concepts to my own Advent Calendar project.

I also created a public Gist on GitHub to house my work.

Then, I started testing the various iterations of my project (still needs more testing) in a separate standalone HTML file in my localhost. The screenshot above is a result of this work.

I can see there is still a lot to learn about React, but so far it’s been quite interesting. It’s very speedy, incredibly versatile, and the syntax is pretty straightforward. I’ll continue on this journey tomorrow.


Work Completed (to date)

  • December 8, 2016
    • Use React and Babel via CDN to get it working “locally”
    • Install React developer Tools for Chrome
    • Create very basic React.js pages to learn it
  • 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

Quick Tip: Use Chrome’s Emulator Tool for Better Development

Google Chrome has a pretty nifty emulator tool that enables better website development by emulating the different devices that you would want to test your websites on.

A few keys points about the emulator that makes it unique and much better for development than merely stretching your browser window to various sizes:

  1. Chrome’s minimum browser width (400px) is still wider than the smallest device size (320px iPhone 3/4)
  2. Using the emulator tool also changes the user agent variable in Chrome so that it thinks and acts as if it were the actual device it is emulating
  3. The emulator shows a grid and rulers with pixel dimensions behind the device window

How to use the Chrome Emulator?

  1. Open the Element Inspector (right-click “Inspect Element”)
  2. Click on the mobile device icon in the upper-left corner of the Element Inspector (see screenshot)
  3. Select the device you wish to emulate from the dropdown menu at the top (see screenshot)
  4. Tip: Refresh the page for proper user agent spoofing and viewport rendering
google-chrome-inspector-element-device-mode
1. Open the Element Inspector and click the mobile device icon
google-chrome-inspector-element-device-mode-activated
2. Select the device you wish to emulate from the dropdown menu