Tag: ReactJS

Coding an Advent Calendar: Day 9 (5 React Configurations)

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 9

create-react-app
Yesterday I was having some trouble with my React code functioning properly with the in-browser Babel compilation. Notably, I kept running into this error:

which clearly isn’t very helpful for debugging my code.

For one thing, sometimes the error message seemed to point to an empty line! I’d read on StackOverflow (somewhere) that perhaps that indicated the error was actually in the line ABOVE it, but it wasn’t. And I still couldn’t find where there was a problem no matter how much I looked, nor how many times I rewrote the code.

Finally I decided enough was enough and I was going to have to include Babel and all the other dependencies inside my project to compile everything there, rather than continuing to import Babel via CDN and try to compile in the browser. I figured if nothing else, at least I’d get some better error messages with code that was pre-compiled before being loaded by the browser.

So, on the suggestion of the Lynda.com video series I’ve been watching, I decided to create a totally NEW folder and install create-react-app via npm to help out.

npm install -g create-react-app
create-react-app advent-calendar
cd advent-calendar
npm start

Fortunately, after installing it and running the npm start process to watch and compile my files, I was immediately greeted with a MUCH more helpful big, bold, and beautiful (descriptive) full-screen error message:

This allowed me to properly diagnose my problems, debug the code, and get everything running smoothly. At first.

React Storybook
Actually, the FOUR setups I tried are very different:

  1. React + Axios in a Codepen
    1. Incredibly painless as all the configuration is provided by Codepen
    2. Easy to get started due to the number and quality of samples available
    3. Only requires linking to some scripts (react.js and axios.js) and enabling Babel as your JS preprocessor
    4. DOESN’T actually teach you a lot about how to set these technologies up and use them in a real-world project
  2. React + Babel + Grunt
    1. It requires a complete manual setup (installing everything you want via npm)
    2. More difficult for a first attempt to get everything configured properly
    3. But allows more precise control over exactly what you include in the project
  3. React and Babel via CDN
    1. It’s as simple as copying in a few URLs as <link> tags
    2. Easy to get started, but provides horrible error messages that are little help
    3. Requires NO node modules nor unique file/folder structure – you could build everything out as a regular static page (index.html, style.css, and React scripts before the closing <body> tag)
  4. React with create-react-app and webpack
    1. Super easy installation and process to get things up and running via npm (see code snippet above)
    2. Much more helpful error messages (like the one in black above) that can help you easily diagnose and fix problems with your code
    3. Includes TONS of node modules – many of which you may never need
    4. Requires its own file/folder structure that may be confusing at first (all your .css files and React components are abstracted out into a /src folder that will be compiled into .css and .js files with a hash string appended to the end like a version number (app.d587bbd6e38337f5accd.js) and put in the /public folder when you do npm run build to get it ready for deployment)
    5. Requires digging deeper into more technologies you may or may not have ever heard of before. For example, for me, I’ve only now ever HEARD of:
      1. webpack
      2. flux
      3. redux
      4. storybook

I haven’t even visited the websites for webpack, flux, or redux yet, but storybook instantly had me interested because of what it allows you to do: “Developing Components in Isolation.” I knew immediately that this was something I’d want to try – since I have multiple Components I will be developing:

  • First of all, Test Components to help learn React better
  • Secondly, a Gift Component for my CSS gift shapes
  • Also, a Post Component for blog posts loaded with the WP REST API
  • Possibly also other Christmas Components – like a Santa, or tree, or reindeer

So, I set about the work of figuring out how to get Storybook up and running (for my 5th React setup). A few things I noticed about Storybook:

  1. React + Storybook
    1. create-react-app uses npm start to run a server though port :3000
    2. Storybook defaults to run a server through either port :9001 or :9009
    3. Adding static .css or .js files can be a pain because of the configuration and how Storybook compiles things. There are really only two ways to do it:
      1. Add Custom <head> tags
      2. Serve static files via imports or a directory
      3. I ended up just using the CSS @import rule to load my Google Fonts
    4. Storybook was designed to develop Components in isolation – and it’s really a great way to perfect individual parts before putting them all together again in the main App
    5. Adding in additional Stories is pretty straightforward once you get through the configuration
Update npm and node and figure out git  
One of my biggest issues throughout developing this project has been that I have two completely different setups to work with throughout the day:

  1. At work: Windows 7
  2. At home: MacOS

