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.
- React:
- 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:
- 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)
- 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
