This is just a quick post to show some typescript code that implements a React canvas component. It’s a bit opionated in that I am using an Rx stream for the image data being displayed. It’s a stateless/dumb component that displays low level image data. Hit me up in the comments if you have any questions.

I am really liking React so far. In this post I am going to describe 4 different styles of creating components in React. If you have any interest in starting with React, I highly recommend the courses by Corey House on Pluralsight. They are amazing. Maybe the best Pluralsight author I have seen. The courses are amazingly thorough. He walks the student through creating the development environment all the way to production deployment. The styles I am describing below, I learned from his courses.

First off, every object in JavaScript has a prototype object attached to it. Objects inherit properties and methods from their prototype. Prototypes also allow you to extend (i.e. Monkey Patch) existing objects. Prototypes work kind of like extension methods in C# in that they attach functionality to all objects created of the specific type. Whenever you create a new object in Javascript an empty prototype object is automatically created and linked to the new object. The difference between a base class and a prototype is that a single prototype object serves all instances of the object. This is important because you can accidently change a value on all objects if you are not careful and misuse the prototype.

A note before starting. use strict prevents a lot of syntax errors that normally would be accepted and helps prevent bonehead errors. Use it!

Today I launched my blog. I used Jekyll and Github pages and it was pretty easy. Here are a few links that were really helpful in getting started.

Hi, I’m Phil.