That means that no matter where I go, for half the day at least, my configuration is going to be totally different. So, whenever I spend a few hours in one location learning how to setup and configure some part of my setup, I must then (at least partially) repeat that process in the other location later that day. It can be a little monotonous, but honestly the repetition is probably really good for my learning (that, and blogging about it).

Three things that seem like they may be larger “speed bumps” than they probably should be are: npm, node, and git

  1. At work: after installing create-react-app and the various other parts I needed, I kept noticing that the Command Line was prompting me with warnings about my (outdated) versions of npm and node. I didn’t really think much of it, but noticed that the installation of those modules took significant time (I ate lunch during the process)
  2. At home: When I came home later in the evening, I started getting the same errors, but again thought nothing of it – until my Mac froze up (it happens sometimes when I have a bunch of programs and Chrome tabs open and I haven’t shut down in a month…) So, after restarting the Mac, I decided to immediately update npm and node and WOW! what a difference that made! The installation of create-react-app and the Node modules FLEW compared to earlier. Below is the series of (Mac) commands I used in the Terminal to update them:
npm install npm@latest -g
sudo npm cache clean -f
sudo npm install -g n
sudo n stable

Finally, git. At first, I was worried that with the two different setups on the two different systems that git would prove to be problematic. I was worried that I might have to either memorize the differences in files and setup between Windows and Mac, or create two separate package.json and other relevant files.

However, after looking over the config files from both my Windows and Mac setups (I set up two completely different folders with the files from each system), I no longer think that’s the case. They look nearly identical and a few minor version number changes in the dependencies won’t really matter (down a version number).

So… Day 9 was a LONG day (which is why this blog post is long – and why I’m “technically” publishing it on Day 10), but it was a good day – not entirely productive in code, but very helpful in my learning more about React and how to work with it.

Today, I’m planning to finish React.js: The Basics on Lynda.com, create some new Components, possibly add in Sass (again) to my create-react-app project, and possibly add some interactivity to my Christmas Gift Component. Stay tuned!~

Work Completed (to date)

  • December 9, 2016
    • Learn and use Create-React-App
    • Learn and use Storybook for developing React Components in isolation
    • Update npm and node and figure out my git process between Windows and Mac
  • 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

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

Coding an Advent Calendar: Day 7 (REST API + ReactJS)

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 7

WordPress 4.7 “Vaughan”

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:

  1. Revisit Day 2 where I set up the basic infrastructure for ReactJS & REST
  2. Update to WordPress 4.7 – where REST endpoints will work immediately (cool)
  3. Install Postman for Chrome* to test calls to the REST API
  4. Configure the REST URL (I have mine pull from THIS Category)
  5. Add it to the Codepen
  6. 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.

BabelJS  
Finally, after setting everything up and Saving the Codepen, I noticed a small error in my JavaScript console in Chrome: "Unexpected token <". That’s weird, I thought. But then I noticed that the color highlighting in the Codepen was incorrect after a certain point – and the posts from React weren’t displaying quite properly. I checked back at the other Codepens I’d referenced that were using React to load JSON data and noticed that many were using the Babel JavaScript preprocessor. I thought, what the heck, added it to my project and *BAM!* the magic truly DID begin! Smooth loading of posts on the Codepen directly from this blog!

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:

  1. Run npm install --save-dev babel-cli babel-preset-latest babel-preset-react grunt-babel to install all the necessary development dependencies
  2. Run npm install --save react react-dom to save the necessary project dependencies
  3. Update package.json to recognize babel (rather than creating a .babelrc file)
  4. Update Gruntfile.js to “watch” for changes to my React app’s JS file and run the compile task
  5. Separate out my React Component code from the functions.js file to better manage the two separately
  6. 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!~

References

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:

  1. Official React site: A JavaScript Library for Building User Interfaces
  2. Writing React components as CommonJS modules
  3. NPM: A RequireJS plugin for loading jsx in require.js and r.js
  4. The React.js Way: Getting Started Tutorial
  5. 9 things every React.js beginner should know
  6. ES6 with Babel.JS
  7. Get To Know Babel The JavaScript Compiler Tutorial
  8. Setting up an ES6 Project Using Babel and Browserify
  9. Babel + Grunt === ES6 Now!
  10. 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