adding a h2 line and comments

react/components/CustomButton.tsx

@@ -4,7 +4,12 @@ import Table from './Table'
 
 import { OrderFormItem } from '../typings/orderForm'
 
-class CustomButton extends Component<CustomButtonProps> {
+class CustomButton extends Component<CustomButtonProps, CustomButtonState> {
+  /**
+   * This component is responsible for rendering the custom button itself. For instance,
+   * we use it to render a table that contains the name of the items that are in the
+   * order form.
+  */
   constructor(props: any) {
     super(props)
   }
@@ -13,6 +18,7 @@ class CustomButton extends Component<CustomButtonProps> {
 
     return items ? (
       <div>
+        <h2>This is a checkout button</h2>
         <Table items={items} />
       </div>
     ) : (
@@ -25,4 +31,6 @@ interface CustomButtonProps {
   items: OrderFormItem[]
 }
 
+interface CustomButtonState {}
+
 export default CustomButton

react/index.tsx

@@ -1,11 +1,18 @@
 import React, { Component } from 'react'
+
 import CustomButton from './components/CustomButton'
 import { OrderForm } from './typings/orderForm'
 
 class CheckoutButtonExample extends Component<
   CheckoutButtonExampleProps,
   CheckoutButtonExampleState
 > {
+  /**
+   * This component is the one that is referenced in the extension point. To use it
+   * as an example, in the component's life cycle, the method componentDidMount is used to
+   * add an event listener, which updates the state every time the order form changes. This
+   * order form is then passed to its children so as to render a table with the items.
+  */
   constructor(props: any) {
     super(props)
     this.state = {