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>