From d452426068d16bfbb85d82cf4292b7f250d8628a Mon Sep 17 00:00:00 2001 From: Seth Lemmons Date: Fri, 30 Mar 2018 16:27:06 -0600 Subject: [PATCH 1/2] Add sandbox links through floating components --- 01-scaffolding/my-app/README.md | 1 + 02-instantiation/my-app/README.md | 1 + 03-defining-classes/a-functional-basic/README.md | 1 + 03-defining-classes/b-functional-property/README.md | 1 + 03-defining-classes/c-class-instances/README.md | 1 + 03-defining-classes/d-refs/README.md | 1 + 04-static-and-config-members/a-static-members/README.md | 1 + 04-static-and-config-members/b-configs/README.md | 1 + 05-mixins/a-floatingbox/README.md | 1 + 05-mixins/b-simple-decorators/README.md | 1 + 05-mixins/c-maskable-example/README.md | 1 + 06-templating/a-simple-templating/README.md | 1 + 06-templating/b-advanced-templating/README.md | 1 + 07-list/a-basic-list/README.md | 1 + 07-list/b-selectable-list/README.md | 1 + 07-list/c-list-tools/README.md | 1 + 08-basic-grid/a-basic-grid/README.md | 1 + 08-basic-grid/b-basic-grid-sorting/README.md | 1 + 09-selection-model/a-single-row-selection-model/README.md | 1 + 09-selection-model/b-multiple-row-selection-model/README.md | 1 + 09-selection-model/c-checkbox-selection-model/README.md | 1 + 10-grid-features/a-controlling-cell-data/README.md | 1 + 10-grid-features/b-column-locking/README.md | 1 + 10-grid-features/c-cell-editing/README.md | 1 + 10-grid-features/d-custom-editor/README.md | 1 + 10-grid-features/e-infinite-scrolling/README.md | 1 + 11-tree/a-basic-tree/README.md | 1 + 11-tree/b-advanced-tree/README.md | 1 + 12-form-fields/a-input/README.md | 1 + 12-form-fields/b-textarea/README.md | 1 + 12-form-fields/c-select/README.md | 1 + 12-form-fields/d-combo/README.md | 1 + 12-form-fields/e-range-slider/README.md | 1 + 12-form-fields/f-datefield/README.md | 1 + 12-form-fields/g-number-spinner/README.md | 1 + 12-form-fields/h-radio/README.md | 1 + 12-form-fields/i-checkbox/README.md | 1 + 12-form-fields/j-toggle/README.md | 1 + 13-form-validation/a-validation/README.md | 1 + 14-form-submission/a-login-form/README.md | 1 + 15-layouts/a-fit-layout/README.md | 1 + 15-layouts/b-card-layout/README.md | 1 + 15-layouts/c-hbox-layout/README.md | 1 + 15-layouts/d-vbox-layout/README.md | 1 + 15-layouts/f-accordion-layout/README.md | 1 + 16-buttons/README.md | 4 ++-- 16-buttons/a-simple-button/README.md | 1 + 16-buttons/b-button-icon/README.md | 1 + 16-buttons/c-advanced-button/README.md | 1 + 16-buttons/d-segmented-button/README.md | 1 + 17-toolbar/a-toolbar-layout/README.md | 1 + 17-toolbar/b-toolbar-layout-vertical/README.md | 1 + 17-toolbar/c-docked-toolbar/README.md | 1 + 17-toolbar/d-docked-toolbar-vertical/README.md | 1 + 18-panel/a-panel/README.md | 1 + 19-tabpanel/a-tabpanel/README.md | 1 + 20-carousel/a-carousel/README.md | 1 + 21-floating-components/a-ad-hoc-menus/README.md | 2 ++ 21-floating-components/b-tooltips/README.md | 1 + 21-floating-components/c-modal/README.md | 1 + 60 files changed, 62 insertions(+), 2 deletions(-) diff --git a/01-scaffolding/my-app/README.md b/01-scaffolding/my-app/README.md index 595087d..746158f 100644 --- a/01-scaffolding/my-app/README.md +++ b/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 diff --git a/02-instantiation/my-app/README.md b/02-instantiation/my-app/README.md index 8e66044..b7763d1 100644 --- a/02-instantiation/my-app/README.md +++ b/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 diff --git a/03-defining-classes/a-functional-basic/README.md b/03-defining-classes/a-functional-basic/README.md index 76963c7..80a6884 100644 --- a/03-defining-classes/a-functional-basic/README.md +++ b/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 diff --git a/03-defining-classes/b-functional-property/README.md b/03-defining-classes/b-functional-property/README.md index 5bf8009..e16be46 100644 --- a/03-defining-classes/b-functional-property/README.md +++ b/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 diff --git a/03-defining-classes/c-class-instances/README.md b/03-defining-classes/c-class-instances/README.md index 27d027b..1872701 100644 --- a/03-defining-classes/c-class-instances/README.md +++ b/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 diff --git a/03-defining-classes/d-refs/README.md b/03-defining-classes/d-refs/README.md index 94c87d4..4f3c9ee 100644 --- a/03-defining-classes/d-refs/README.md +++ b/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 diff --git a/04-static-and-config-members/a-static-members/README.md b/04-static-and-config-members/a-static-members/README.md index c6235fa..c77f7c4 100644 --- a/04-static-and-config-members/a-static-members/README.md +++ b/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 diff --git a/04-static-and-config-members/b-configs/README.md b/04-static-and-config-members/b-configs/README.md index 9a9fa44..d750be5 100644 --- a/04-static-and-config-members/b-configs/README.md +++ b/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 diff --git a/05-mixins/a-floatingbox/README.md b/05-mixins/a-floatingbox/README.md index b387a92..831e817 100644 --- a/05-mixins/a-floatingbox/README.md +++ b/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 diff --git a/05-mixins/b-simple-decorators/README.md b/05-mixins/b-simple-decorators/README.md index dc079f4..1d2e436 100644 --- a/05-mixins/b-simple-decorators/README.md +++ b/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 diff --git a/05-mixins/c-maskable-example/README.md b/05-mixins/c-maskable-example/README.md index 631377e..3084df5 100644 --- a/05-mixins/c-maskable-example/README.md +++ b/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 diff --git a/06-templating/a-simple-templating/README.md b/06-templating/a-simple-templating/README.md index 682ec5f..4f936e0 100644 --- a/06-templating/a-simple-templating/README.md +++ b/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 diff --git a/06-templating/b-advanced-templating/README.md b/06-templating/b-advanced-templating/README.md index 856e598..ec616d5 100644 --- a/06-templating/b-advanced-templating/README.md +++ b/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 diff --git a/07-list/a-basic-list/README.md b/07-list/a-basic-list/README.md index 851df26..02ef613 100644 --- a/07-list/a-basic-list/README.md +++ b/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 diff --git a/07-list/b-selectable-list/README.md b/07-list/b-selectable-list/README.md index 630d69e..deb78e0 100644 --- a/07-list/b-selectable-list/README.md +++ b/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 diff --git a/07-list/c-list-tools/README.md b/07-list/c-list-tools/README.md index c42d8c7..64d5ecf 100644 --- a/07-list/c-list-tools/README.md +++ b/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 diff --git a/08-basic-grid/a-basic-grid/README.md b/08-basic-grid/a-basic-grid/README.md index d132f51..4efa225 100644 --- a/08-basic-grid/a-basic-grid/README.md +++ b/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 diff --git a/08-basic-grid/b-basic-grid-sorting/README.md b/08-basic-grid/b-basic-grid-sorting/README.md index 0a8af1b..b2980bd 100644 --- a/08-basic-grid/b-basic-grid-sorting/README.md +++ b/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 diff --git a/09-selection-model/a-single-row-selection-model/README.md b/09-selection-model/a-single-row-selection-model/README.md index 6ea6205..3067c53 100644 --- a/09-selection-model/a-single-row-selection-model/README.md +++ b/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 diff --git a/09-selection-model/b-multiple-row-selection-model/README.md b/09-selection-model/b-multiple-row-selection-model/README.md index 564e143..bddea39 100644 --- a/09-selection-model/b-multiple-row-selection-model/README.md +++ b/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 diff --git a/09-selection-model/c-checkbox-selection-model/README.md b/09-selection-model/c-checkbox-selection-model/README.md index d7e62eb..56ed9d2 100644 --- a/09-selection-model/c-checkbox-selection-model/README.md +++ b/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 diff --git a/10-grid-features/a-controlling-cell-data/README.md b/10-grid-features/a-controlling-cell-data/README.md index 40e913f..783f324 100644 --- a/10-grid-features/a-controlling-cell-data/README.md +++ b/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 diff --git a/10-grid-features/b-column-locking/README.md b/10-grid-features/b-column-locking/README.md index 69d684a..0016470 100644 --- a/10-grid-features/b-column-locking/README.md +++ b/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 diff --git a/10-grid-features/c-cell-editing/README.md b/10-grid-features/c-cell-editing/README.md index b77e7f4..1e2b2bd 100644 --- a/10-grid-features/c-cell-editing/README.md +++ b/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 diff --git a/10-grid-features/d-custom-editor/README.md b/10-grid-features/d-custom-editor/README.md index 5714ffc..679e8e0 100644 --- a/10-grid-features/d-custom-editor/README.md +++ b/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 diff --git a/10-grid-features/e-infinite-scrolling/README.md b/10-grid-features/e-infinite-scrolling/README.md index 1ae3c08..b6399e5 100644 --- a/10-grid-features/e-infinite-scrolling/README.md +++ b/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 diff --git a/11-tree/a-basic-tree/README.md b/11-tree/a-basic-tree/README.md index bca8451..b6327f3 100644 --- a/11-tree/a-basic-tree/README.md +++ b/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 diff --git a/11-tree/b-advanced-tree/README.md b/11-tree/b-advanced-tree/README.md index 3f385e9..6d55e8b 100644 --- a/11-tree/b-advanced-tree/README.md +++ b/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 diff --git a/12-form-fields/a-input/README.md b/12-form-fields/a-input/README.md index 8885c92..a774696 100644 --- a/12-form-fields/a-input/README.md +++ b/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 diff --git a/12-form-fields/b-textarea/README.md b/12-form-fields/b-textarea/README.md index 7d38936..b4b7568 100644 --- a/12-form-fields/b-textarea/README.md +++ b/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 diff --git a/12-form-fields/c-select/README.md b/12-form-fields/c-select/README.md index 6ebcf2f..0c681e6 100644 --- a/12-form-fields/c-select/README.md +++ b/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 diff --git a/12-form-fields/d-combo/README.md b/12-form-fields/d-combo/README.md index 36fd07b..f91d12d 100644 --- a/12-form-fields/d-combo/README.md +++ b/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 diff --git a/12-form-fields/e-range-slider/README.md b/12-form-fields/e-range-slider/README.md index 6baebeb..c7ba0d5 100644 --- a/12-form-fields/e-range-slider/README.md +++ b/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 diff --git a/12-form-fields/f-datefield/README.md b/12-form-fields/f-datefield/README.md index 1762611..7ceae8e 100644 --- a/12-form-fields/f-datefield/README.md +++ b/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 diff --git a/12-form-fields/g-number-spinner/README.md b/12-form-fields/g-number-spinner/README.md index 9f8b123..ada98ba 100644 --- a/12-form-fields/g-number-spinner/README.md +++ b/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 diff --git a/12-form-fields/h-radio/README.md b/12-form-fields/h-radio/README.md index 8ad2ed4..d67316f 100644 --- a/12-form-fields/h-radio/README.md +++ b/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 diff --git a/12-form-fields/i-checkbox/README.md b/12-form-fields/i-checkbox/README.md index b03fdb1..e44b62c 100644 --- a/12-form-fields/i-checkbox/README.md +++ b/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 diff --git a/12-form-fields/j-toggle/README.md b/12-form-fields/j-toggle/README.md index 080e9e4..bca302b 100644 --- a/12-form-fields/j-toggle/README.md +++ b/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 diff --git a/13-form-validation/a-validation/README.md b/13-form-validation/a-validation/README.md index b512bff..e65656e 100644 --- a/13-form-validation/a-validation/README.md +++ b/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 diff --git a/14-form-submission/a-login-form/README.md b/14-form-submission/a-login-form/README.md index e1d1a89..f8c7add 100644 --- a/14-form-submission/a-login-form/README.md +++ b/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 diff --git a/15-layouts/a-fit-layout/README.md b/15-layouts/a-fit-layout/README.md index fe32d3d..4bedd02 100644 --- a/15-layouts/a-fit-layout/README.md +++ b/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 diff --git a/15-layouts/b-card-layout/README.md b/15-layouts/b-card-layout/README.md index ffd54a7..fe529f8 100644 --- a/15-layouts/b-card-layout/README.md +++ b/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 diff --git a/15-layouts/c-hbox-layout/README.md b/15-layouts/c-hbox-layout/README.md index 8787ee7..b9690bd 100644 --- a/15-layouts/c-hbox-layout/README.md +++ b/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 diff --git a/15-layouts/d-vbox-layout/README.md b/15-layouts/d-vbox-layout/README.md index fddf493..a2eef53 100644 --- a/15-layouts/d-vbox-layout/README.md +++ b/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 diff --git a/15-layouts/f-accordion-layout/README.md b/15-layouts/f-accordion-layout/README.md index 0dcbe94..faa5795 100644 --- a/15-layouts/f-accordion-layout/README.md +++ b/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 diff --git a/16-buttons/README.md b/16-buttons/README.md index 6ffcbbd..f78629c 100644 --- a/16-buttons/README.md +++ b/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 diff --git a/16-buttons/a-simple-button/README.md b/16-buttons/a-simple-button/README.md index 28ac9e5..45fc434 100644 --- a/16-buttons/a-simple-button/README.md +++ b/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 diff --git a/16-buttons/b-button-icon/README.md b/16-buttons/b-button-icon/README.md index df12449..82dbc1c 100644 --- a/16-buttons/b-button-icon/README.md +++ b/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 diff --git a/16-buttons/c-advanced-button/README.md b/16-buttons/c-advanced-button/README.md index 2f6885f..a1ae104 100644 --- a/16-buttons/c-advanced-button/README.md +++ b/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 diff --git a/16-buttons/d-segmented-button/README.md b/16-buttons/d-segmented-button/README.md index c2ae9d6..a66585b 100644 --- a/16-buttons/d-segmented-button/README.md +++ b/16-buttons/d-segmented-button/README.md @@ -15,6 +15,7 @@ $ npm start A browser window will automatically open and will load the app. Click the child button elements to toggle their 'pressed' state. +[![Edit c-segmented-button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/16-buttons/d-segmented-button) # Create React App README diff --git a/17-toolbar/a-toolbar-layout/README.md b/17-toolbar/a-toolbar-layout/README.md index c5d8a2d..1485070 100644 --- a/17-toolbar/a-toolbar-layout/README.md +++ b/17-toolbar/a-toolbar-layout/README.md @@ -15,6 +15,7 @@ $ npm start A browser window will automatically open and will load the app. +[![Edit a-toolbar-layout](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/17-toolbar/a-toolbar-layout) # Create React App README diff --git a/17-toolbar/b-toolbar-layout-vertical/README.md b/17-toolbar/b-toolbar-layout-vertical/README.md index dda99b4..0808219 100644 --- a/17-toolbar/b-toolbar-layout-vertical/README.md +++ b/17-toolbar/b-toolbar-layout-vertical/README.md @@ -15,6 +15,7 @@ $ npm start A browser window will automatically open and will load the app. +[![Edit b-toolbar-layout-vertical](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/17-toolbar/b-toolbar-layout-vertical) # Create React App README diff --git a/17-toolbar/c-docked-toolbar/README.md b/17-toolbar/c-docked-toolbar/README.md index 14a747f..f518e24 100644 --- a/17-toolbar/c-docked-toolbar/README.md +++ b/17-toolbar/c-docked-toolbar/README.md @@ -15,6 +15,7 @@ $ npm start A browser window will automatically open and will load the app. +[![Edit c-docked-toolbar](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/17-toolbar/c-docked-toolbar) # Create React App README diff --git a/17-toolbar/d-docked-toolbar-vertical/README.md b/17-toolbar/d-docked-toolbar-vertical/README.md index a919943..d2ba59a 100644 --- a/17-toolbar/d-docked-toolbar-vertical/README.md +++ b/17-toolbar/d-docked-toolbar-vertical/README.md @@ -16,6 +16,7 @@ $ npm start A browser window will automatically open and will load the app. +[![Edit d-docked-toolbar-vertical](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/17-toolbar/d-docked-toolbar-vertical) # Create React App README diff --git a/18-panel/a-panel/README.md b/18-panel/a-panel/README.md index 5430b66..32d70b8 100644 --- a/18-panel/a-panel/README.md +++ b/18-panel/a-panel/README.md @@ -15,6 +15,7 @@ $ npm start A browser window will automatically open and will load the app. Click the arrow icon in the header to toggle the collapse state of the panel. Click the React tool icon to see the user interaction logged in the console. +[![Edit a-panel](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/18-panel/a-panel) # Create React App README diff --git a/19-tabpanel/a-tabpanel/README.md b/19-tabpanel/a-tabpanel/README.md index b833dd6..856ab38 100644 --- a/19-tabpanel/a-tabpanel/README.md +++ b/19-tabpanel/a-tabpanel/README.md @@ -17,6 +17,7 @@ $ npm start A browser window will automatically open and will load the app. +[![Edit a-tabpanel](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/19-tabpanel/a-tabpanel) # Create React App README diff --git a/20-carousel/a-carousel/README.md b/20-carousel/a-carousel/README.md index d2430b8..2e1dc6c 100644 --- a/20-carousel/a-carousel/README.md +++ b/20-carousel/a-carousel/README.md @@ -17,6 +17,7 @@ $ npm start A browser window will automatically open and will load the app. Click on the indictor dots or swipe left or right to change the active card in the `Carousel`. +[![Edit a-carousel](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/20-carousel/a-carousel) # Create React App README diff --git a/21-floating-components/a-ad-hoc-menus/README.md b/21-floating-components/a-ad-hoc-menus/README.md index a74bc03..1512338 100644 --- a/21-floating-components/a-ad-hoc-menus/README.md +++ b/21-floating-components/a-ad-hoc-menus/README.md @@ -15,6 +15,8 @@ $ npm start A browser window will automatically open and will load the app. Right-click within the parent div to show the `Menu` at the location where the event occurred. +[![Edit a-ad-hoc-menus](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/21-floating-components/a-ad-hoc-menus) + # Create React App README diff --git a/21-floating-components/b-tooltips/README.md b/21-floating-components/b-tooltips/README.md index 27085a4..a8d87f7 100644 --- a/21-floating-components/b-tooltips/README.md +++ b/21-floating-components/b-tooltips/README.md @@ -17,6 +17,7 @@ $ npm start A browser window will automatically open and will load the app. Hover your cursor over word "MOON" to see the `Tooltip` in action. +[![Edit b-tooltips](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/21-floating-components/b-tooltips) # Create React App README diff --git a/21-floating-components/c-modal/README.md b/21-floating-components/c-modal/README.md index 2b7cb7f..72f238c 100644 --- a/21-floating-components/c-modal/README.md +++ b/21-floating-components/c-modal/README.md @@ -16,6 +16,7 @@ $ npm start A browser window will automatically open and will load the app. Click on the "Show Floating" button to show the modal `Floating` component rendered to the `document.body`. +[![Edit c-modal](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/21-floating-components/c-modal) # Create React App README From a08c0cf6bad20bd91f17bfa64b9e003b3265e74a Mon Sep 17 00:00:00 2001 From: Seth Lemmons Date: Fri, 30 Mar 2018 23:45:28 -0600 Subject: [PATCH 2/2] Link codesandbox for remaining examples --- 22-react-binding/a-simple-binding/README.md | 3 ++- 22-react-binding/b-tell-parent/README.md | 1 + 23-redux-state/a-application-state-redux/README.md | 1 + 23-redux-state/a-application-state-redux/src/App.test.js | 9 --------- 24-mobx-state/a-application-state-mobx/README.md | 1 + 25-react-data/README.md | 2 +- 25-react-data/a-remote-loading/README.md | 1 + 25-react-data/b-sorting/README.md | 1 + 25-react-data/c-filtering/README.md | 1 + 26-redux-data/a-sync-to-async/README.md | 1 + 26-redux-data/a-sync-to-async/src/App.test.js | 9 --------- 27-mobx-data/README.md | 2 +- 27-mobx-data/a-sync-to-async/README.md | 1 + 28-charting/a-column-chart/README.md | 1 + 28-charting/b-bar-chart/README.md | 1 + 28-charting/c-stacked-chart/README.md | 1 + 28-charting/d-line-chart/README.md | 1 + 28-charting/e-area-chart/README.md | 1 + 28-charting/f-scatter-chart/README.md | 1 + 28-charting/g-combined-series-chart/README.md | 1 + 28-charting/h-pie-chart/README.md | 1 + 28-charting/i-radar-chart/README.md | 1 + 29-routing/README.md | 2 +- 29-routing/a-simple-route/README.md | 1 + 29-routing/b-nested-route/README.md | 1 + 29-routing/c-programmatic-navigation/README.md | 1 + 29-routing/d-simple-link-navigation/README.md | 1 + 29-routing/e-tabbed-link-navigation/README.md | 1 + 30-application-styling/a-css-modules/README.md | 1 + 31-drag-and-drop/a-drag-and-drop/README.md | 1 + 30 files changed, 29 insertions(+), 22 deletions(-) diff --git a/22-react-binding/a-simple-binding/README.md b/22-react-binding/a-simple-binding/README.md index abf95fc..30d86cf 100644 --- a/22-react-binding/a-simple-binding/README.md +++ b/22-react-binding/a-simple-binding/README.md @@ -15,8 +15,9 @@ $ npm install $ npm start ``` -A browser window will automatically open and will load the app. +A browser window will automatically open and will load the app. +[![Edit a-simple-binding](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/22-react-binding/a-simple-binding) # Create React App README diff --git a/22-react-binding/b-tell-parent/README.md b/22-react-binding/b-tell-parent/README.md index e0b1afb..ce97fc1 100644 --- a/22-react-binding/b-tell-parent/README.md +++ b/22-react-binding/b-tell-parent/README.md @@ -19,6 +19,7 @@ $ npm start A browser window will automatically open and will load the app. Type in the form fields to see the user interaction logged to the console using the `onChange` handler function in the `App` component at `src/App.js`. +[![Edit b-tell-parent](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/22-react-binding/b-tell-parent) # Create React App README diff --git a/23-redux-state/a-application-state-redux/README.md b/23-redux-state/a-application-state-redux/README.md index baba932..a81cf5d 100644 --- a/23-redux-state/a-application-state-redux/README.md +++ b/23-redux-state/a-application-state-redux/README.md @@ -15,6 +15,7 @@ $ npm start A browser window will automatically open and will load the app. +[![Edit a-application-state-redux](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/23-redux-state/a-application-state-redux) # Create React App README diff --git a/23-redux-state/a-application-state-redux/src/App.test.js b/23-redux-state/a-application-state-redux/src/App.test.js index a754b20..e69de29 100644 --- a/23-redux-state/a-application-state-redux/src/App.test.js +++ b/23-redux-state/a-application-state-redux/src/App.test.js @@ -1,9 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import App from './App'; - -it('renders without crashing', () => { - const div = document.createElement('div'); - ReactDOM.render(, div); - ReactDOM.unmountComponentAtNode(div); -}); diff --git a/24-mobx-state/a-application-state-mobx/README.md b/24-mobx-state/a-application-state-mobx/README.md index 49e0108..a5d3b6b 100644 --- a/24-mobx-state/a-application-state-mobx/README.md +++ b/24-mobx-state/a-application-state-mobx/README.md @@ -15,6 +15,7 @@ $ npm start A browser window will automatically open and will load the app. +[![Edit a-application-state-mobx](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/24-mobx-state/a-application-state-mobx) # Create React App README diff --git a/25-react-data/README.md b/25-react-data/README.md index 4142406..59fea95 100644 --- a/25-react-data/README.md +++ b/25-react-data/README.md @@ -1,4 +1,4 @@ -# 24 Ext JS to React: Load, Sort and Filter Data with React +# 25 Ext JS to React: Load, Sort and Filter Data with React The following examples show how to fetch remote data as well as sort or filter it for consumption by an application diff --git a/25-react-data/a-remote-loading/README.md b/25-react-data/a-remote-loading/README.md index 46528c4..4e9ba45 100644 --- a/25-react-data/a-remote-loading/README.md +++ b/25-react-data/a-remote-loading/README.md @@ -17,6 +17,7 @@ $ npm start A browser window will automatically open and will load the app. +[![Edit a-remote-loading](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/25-react-data/a-remote-loading) # Create React App README diff --git a/25-react-data/b-sorting/README.md b/25-react-data/b-sorting/README.md index a1c77cc..914fce9 100644 --- a/25-react-data/b-sorting/README.md +++ b/25-react-data/b-sorting/README.md @@ -17,6 +17,7 @@ $ npm start A browser window will automatically open and will load the app. +[![Edit b-sorting](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/25-react-data/b-sorting) # Create React App README diff --git a/25-react-data/c-filtering/README.md b/25-react-data/c-filtering/README.md index de356c8..5f7536b 100644 --- a/25-react-data/c-filtering/README.md +++ b/25-react-data/c-filtering/README.md @@ -17,6 +17,7 @@ $ npm start A browser window will automatically open and will load the app. +[![Edit c-filtering](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/25-react-data/c-filtering) # Create React App README diff --git a/26-redux-data/a-sync-to-async/README.md b/26-redux-data/a-sync-to-async/README.md index 6b7b125..bc8d13a 100644 --- a/26-redux-data/a-sync-to-async/README.md +++ b/26-redux-data/a-sync-to-async/README.md @@ -15,6 +15,7 @@ $ npm start A browser window will automatically open and will load the app. +[![Edit a-sync-to-async](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/26-redux-data/a-sync-to-async) # Create React App README diff --git a/26-redux-data/a-sync-to-async/src/App.test.js b/26-redux-data/a-sync-to-async/src/App.test.js index a754b20..e69de29 100644 --- a/26-redux-data/a-sync-to-async/src/App.test.js +++ b/26-redux-data/a-sync-to-async/src/App.test.js @@ -1,9 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import App from './App'; - -it('renders without crashing', () => { - const div = document.createElement('div'); - ReactDOM.render(, div); - ReactDOM.unmountComponentAtNode(div); -}); diff --git a/27-mobx-data/README.md b/27-mobx-data/README.md index d47ed46..fdfa225 100644 --- a/27-mobx-data/README.md +++ b/27-mobx-data/README.md @@ -1,4 +1,4 @@ -# 26 Ext JS to React: Handling Data with Redux +# 27 Ext JS to React: Handling Data with MobX In the following example we modify the form from [24-mobx-state](../24-mobx-state/) to load the form data from a remote source diff --git a/27-mobx-data/a-sync-to-async/README.md b/27-mobx-data/a-sync-to-async/README.md index 9991a63..b389ac5 100644 --- a/27-mobx-data/a-sync-to-async/README.md +++ b/27-mobx-data/a-sync-to-async/README.md @@ -15,6 +15,7 @@ $ npm start A browser window will automatically open and will load the app. +[![Edit a-sync-to-async](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/27-mobx-data/a-sync-to-async) # Create React App README diff --git a/28-charting/a-column-chart/README.md b/28-charting/a-column-chart/README.md index 018c1d8..3d23841 100644 --- a/28-charting/a-column-chart/README.md +++ b/28-charting/a-column-chart/README.md @@ -15,6 +15,7 @@ $ npm start A browser window will automatically open and will load the app. +[![Edit a-column-chart](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/28-charting/a-column-chart) # Create React App README diff --git a/28-charting/b-bar-chart/README.md b/28-charting/b-bar-chart/README.md index fc8c129..f6f0f1c 100644 --- a/28-charting/b-bar-chart/README.md +++ b/28-charting/b-bar-chart/README.md @@ -15,6 +15,7 @@ $ npm start A browser window will automatically open and will load the app. +[![Edit b-bar-chart](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/28-charting/b-bar-chart) # Create React App README diff --git a/28-charting/c-stacked-chart/README.md b/28-charting/c-stacked-chart/README.md index 2159dce..a05d645 100644 --- a/28-charting/c-stacked-chart/README.md +++ b/28-charting/c-stacked-chart/README.md @@ -15,6 +15,7 @@ $ npm start A browser window will automatically open and will load the app. +[![Edit c-stacked-chart](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/28-charting/c-stacked-chart) # Create React App README diff --git a/28-charting/d-line-chart/README.md b/28-charting/d-line-chart/README.md index 057ddf0..5f3b83b 100644 --- a/28-charting/d-line-chart/README.md +++ b/28-charting/d-line-chart/README.md @@ -15,6 +15,7 @@ $ npm start A browser window will automatically open and will load the app. +[![Edit d-line-chart](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/28-charting/d-line-chart) # Create React App README diff --git a/28-charting/e-area-chart/README.md b/28-charting/e-area-chart/README.md index 0834d2b..8d9bb3b 100644 --- a/28-charting/e-area-chart/README.md +++ b/28-charting/e-area-chart/README.md @@ -15,6 +15,7 @@ $ npm start A browser window will automatically open and will load the app. +[![Edit e-area-chart](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/28-charting/e-area-chart) # Create React App README diff --git a/28-charting/f-scatter-chart/README.md b/28-charting/f-scatter-chart/README.md index e1ef588..53b9308 100644 --- a/28-charting/f-scatter-chart/README.md +++ b/28-charting/f-scatter-chart/README.md @@ -15,6 +15,7 @@ $ npm start A browser window will automatically open and will load the app. +[![Edit f-scatter-chart](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/28-charting/f-scatter-chart) # Create React App README diff --git a/28-charting/g-combined-series-chart/README.md b/28-charting/g-combined-series-chart/README.md index dae0a6b..cde5efa 100644 --- a/28-charting/g-combined-series-chart/README.md +++ b/28-charting/g-combined-series-chart/README.md @@ -15,6 +15,7 @@ $ npm start A browser window will automatically open and will load the app. +[![Edit g-combined-series-chart](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/28-charting/g-combined-series-chart) # Create React App README diff --git a/28-charting/h-pie-chart/README.md b/28-charting/h-pie-chart/README.md index 76f950e..59299d3 100644 --- a/28-charting/h-pie-chart/README.md +++ b/28-charting/h-pie-chart/README.md @@ -15,6 +15,7 @@ $ npm start A browser window will automatically open and will load the app. +[![Edit h-pie-chart](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/28-charting/h-pie-chart) # Create React App README diff --git a/28-charting/i-radar-chart/README.md b/28-charting/i-radar-chart/README.md index 0d1394b..1b1d928 100644 --- a/28-charting/i-radar-chart/README.md +++ b/28-charting/i-radar-chart/README.md @@ -15,6 +15,7 @@ $ npm start A browser window will automatically open and will load the app. +[![Edit i-radar-chart](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/28-charting/i-radar-chart) # Create React App README diff --git a/29-routing/README.md b/29-routing/README.md index 788cfc9..9bfab1c 100644 --- a/29-routing/README.md +++ b/29-routing/README.md @@ -5,7 +5,7 @@ In the following examples we look at how to control the current view using route ## Example Projects - [a-simple-route](./a-simple-route): simple route configuration with two views - - [b-advanced-route](./b-advanced-route): more advanced routing example including nested routes + - [b-nested-route](./b-nested-route): more advanced routing example including nested routes - [c-programmatic-navigation](./c-programmatic-navigation): routing example using `history.push()` to programmatically control the views / route - [d-simple-link-navigation](./d-simple-link-navigation): route navigation example using `Link` components - [e-tabbed-link-navigation](./e-tabbed-link-navigation): route navigation example using `NavLink` components styled to look like tabs diff --git a/29-routing/a-simple-route/README.md b/29-routing/a-simple-route/README.md index 4055f4b..40fee4e 100644 --- a/29-routing/a-simple-route/README.md +++ b/29-routing/a-simple-route/README.md @@ -15,6 +15,7 @@ $ npm start A browser window will automatically open and will load the app. Change the URL from `http://localhost:3000/` to `http://localhost:3000/user` to see the router in action. +[![Edit a-simple-route](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/29-routing/a-simple-route) # Create React App README diff --git a/29-routing/b-nested-route/README.md b/29-routing/b-nested-route/README.md index ab3f636..a3ebb2b 100644 --- a/29-routing/b-nested-route/README.md +++ b/29-routing/b-nested-route/README.md @@ -15,6 +15,7 @@ $ npm start A browser window will automatically open and will load the app. Change the URL from `http://localhost:3000/` to `http://localhost:3000/user` to see the UI display the `User` class with a `UserList`. Change the URL to `http://localhost:3000/user/1234` to display the `UserForm`. The `UserForm` receives the passed ID of "1234" as prop which is then used in its rendered output. +[![Edit b-nested-route](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/29-routing/b-nested-route) # Create React App README diff --git a/29-routing/c-programmatic-navigation/README.md b/29-routing/c-programmatic-navigation/README.md index 7ab217d..418b470 100644 --- a/29-routing/c-programmatic-navigation/README.md +++ b/29-routing/c-programmatic-navigation/README.md @@ -15,6 +15,7 @@ $ npm start A browser window will automatically open and will load the app. Change the URL from `http://localhost:3000/` to `http://localhost:3000/user` to see the UI display the `User` class with a `UserList`. Change the URL to `http://localhost:3000/user/1234` to display the `UserForm`. The `UserForm` receives the passed ID of "1234" as prop which is then used in its rendered output. In this example the `UserForm` has a directive in its render method that says if the user id passed in is "1234" then programmatically change the URL (history) to be "abcd" instead. +[![Edit c-programmatic-navigation](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/29-routing/c-programmatic-navigation) # Create React App README diff --git a/29-routing/d-simple-link-navigation/README.md b/29-routing/d-simple-link-navigation/README.md index 5ca42b7..81b0731 100644 --- a/29-routing/d-simple-link-navigation/README.md +++ b/29-routing/d-simple-link-navigation/README.md @@ -15,6 +15,7 @@ $ npm start A browser window will automatically open and will load the app. Click between the Home, User, and About links to see the `Link` components in action. +[![Edit d-simple-link-navigation](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/29-routing/d-simple-link-navigation) # Create React App README diff --git a/29-routing/e-tabbed-link-navigation/README.md b/29-routing/e-tabbed-link-navigation/README.md index 7ffb77d..f6ddafe 100644 --- a/29-routing/e-tabbed-link-navigation/README.md +++ b/29-routing/e-tabbed-link-navigation/README.md @@ -15,6 +15,7 @@ $ npm start A browser window will automatically open and will load the app. Click between the Home, User, and About links to see the `Link` components in action. +[![Edit e-tabbed-link-navigation](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/29-routing/e-tabbed-link-navigation) # Create React App README diff --git a/30-application-styling/a-css-modules/README.md b/30-application-styling/a-css-modules/README.md index 637ecaa..2526560 100644 --- a/30-application-styling/a-css-modules/README.md +++ b/30-application-styling/a-css-modules/README.md @@ -16,6 +16,7 @@ $ npm start A browser window will automatically open and will load the app. + # Create React App README This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app). diff --git a/31-drag-and-drop/a-drag-and-drop/README.md b/31-drag-and-drop/a-drag-and-drop/README.md index 3860fba..e26e002 100644 --- a/31-drag-and-drop/a-drag-and-drop/README.md +++ b/31-drag-and-drop/a-drag-and-drop/README.md @@ -15,6 +15,7 @@ $ npm start A browser window will automatically open and will load the app. Drag the list items around to reorder them within their container. When a list item is dragged into a valid position within its container the container will be highlighted. If the drop operation is successful, the list item will be re-ordered within the container. If it is not successful, the item will snap back to its initial position. +[![Edit a-drag-and-drop](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ModusCreateOrg/extjs-reactjs-examples/tree/master/31-drag-and-drop/a-drag-and-drop) # Create React App README