Add sandbox links through floating components

01-scaffolding/my-app/README.md

@@ -21,6 +21,7 @@ The blog post suggests some simple edits to see this in action.
 
 For a quick start, you can edit `my-app/src/App.js` and comment out one of the two import lines: `logo.svg` or `logo2.svg`.
 
+[![Edit my-app](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/01-scaffolding/my-app)
 
 # Create React App README
 

02-instantiation/my-app/README.md

@@ -15,6 +15,7 @@ $ npm start
 
 A browser window will automatically open and will load the app.
 
+[![Edit my-app](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/02-instantiation/my-app)
 
 # Create React App README
 

03-defining-classes/a-functional-basic/README.md

@@ -15,6 +15,7 @@ $ npm start
 
 A browser window will automatically open and will load the app.
 
+[![Edit functinal-basic](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/03-defining-classes/a-functional-basic)
 
 # Create React App README
 

03-defining-classes/b-functional-property/README.md

@@ -17,6 +17,7 @@ $ npm start
 
 A browser window will automatically open and will load the app.  `MyContainer` is instantiated by the `App` component exported from `my-app/src/App.js`.  Both the default and the customized `MyComponent` instance are displayed in the browser.
 
+[![Edit functional-property](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/03-defining-classes/b-functional-property)
 
 # Create React App README
 

03-defining-classes/c-class-instances/README.md

@@ -15,6 +15,7 @@ $ npm start
 
 A browser window will automatically open and will load the app.  `MyComponent` is instantiated by the `App` component exported from `my-app/src/App.js`.  Click the button to see the input field text update.
 
+[![Edit c-class-instances](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/03-defining-classes/c-class-instances)
 
 # Create React App README
 

03-defining-classes/d-refs/README.md

@@ -15,6 +15,7 @@ $ npm start
 
 A browser window will automatically open and will load the app.  `MyComponent` is instantiated by the `App` component exported from `my-app/src/App.js`.  Click the button to highlight the input field's text.
 
+[![Edit d-refs](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/03-defining-classes/d-refs)
 
 # Create React App README
 

04-static-and-config-members/a-static-members/README.md

@@ -19,6 +19,7 @@ $ npm start
 
 A browser window will automatically open and will load the app.  `Foo` is instantiated by the `App` component exported from `my-app/src/App.js`.  You can uncomment `hasErrors = true;` in the `MyError.fromAjax` to return a `MyError` instance to `Foo` to be handled in the `fetch.then.catch` handler.
 
+[![Edit a-static-members](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/04-static-and-config-members/a-static-members)
 
 # Create React App README
 

04-static-and-config-members/b-configs/README.md

@@ -15,6 +15,7 @@ $ npm start
 
 A browser window will automatically open and will load the app.  In `src/App.js` an instance of `Foo` is created and its `foo` property is retrieved and logged. The value is then updated using `instance.foo = 'foobar';` and its value then logged.
 
+[![Edit b-configs](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/04-static-and-config-members/b-configs)
 
 # Create React App README
 

05-mixins/a-floatingbox/README.md

@@ -19,6 +19,7 @@ $ npm start
 
 A browser window will automatically open and will load the app.  In the browser you'll see a simple box element positioned absolutely using CSS applied via the `float` method shared to `Box` by `withFloat`.
 
+[![Edit a-floatingbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/05-mixins/a-floatingbox)
 
 # Create React App README
 

05-mixins/b-simple-decorators/README.md

@@ -15,6 +15,7 @@ $ npm start
 
 A browser window will automatically open and will load the app.  When the application launches from `src/App.js` the `App` component is decorated with the `withMasking` HOC with the syntax `@withMasking`.  Once mounted, `App` mocks a remote load call which masks `App` for 3 seconds and then unmasks (simulating the end of an asynchronous data fetch).
 
+[![Edit b-simple-decorators](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/05-mixins/b-simple-decorators)
 
 # Create React App README
 

05-mixins/c-maskable-example/README.md

@@ -15,6 +15,7 @@ $ npm start
 
 A browser window will automatically open and will load the app.  When the application launches from `src/App.js` the `App` component creates a `Mask` which returns a `NetworkView` instance from its render prop function.  Once mounted, `NetworkView` mocks a remote load call which masks itself for 3 seconds and then unmasks (simulating the end of an asynchronous data fetch).
 
+[![Edit c-maskable-example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/05-mixins/c-maskable-example)
 
 # Create React App README
 

06-templating/a-simple-templating/README.md

@@ -15,6 +15,7 @@ $ npm start
 
 A browser window will automatically open and will load the app.
 
+[![Edit a-simple-templating](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/06-templating/a-simple-templating)
 
 # Create React App README
 

06-templating/b-advanced-templating/README.md

@@ -15,6 +15,7 @@ $ npm start
 
 A browser window will automatically open and will load the app.
 
+[![Edit b-advanced-templating](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/06-templating/b-advanced-templating)
 
 # Create React App README
 

07-list/a-basic-list/README.md

@@ -15,6 +15,7 @@ $ npm start
 
 A browser window will automatically open and will load the app.
 
+[![Edit a-basic-list](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/07-list/a-basic-list)
 
 # Create React App README
 

07-list/b-selectable-list/README.md

@@ -15,6 +15,7 @@ $ npm start
 
 A browser window will automatically open and will load the app.  Click a list item to select it. Shift-click another item to select multiple list items. When a selection occurs, the selection event and number of selected items is logged to the console.
 
+[![Edit b-selectable-list](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/07-list/b-selectable-list)
 
 # Create React App README
 

07-list/c-list-tools/README.md

@@ -19,6 +19,7 @@ A browser window will automatically open and will load the app.  Click a list it
 
 `Tool`s can have click handlers that can prevent the selection of their host row.  Click on the archive icons to see the `ListItem` selected.  Click on an arrow to see the event handled by the tool and not propagated up to the `ListItem`.
 
+[![Edit c-list-tools](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/07-list/c-list-tools)
 
 # Create React App README
 

08-basic-grid/a-basic-grid/README.md

@@ -15,6 +15,7 @@ $ npm start
 
 A browser window will automatically open and will load the app.
 
+[![Edit a-basic-grid](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/08-basic-grid/a-basic-grid)
 
 # Create React App README
 

08-basic-grid/b-basic-grid-sorting/README.md

@@ -15,6 +15,7 @@ $ npm start
 
 A browser window will automatically open and will load the app.  Click a header to sort the rows using that column's data.  Click the same column again to toggle the sorting between ascending and descending.
 
+[![Edit b-basic-grid-sorting](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/08-basic-grid/b-basic-grid-sorting)
 
 # Create React App README
 

09-selection-model/a-single-row-selection-model/README.md

@@ -15,6 +15,7 @@ $ npm start
 
 A browser window will automatically open and will load the app.  Click between grid rows to see the row selection model in action.
 
+[![Edit c-single-row-selection-model](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/09-selection-model/a-single-row-selection-model)
 
 # Create React App README
 

09-selection-model/b-multiple-row-selection-model/README.md

@@ -15,6 +15,7 @@ $ npm start
 
 A browser window will automatically open and will load the app.  Click between grid rows to see the row selection model in action.
 
+[![Edit d-multiple-row-selection-model](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/09-selection-model/b-multiple-row-selection-model)
 
 # Create React App README
 

09-selection-model/c-checkbox-selection-model/README.md

@@ -15,6 +15,7 @@ $ npm start
 
 A browser window will automatically open and will load the app.  Click the checkboxes in the rows and column header to see the row selection model in action.
 
+[![Edit e-checkbox-selection-model](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/09-selection-model/c-checkbox-selection-model)
 
 # Create React App README
 

10-grid-features/a-controlling-cell-data/README.md

@@ -15,6 +15,7 @@ $ npm start
 
 A browser window will automatically open and will load the app.
 
+[![Edit a-controlling-cell-data](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/10-grid-features/a-controlling-cell-data)
 
 # Create React App README
 

10-grid-features/b-column-locking/README.md

@@ -15,6 +15,7 @@ $ npm start
 
 A browser window will automatically open and will load the app.  Scroll to the right to see the name grid locked in position.
 
+[![Edit b-column-locking](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/10-grid-features/b-column-locking)
 
 # Create React App README
 

10-grid-features/c-cell-editing/README.md

@@ -15,6 +15,7 @@ $ npm start
 
 A browser window will automatically open and will load the app.  Double-click on a cell in the "name" column to see the editor in action.
 
+[![Edit c-cell-editing](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/10-grid-features/c-cell-editing)
 
 # Create React App README
 

10-grid-features/d-custom-editor/README.md

@@ -15,6 +15,7 @@ $ npm start
 
 A browser window will automatically open and will load the app.  Double-click on a cell in the "name" column to see the standard editor in action.  Double-click a cell in the "email" column to show the custom editor field.
 
+[![Edit d-custom-editor](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/10-grid-features/d-custom-editor)
 
 # Create React App README
 

10-grid-features/e-infinite-scrolling/README.md

@@ -15,6 +15,7 @@ $ npm start
 
 A browser window will automatically open and will load the app.  Scroll to the bottom of the grid's scrollable area to see an additional dataset loaded to the grid.
 
+[![Edit e-infinite-scrolling](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/10-grid-features/e-infinite-scrolling)
 
 # Create React App README
 

11-tree/a-basic-tree/README.md

@@ -17,6 +17,7 @@ $ npm start
 
 A browser window will automatically open and will load the app.  
 
+[![Edit a-basic-tree](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/11-tree/a-basic-tree)
 
 # Create React App README
 

11-tree/b-advanced-tree/README.md

@@ -19,6 +19,7 @@ $ npm start
 
 A browser window will automatically open and will load the app.  Double-click a cell in the tree column to show the editor text field.  Scroll the view to the right to see the first column locked in place.
 
+[![Edit b-advanced-tree](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/11-tree/b-advanced-tree)
 
 # Create React App README
 

12-form-fields/a-input/README.md

@@ -15,6 +15,7 @@ $ npm start
 
 A browser window will automatically open and will load the app.
 
+[![Edit a-input](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/12-form-fields/a-input)
 
 # Create React App README
 

12-form-fields/b-textarea/README.md

@@ -15,6 +15,7 @@ $ npm start
 
 A browser window will automatically open and will load the app.
 
+[![Edit b-textarea](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/12-form-fields/b-textarea)
 
 # Create React App README
 

12-form-fields/c-select/README.md

@@ -15,6 +15,7 @@ $ npm start
 
 A browser window will automatically open and will load the app.
 
+[![Edit c-select](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/12-form-fields/c-select)
 
 # Create React App README
 

12-form-fields/d-combo/README.md

@@ -15,6 +15,7 @@ $ npm start
 
 A browser window will automatically open and will load the app.
 
+[![Edit d-combo](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/12-form-fields/d-combo)
 
 # Create React App README
 

12-form-fields/e-range-slider/README.md

@@ -15,6 +15,7 @@ $ npm start
 
 A browser window will automatically open and will load the app.
 
+[![Edit e-range-slider](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/12-form-fields/e-range-slider)
 
 # Create React App README
 

12-form-fields/f-datefield/README.md

@@ -15,6 +15,7 @@ $ npm start
 
 A browser window will automatically open and will load the app.
 
+[![Edit f-datefield](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/12-form-fields/f-datefield)
 
 # Create React App README
 

12-form-fields/g-number-spinner/README.md

@@ -15,6 +15,7 @@ $ npm start
 
 A browser window will automatically open and will load the app.
 
+[![Edit g-number-spinner](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/12-form-fields/g-number-spinner)
 
 # Create React App README
 

12-form-fields/h-radio/README.md

@@ -15,6 +15,7 @@ $ npm start
 
 A browser window will automatically open and will load the app.
 
+[![Edit h-radio](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/12-form-fields/h-radio)
 
 # Create React App README
 

12-form-fields/i-checkbox/README.md

@@ -15,6 +15,7 @@ $ npm start
 
 A browser window will automatically open and will load the app.
 
+[![Edit i-checkbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/12-form-fields/i-checkbox)
 
 # Create React App README
 

12-form-fields/j-toggle/README.md

@@ -15,6 +15,7 @@ $ npm start
 
 A browser window will automatically open and will load the app.
 
+[![Edit j-toggle](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/12-form-fields/j-toggle)
 
 # Create React App README
 

13-form-validation/a-validation/README.md

@@ -21,6 +21,7 @@ $ npm start
 
 A browser window will automatically open and will load the app.  Enter a value in the "required text field" and then delete it to show the field's validation message relating to being a required field.  Type `21` into the "number field (20 max)" to show its validation message of "Value must be less than or equal to 20."
 
+[![Edit a-validation](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/13-form-validation/a-validation)
 
 # Create React App README
 

14-form-submission/a-login-form/README.md

@@ -15,6 +15,7 @@ $ npm start
 
 A browser window will automatically open and will load the app.  Inspect the notes on the `handleSubmit` method in `src/App.js` for more information on how the form data could be submitted to a remote server.
 
+[![Edit a-login-form](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/14-form-submission/a-login-form)
 
 # Create React App README
 

15-layouts/a-fit-layout/README.md

@@ -17,6 +17,7 @@ $ npm start
 
 A browser window will automatically open and will load the app.
 
+[![Edit a-fit-layout](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/15-layouts/a-fit-layout)
 
 # Create React App README
 

15-layouts/b-card-layout/README.md

@@ -17,6 +17,7 @@ $ npm start
 
 A browser window will automatically open and will load the app.  Change the `activeCard` prop to `1` in `src/index.js` to show the second of the two child components.
 
+[![Edit b-card-layout](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/15-layouts/b-card-layout)
 
 # Create React App README
 

15-layouts/c-hbox-layout/README.md

@@ -17,6 +17,7 @@ $ npm start
 
 A browser window will automatically open and will load the app.
 
+[![Edit c-hbox-layout](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/15-layouts/c-hbox-layout)
 
 # Create React App README
 

15-layouts/d-vbox-layout/README.md

@@ -17,6 +17,7 @@ $ npm start
 
 A browser window will automatically open and will load the app.
 
+[![Edit d-vbox-layout](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/15-layouts/d-vbox-layout)
 
 # Create React App README
 

15-layouts/f-accordion-layout/README.md

@@ -17,6 +17,7 @@ $ npm start
 
 A browser window will automatically open and will load the app.
 
+[![Edit f-accordion-layout](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/15-layouts/f-accordion-layout)
 
 # Create React App README
 

16-buttons/README.md

@@ -6,8 +6,8 @@ The following examples show how you can create the same features associated with
 
  - [a-simple-button](./a-simple-button): a simple React button
  - [b-button-icon](./b-button-icon): render an icon font within a button
- - [c-advanced-button](./c-advanced button): button component with a floating menu using the [Semantic UI](https://www.npmjs.com/package/semantic-ui-react) library
- - [d-segmented-button](./d-segmented button): sample segmented button
+ - [c-advanced-button](./c-advanced-button): button component with a floating menu using the [Semantic UI](https://www.npmjs.com/package/semantic-ui-react) library
+ - [d-segmented-button](./d-segmented-button): sample segmented button
 
 ### Related Blog Article
 

16-buttons/a-simple-button/README.md

@@ -15,6 +15,7 @@ $ npm start
 
 A browser window will automatically open and will load the app.  Click the button to see the handling of the user interaction logged to the console.
 
+[![Edit a-simple-button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/16-buttons/a-simple-button)
 
 # Create React App README
 

16-buttons/b-button-icon/README.md

@@ -15,6 +15,7 @@ $ npm start
 
 A browser window will automatically open and will load the app.  Click the button to see the handling of the user interaction logged to the console.
 
+[![Edit b-button-icon](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/16-buttons/b-button-icon)
 
 # Create React App README
 

16-buttons/c-advanced-button/README.md

@@ -15,6 +15,7 @@ $ npm start
 
 A browser window will automatically open and will load the app.  Click the button to show its menu.  Click on each menu item to see the handling of the user interaction logged to the console.
 
+[![Edit c-advanced-button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/16-buttons/c-advanced-button)
 
 # Create React App README