Update README.md

I added extra verbiage to the read me as well as reordered the example walk through.

README.md

@@ -1,31 +1,16 @@
-Step One Create A Context.
-This is our state store;
+## Step One ## 
+Create A Context.
+This be our share data object through out our application;
 
 ```JavaScript AppContext.js
 import React from 'react';
 const AppContext = React.createContext();
 export default AppContext;
 ```
 
-So Now we can add that to our App.js
 
-```JavaScript App.js
-import React from 'react';
-import './App.css';
-import AppProvider from './AppProvider';
-import TodoList from './TodoList';
-function App() {
-  return (
-    <AppProvider>
-      <TodoList />
-    </AppProvider>
-  );
-}
-
-export default App;
-```
-
-Next we need to create our Provider
+Next we need to create our Provider.
+Our privider will contain our general controller logic for our application, these are the functions/methods we need access to through out our application. We use local storeage to create a persistant todo list for the example however you would simple extend this out to the data connections.
 
 ```JavaScript AppProvider.js
 import React from 'react';
@@ -80,8 +65,26 @@ class AppProvider extends React.Component {
 
 export default AppProvider;
 ```
+So now lets create the primary application component. Since we want our context available through out our applicaton we create our provider at the base of our application as our primary component in our app component. We also add our todolist primary component to the application provider component.
+
+```JavaScript App.js
+import React from 'react';
+import './App.css';
+import AppProvider from './AppProvider';
+import TodoList from './TodoList';
+function App() {
+  return (
+    <AppProvider>
+      <TodoList />
+    </AppProvider>
+  );
+}
+
+export default App;
+```
 
-Next Lets to the TodoList
+
+Next the TodoList main wrapper page, here we don't use the context so we just create our component adding our Todos component which utilizes the context.
 
 ```JavaScript TodoList.js
 import React from 'react';
@@ -95,7 +98,7 @@ const TodoList = () => (
 export default TodoList;
 ```
 
-Next we add in out Todos
+Next we create our Todos Component. Here we utilze the context consumer and use it to wrap our component content, where within our component we access the context and react based on the information or utilize the functions manipulating state through out the application. Here we import our form and context, iterate over our todolist context mapping our Todo components. Next we need a way to manipulate that data so we will create a form.
 
 ```JavaScript Todos.js
 import React, { Fragment } from 'react';
@@ -121,7 +124,8 @@ const Todos = () => (
 export default Todos;
 ```
 
-We need our Form.
+Forms dont need to be forms! We just need our elements.
+First we import our resources, then we set up our local state, we use the context consumer and the functions we attached to the context to manipulate the context and local state. Here I use an input but this could be a paragraph element using advance techniques like editable content, to keep this demonstration simple we use an input. We pass the event object to our local state function setting our todo on change. Once we click the buttin we add the todo to our context with our addTodo method we attached to our context.
 
 ```JavaScript TodoForm.js
 import React, { Fragment, useState } from 'react';
@@ -148,7 +152,7 @@ const TodoForm = props => {
 export default TodoForm;
 ```
 
-Finally our Todo
+Finally our Todo, Here we used a CSS Transition to make it look a little special, but again we start this component with the consumer component since we will be utilizing our context. We add our attached methods to our buttons and display our data. That's it we are done for now.
 
 ```JavaScript
 import React from 'react';
@@ -182,3 +186,5 @@ const Todo = props => (
 
 export default Todo;
 ```
+Try it out on your own. Try adding a way to edit the existing todo. Maybe setup to utilize a storage services. If you want to be good at something practice!
+