Update Code Guidelines (#308)

* Update readme

* Update README.md

* Remove conditional handlers section

* Update code blocks to ts

README.md

@@ -165,7 +165,7 @@ export * from './actionTypes';
 #### Typing Injected Props
 Props made available through higher order components can be tricky to type. Normally, if a component requires a prop, you add it to the component's interface and it just works. However, working with injected props from [higher order components](https://medium.com/@franleplant/react-higher-order-components-in-depth-cf9032ee6c3e), you will be forced to supply all required props whenever you compose the component.  
 
-```
+```ts
 interface MyComponentProps {
   name: string;
   countryCode?: string;
@@ -188,7 +188,7 @@ class OtherComponent extends React.Component<{}, {}> {
 
 Instead of tacking the injected props on to the MyComponentProps interface itself, put them on another interface that extends the main interface:
 
-```
+```ts
 interface MyComponentProps {
   name: string;
   countryCode?: string;
@@ -201,7 +201,7 @@ interface InjectedProps extends MyComponentProps {
 
 Now you can add a [getter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get) to the component to derive the injected props from the props object at runtime:
 
-```
+```ts
 class MyComponent extends React.Component<MyComponentProps, {}> {
   get injected() {
     return this.props as InjectedProps;
@@ -217,6 +217,25 @@ class MyComponent extends React.Component<MyComponentProps, {}> {
 
 All the injected props are now strongly typed, while staying private to the module, and not polluting the public props interface.
 
+## Event Handlers
+
+Event handlers such as `onChange` and `onClick`, should be properly typed. For example, if you have an event listener on an input element inside a form:
+```ts
+public onValueChange = (e: React.FormEvent<HTMLInputElement>) => {
+    if (this.props.onChange) {
+      this.props.onChange(
+        e.currentTarget.value,
+        this.props.unit
+      );
+    }
+  };
+```
+Where you type the event as a `React.FormEvent` of type `HTML<TYPE>Element`. 
+
+## Class names
+
+Dynamic class names should use the `classnames` module to simplify how they are created instead of using string template literals with expressions inside. 
+
 ### Styling
 
 Legacy styles are housed under `common/assets/styles` and written with LESS.