Added project folder READMEs

removed unused project

Author: Seth Lemmons

01-scaffolding/README.md

@@ -1,24 +1,17 @@
-# 01 Scaffolding
+# 01 Ext JS to React: Scaffolding
 
-This subdirectory contains an app already generated with create-react-app, as
-described in the Scaffolding blog post (link here)
+This directory contains an example of a sample React application generated by
+[create-react-app](https://www.npmjs.com/package/create-react-app) as described
+in the
+[Scaffolding blog post](https://moduscreate.com/blog/ext-js-to-react-scaffolding/).
 
-Make sure you have yarn installed.
+Create-react-app is a great way to spin up a starter application with React and
+will be used extensively in this repo.
 
-To run the app server:
+## Example Projects
 
-```
-$ cd my-app
-$ yarn start
-```
+ - [my-app](./my-app): sample starter app created by create-react-app
 
-A browser window will automatically open and will load the app.
-
-As you make edits to the sources in the my-app/ directory, the browser will
-automatically refresh to reflect your changes.
-
-The blog post suggetss 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, for logo.svg OR logo2.svg.
+### Related Blog Article
 
+[Ext JS to React: Scaffolding](https://moduscreate.com/blog/ext-js-to-react-scaffolding/)

01-scaffolding/my-app/README.md

@@ -1,5 +1,38 @@
 This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).
 
+# my-app
+
+This directory contains an example of a sample React application generated by
+[create-react-app](https://www.npmjs.com/package/create-react-app) as described
+in the
+[Scaffolding blog post](https://moduscreate.com/blog/ext-js-to-react-scaffolding/).
+
+This project contains a simple modification to demonstrate how to edit files
+within the starter app and see the changes update in the browser real-time (when
+following the steps outlined in the [Scaffolding blog article](https://moduscreate.com/blog/ext-js-to-react-scaffolding/)).
+
+*Make sure you have npm installed.*
+
+To run the app server:
+
+```
+$ npm install
+$ npm start
+```
+
+A browser window will automatically open and will load the app.
+
+As you make edits to the sources in the my-app/ directory, the browser will
+automatically refresh to reflect your changes.
+
+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, for logo.svg OR logo2.svg.
+
+
+# Create React App README
+
 Below you will find some information on how to perform common tasks.<br>
 You can find the most recent version of this guide [here](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md).
 

01-scaffolding/my-app/src/App.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 
-//import logo from './logo.svg';
+// import logo from './logo.svg';
+// replace the original logo from the generated app with one we'll supply
 import logo from './logo2.svg';
 import './App.css';
 

02-instantiation/README.md

@@ -1,8 +1,15 @@
-# 02 Instantiation
+# 02 Ext JS to React: Class Instantiation and Code Style
 
-This subdirectory contains an app already generated with create-react-app, as
-described in the Instantiation blog post (link here).  The source code has been
-modified to include the examples in the blog post so you can see it in action.
+React components can be created a couple of different ways.  The
+[my-app](./my-app) example project demonstrates how React components may be
+instantiated.
 
-See my-app/src/App.js
+## Example Projects
+
+ - [my-app](./my-app): sample app demonstrating how React components are
+ instantiated
+
+### Related Blog Article
+
+[Ext JS to React: Class Instantiation and Code Style](https://moduscreate.com/blog/extjs-react-class-instantiation-code-style/)
 

02-instantiation/my-app/README.md

@@ -1,3 +1,28 @@
+# my-app
+
+This directory contains an example of a sample React application generated by
+[create-react-app](https://www.npmjs.com/package/create-react-app) as described
+in the
+[Scaffolding blog post](https://moduscreate.com/blog/ext-js-to-react-scaffolding/).
+
+This project contains an example `MyHeader` component which is instantiated
+within the `MyComponent` class.  The `MyComponent` is then instantiated by the
+`App` component exported from [src/App.js](./src/App.js).
+
+*Make sure you have npm installed.*
+
+To run the app server:
+
+```
+$ npm install
+$ 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).
 
 Below you will find some information on how to perform common tasks.<br>

02-instantiation/my-app/src/App.js

@@ -8,6 +8,8 @@ const MyHeader = ({ text }) => {
   )
 }
 
+// A MyClass instance is created when MyComponent is created since MyComponent
+// includes a MyHeader node in the returned JSX
 const MyComponent = () => {
   return (
     <div>
@@ -19,6 +21,7 @@ const MyComponent = () => {
   )
 }
 
+// An instance of MyComponent is returned by the application's main view: App
 class App extends Component {
   render() {
     return (

03-defining-classes/README.md

@@ -1,13 +1,21 @@
-# 03 Defining Classes
+# 03 Ext JS to React: Defining Classes
 
-This subdirectory contains apps already generated with create-react-app, as
-described in the Instantiation blog post (link here).  The source code has been
-modified to include the examples in the blog post so you can see it in action.
+This directory contains apps already generated with [create-react-app](https://www.npmjs.com/package/create-react-app), as described in the
+[Instantiation blog post](https://moduscreate.com/blog/extjs-react-class-instantiation-code-style/).  The
+source code has been modified to include the examples in the blog post so you
+can see it in action.
 
-For each of the following examples, cd into the directory and run ```npm
-install``` followeed by ```npm run```
+## Defining Example Projects
 
-* a-functional-basic - simplest example, importing a single functional component
-* b-functional-property - simple example, importing a single functional component that takes a prop
-* c-class-instances - referencing class instances example, component declared as a proper JavaScript class.
-* d-refs - referencing child components
+ - [a-functional-basic](./a-functional-basic): a simple, functional React
+ component
+ - [b-functional-property](./b-functional-property): a functional component with
+ a single prop
+ - [c-class-instances](./c-class-instances): a single component extending
+ React.Component is defined including its own state and event handler
+ - [d-refs](./d-refs): how to create references to elements within a React
+ component
+
+### Related Blog Article
+
+[Ext JS to React: Defining Classes](https://moduscreate.com/blog/ext-js-react-defining-classes/)

03-defining-classes/a-functional-basic/src/MyComponent.js

@@ -1,5 +1,7 @@
 import React from 'react';
 
+// MyComponent is defined as a functional React component (one that is defined
+// as a function, rather than a class extending React.Component)
 const MyComponent = () => {
   return (
     <div>Hello from Modus!</div>

03-defining-classes/b-functional-property/src/App.js

@@ -2,4 +2,5 @@ import React from 'react';
 import MyContainer from './MyContainer'
 import './App.css';
 
+// The main view of the application simply returns an instance of MyContainer
 export default () => <MyContainer />;

03-defining-classes/b-functional-property/src/MyComponent.js

@@ -1,5 +1,8 @@
 import React from 'react';
 
+// MyComponent is defined as a functional React component (one that is defined
+// as a function, rather than a class extending React.Component).  The component
+// accepts a single prop of `text` with a default value of "Hello from Modus"
 const MyComponent = ({ text = 'Hello from Modus!' }) => {
   return (
     <div>{text}</div>

03-defining-classes/b-functional-property/src/MyContainer.js

@@ -1,6 +1,9 @@
 import React from 'react';
 import MyComponent from './MyComponent';
 
+// MyContainer instantiates two MyComponents
+// - the first with a default text value
+// - the second with a value passed in using MyComponent's 'text' attribute
 const MyContainer = () => {
   return (
     <div>

03-defining-classes/c-class-instances/src/MyComponent.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 
 class MyComponent extends Component {
+  // sets the initial value of `text` on the component's state object
   state = {
     text: 'Hello from Modus!'
   }
@@ -10,12 +11,15 @@ class MyComponent extends Component {
 
     return (
       <div>
+        {/* the input's value comes from the component's state.text */}
         <input defaultValue={text} />
         <button onClick={this.onBtnClick}>Set Text</button>
       </div>
     )
   }
 
+  // setting `text` on the component state results in render running once more
+  // and updating the value of the input field
   onBtnClick = () => {
     this.setState({
       text: 'Text changed!'

03-defining-classes/d-refs/src/MyComponent.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 
 class MyComponent extends Component {
+  // sets the initial value of `text` on the component's state object
   state = {
     text: 'Hello from Modus!'
   }
@@ -10,6 +11,7 @@ class MyComponent extends Component {
 
     return (
       <div>
+        {/* the input's value comes from the component's state.text */}
         <input
           defaultValue={text}
           ref={ input => this.textInput = input }

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

@@ -1,15 +1,16 @@
-# 04 Static and Config Members
+# 04 Ext JS to React: Static and Config Members
 
+The following examples show how to define components with static class members
+as well as pass configuration options
 
-This subdirectory contains apps already generated with create-react-app, as
-described in the Static and Config Members blog post (link here).  The source code has been
-modified to include the examples in the blog post so you can see it in action.
+## Example Projects
 
-For each of the following examples, cd into the directory and run ```npm
-install``` followeed by ```npm run```
+ - [a-static-members](./a-static-members): static class methods can be defined
+ for use in a React app
+ - [b-configs](./b-configs): recreate the set / get methods for a component
+ property in React similar to what the Ext JS class system does for options
+ defined in a `config` block in an Ext JS defined class
 
-See src/App.js in each of the example directories.
-
-* a-static-members - simple example illustrating static members (examine the error object thrown via Chrome developer tools)
-* b-configs - simple example illustrating static members (examine output in Chrome developer tools)
+### Related Blog Article
 
+[Ext JS to React: Static and Config Members](https://moduscreate.com/blog/ext-js-react-static-config-members/)

05-mixins/README.md

@@ -1,14 +1,18 @@
-# 05 Mixins
+# 05 Ext JS to React: Mixins
 
+The following examples demonstrate techniques used to share common code within a
+React application similar to how you would use `mixins` in an Ext JS application
 
-This subdirectory contains apps already generated with create-react-app, as
-described in the Mixinsblog post (link here).  The source code has been
-modified to include the examples in the blog post so you can see it in action.
+## Example Projects
 
-For each of the following examples, cd into the directory and run ```npm
-install``` followeed by ```npm run```
+ - [a-floatingbox](./a-floatingbox): simple example illustrating the HOC patter
+ to enable other components to assume a floated position within the viewport
+ - [b-simple-decorators](./b-simple-decorators): simple example illustrating
+ class decorator syntax for use with the HOC pattern used to share code
+ - [c-maskable-example](./c-maskable-example): the render prop pattern for 
+ shared code is used to mask the elements of the component composed within a
+ `Mask` component
 
-* a-floatingbox - simple example illustrating hoc for floating box (see src/box.js and src/App.css)
-* b-configs - simple example illustrating decorators (this has been ejected and configured so decorators work)
-* c-maskable-example -  example illustrating hoc to add maksable to a component (this has been ejected and configured so decorators work)
+### Related Blog Article
 
+[Ext JS to React: Mixins](https://moduscreate.com/blog/ext-js-react-mixins/)

06-templating/README.md

@@ -1,16 +1,18 @@
-# 06 Templating
+# 06 Ext JS to React: Templating
 
+In these examples we explore how to create templated classes similar to what you
+would do when creating HTML templates using Ext JS XTemplate
 
-This subdirectory contains apps already generated with create-react-app, as
-described in the "Temolating" and "Advanced Templating" blog posts (link here).  
-The source code has been modified to include the examples in the blog post so 
-you can see it in action.
+## Example Projects
 
-For each of the following examples, cd into the directory and run ```npm
-install``` followeed by ```npm run```
+ - [a-simple-templating](./a-simple-templating): simple React component whose
+ content is fed from a data object using templating syntax
+ - [b-advanced-templating](./b-advanced-templating): a somewhat more advanced 
+ templating example that uses a class method owned by the component rendering
+ the template.  This is similar to using member functions in Ext JS templates.
 
-See src/App.js in each of the example directories.
+### Related Blog Articles
 
-* a-simple-templating- example illustrating simple templating in React
-* b-advanced-templating - example illustrating advanced templating
+[Ext JS to React: Simple Templating](https://moduscreate.com/blog/ext-js-react-simple-templating/)
 
+[Ext JS to React: Advanced Templating](https://moduscreate.com/blog/ext-js-react-advanced-templating/)

07-list/README.md

@@ -1,14 +1,16 @@
-# 07 Lists
+# 07 Ext JS to React: List
 
-This subdirectory contains apps already generated with create-react-app, as
-described in the "List" blog post (link here).  The source code has been
-modified to include the examples in the blog post so you can see it in action.
+The Ext JS list component, including selectable rows and icon buttons, is
+recreated as a React component in the following examples
 
-For each of the following examples, cd into the directory and run ```npm
-install``` followeed by ```npm run```
+## Example Projects
 
-See src/App.js in each of the example directories.
+ - [a-basic-list](./a-basic-list): simple list component
+ - [b-selectable-list](./b-selectable-list): simple list with an included
+ selection model
+ - [c-list-tools](./c-list-tools): list component with configurable icon font
+ buttons embedded in the list item
 
-* a-basic-List- example illustrating basic List component in React
-* b-advanced-templating - example illustrating advanced templating
+### Related Blog Article
 
+[Ext JS to React: List](https://moduscreate.com/blog/ext-js-react-list/)

08-basic-grid/README.md

@@ -1,13 +1,15 @@
-# 08 Basic Grid
+# 08 Ext JS to React: Basic Grid
 
-This subdirectory contains apps already generated with create-react-app, as
-described in the "Grid" blog post (link here).  The source code has been
-modified to include the examples in the blog post so you can see it in action.
+The Ext JS grid component, including sorting the records by clicking on a column
+header, is recreated as a React component in the following examples
 
-For each of the following examples, cd into the directory and run ```npm
-install``` followeed by ```npm run```
+## Example Projects
 
-See src/App.js in each of the example directories.
+ - [a-basic-grid](./a-basic-grid): simple grid component populated by a data
+ object
+ - [b-basic-grid-sorting](./b-basic-grid-sorting): simple grid component with
+ record sorting driven by user interaction with the column headers
 
-* a-basic-grid- example illustrating basic Grid component in React
+### Related Blog Article
 
+[Ext JS to React: Basic Grid](https://moduscreate.com/blog/ext-js-react-basic-grid/)