Reusable State and Effects with React Hooks

This week my latest Egghead.io course was launched entitled, Reusable State and Effects with React Hooks.

Previously, in order to add state or side-effects in React you had to create a Class Component. However, with the introduction of the Hooks proposal (currently pre-released), you can now add state and effects to a Function Component. In addition, you can extract your hook logic and create a custom hook that can be shared across your app.

Course Introduction

🆓 The Reusable State and Effects with React Hooks course is currently free to watch until Sunday December 16th. So, watch today!

Learn about the npx Package Runner

Last week my latest Egghead.io course was launched entitled, Execute npm Package Binaries with the npx Package Runner.

npx is a tool that comes baked in npm (if you have version 5.2 or above), that you may or may not know about. It’s a handy little utility that enables you to play around with node packages in a way that wasn’t really easy before.

I find myself using npx all the time. It’s a tool I use most days.

🆓 The course is currently free to watch until Thursday November 15th. So, watch today!

What's New in Create React App 2.0 Video Series

Earlier this month Create React App 2.0 was released adding a lot of new features. Some of those features include Sass Support, CSS Modules Support, Adding SVGs as React Components, Fragment Short Syntax, and Babel Macros. In this post, I’ll be highlighting the above 5 features. For a complete list of all the features of Create React App 2.0 please check out the official post on the React Blog.

Create a project using the `npm init initializer` command

Historically, the npm init command was soley used to create a new package.json file. However, as of version 6.1.0, you can use a new feature of npm init called the <initializer>. The initializer you provide will determine how your new appilcation will be built. npm will prepend create- to the name of the initialier you provide and use npx to temporarily install and execute that project.

Highlight, Scroll, & Zoom Code Snippets in mdx-deck with Code Surfer <🏄/>

A new React <CodeSurfer /> Component was release by Rodrigo Pombo (@pomber) making it easy to hightlight, scroll, and zoom code snippets in a mdx-deck slide presentation. mdx-deck is a great project, written by Brent Jackson (@jxnblk), that allows you to create a MDX-based (Markdown and JSX) slide presentations.