From 34af472bd3e901c6da9f59840f7d57cbb3972918 Mon Sep 17 00:00:00 2001
From: Jeremy Shimko <jeremy.shimko@gmail.com>
Date: Sun, 6 Dec 2015 16:10:37 -0500
Subject: [PATCH] clarify React usage in README

---
 README.md | 118 ++++++++++++++++++++++++++++++++----------------------
 1 file changed, 70 insertions(+), 48 deletions(-)

diff --git a/README.md b/README.md
index 3df110d..c94ca4c 100644
--- a/README.md
+++ b/README.md
@@ -58,81 +58,78 @@ AccountsTemplates.configure({
 });
 ```
 
-Useraccounts:flow-routing uses the internal useraccounts
-
-```fullPageAtForm``` is the built-in template useraccounts uses by default for its forms. You can override it on a per-route basis (see below) or replace it with ```defaultTemplate:``` field as above (templates specified in route config will still take precedence).  Omit ```defaultTemplate``` (or set to an empty string) to use the ```fullPageAtForm``` template built-in to your useraccounts UI package (ex [material](https://github.com/meteor-useraccounts/materialize/blob/master/lib/full_page_at_form.html)).
+`useraccounts:flow-routing` uses the internal useraccounts `fullPageAtForm` is the built-in template useraccounts uses by default for its forms. You can override it on a per-route basis (see below) or replace it with `defaultTemplate:` field as above (templates specified in route config will still take precedence).  Omit `defaultTemplate` (or set to an empty string) to use the `fullPageAtForm` template built-in to your useraccounts UI package (ex [material](https://github.com/meteor-useraccounts/materialize/blob/master/lib/full_page_at_form.html)).
 
 NOTE: The above configs must load BEFORE your AccountsTemplates routes are defined (next section).
 
 ## React Configuration
 
-Firstly, please ensure that your app depends upon the [React Layout][3] and the [Blaze Layout][2] packages.
- User Accounts currents only renders Blaze templates. In order to use User Accounts with React we rely on the [Blaze To React][4] package to render the User Accounts templates.
+Firstly, please ensure that your app depends upon the [React Layout][3] and the [Blaze Layout][2] packages. User Accounts currents only renders Blaze templates. In order to use User Accounts with React we rely on the [Blaze To React][4] package to render the User Accounts templates.
 
 Before you configure routes for User Accounts with Flow Router, you will need to make sure you have set a few default configuration items.  
 
-Assuming you have a main layout that looks like this:
+Assuming you have a main layout that looks like following and you have `<Nav />` and `<Footer />` as your default nav/footer components:
 
 ```jsx
 MainLayout = React.createClass({
   render() {
-    return <div>
-      <header>
-        {this.props.header}
-      </header>
-      <main>
-        {this.props.main}
-      </main>
-      <footer>
-        {this.props.footer}
-      </footer>
-    </div>
+    return (
+      <div>
+        <header>
+          {this.props.nav || <Nav />}
+        </header>
+        <main>
+          {this.props.main}
+        </main>
+        <footer>
+          {this.props.footer || <Footer />}
+        </footer>
+      </div>
+    );
   }
 });
 ```
 
-You would configure this package to use it like this:
+You would then configure this package to use it like this:
 
 ```js
 AccountsTemplates.configure({
-    defaultLayoutType: 'blaze-to-react',
-    defaultTemplate: 'myCustomFullPageAtForm',
-    defaultLayout: MainLayout,
-    defaultLayoutRegions: {
-        header: <MyNav />,
-        footer: <MyFooter />
-    },
-    defaultContentRegion: 'main'
+  defaultLayoutType: 'blaze-to-react',
+  defaultTemplate: 'fullPageAtForm',  // default
+  defaultLayout: MainLayout,
+  defaultLayoutRegions: {
+    nav: <Nav />,
+    footer: <Footer />
+  },
+  defaultContentRegion: 'main'
 });
 ```
 
-If you don't have extra content regions (nav, footer, etc) you should pass an empty object to ```defaultLayoutRegions``` key of the config.
+If you don't have extra content regions (nav, footer, etc) you should pass an empty object to the `defaultLayoutRegions` key of the config.
 
 ```js
 AccountsTemplates.configure({
 	defaultLayoutType: 'blaze-to-react',
-    defaultTemplate: 'myCustomFullPageAtForm',
-    defaultLayout: MainLayout,
-    defaultLayoutRegions: {},
-    defaultContentRegion: 'main'
+  defaultTemplate: 'myCustomFullPageAtForm',
+  defaultLayout: MainLayout,
+  defaultLayoutRegions: {},
+  defaultContentRegion: 'main'
 });
 ```
-Useraccounts:flow-routing uses the internal useraccounts
 
-```fullPageAtForm``` is the built-in **Blaze** template useraccounts uses by default for its forms. You can override it on a per-route basis (see below) or replace it with ```defaultTemplate:``` field as above (templates specified in route config will still take precedence).  Omit ```defaultTemplate``` (or set to an empty string) to use the ```fullPageAtForm``` template built-in to your useraccounts UI package (ex [material](https://github.com/meteor-useraccounts/materialize/blob/master/lib/full_page_at_form.html)).
+`useraccounts:flow-routing` uses `fullPageAtForm` for the `defaultTemplate` option.  `fullPageAtForm` is the built-in Blaze template that all UserAccounts themed packages (Bootstrap, Materialize, etc.) use for their forms. You can override it on a per-route basis (see below) or replace it as shown above (templates specified in a route config will still take precedence).  Omit `defaultTemplate` (or set to an empty string) to use the `fullPageAtForm` template built-in to your useraccounts UI package (ex [material](https://github.com/meteor-useraccounts/materialize/blob/master/lib/full_page_at_form.html)).
 
 Please note that this template must be a **Blaze** template. It will be rendered into your React layout using [Blaze To React][4].
 
 NOTE: The above configs must load BEFORE your AccountsTemplates routes are defined (next section).
 
-
 ## Routes
 
 There are no routes provided by default, but you can easily configure routes for sign in, sign up, forgot password, reset password, change password, enroll account using `AccountsTemplates.configureRoute`.  
 
 The simplest way is to make the call passing in only a route code (available route codes are: signIn, signUp, changePwd, forgotPwd, resetPwd, enrollAccount).
 
-This will set up the sign in route with a full-page form:
+This will set up the sign in route with a full-page form at `/sign-in`:
 
 ```js
 AccountsTemplates.configureRoute('signIn');
@@ -146,24 +143,47 @@ AccountsTemplates.configureRoute(route_code, options);
 
 The following is a complete example of a custom route configuration:
 
+##### Blaze
+
 ```js
+// routes.js
+
 AccountsTemplates.configureRoute('signIn', {
-    layoutType: 'blaze',
-    name: 'signin',
-    path: '/login',
-    template: 'myLogin',
-    layoutTemplate: 'myLayout',
-    layoutRegions: {
-      nav: 'myNav',
-      footer: 'myFooter'
-    },
-    contentRegion: 'main'
+  layoutType: 'blaze',
+  name: 'signin',
+  path: '/login',
+  template: 'myLogin',
+  layoutTemplate: 'myLayout',
+  layoutRegions: {
+    nav: 'customNav',
+    footer: 'customFooter'
+  },
+  contentRegion: 'main'
+});
+```
+
+##### React
+
+```jsx
+// routes.jsx
+
+AccountsTemplates.configureRoute('signIn', {
+  layoutType: 'blaze-to-react',
+  name: 'signin',
+  path: '/login',
+  template: 'myLogin',
+  layoutTemplate: CustomLayout,
+  layoutRegions: {
+    nav: <CustomNav />,
+    footer: <CustomFooter />
+  },
+  contentRegion: 'main'
 });
 ```
 
 All options are passed to FlowRouter.route() which then creates a new custom route (see the official Flow Router documentation [here](https://atmospherejs.com/kadira/flow-router) for more details).  
 
-All the above fields are optional and fall back to default values in case you don't provide them. Default values are as follows:
+Default values for all fields are as follows:
 
 | Action          | route_code    | Route Name      | Route Path       | Template       | Redirect after Timeout |
 | --------------- | ------------- | --------------- | ---------------  | -------------- |:----------------------:|
@@ -184,7 +204,9 @@ If you want to protect a route by making sure a user is signed in, you can add t
 FlowRouter.route('/private', {
   triggersEnter: [AccountsTemplates.ensureSignedIn],
   action: function() {
-    BlazeLayout.render(...)
+    BlazeLayout.render(...);
+    // or
+    ReactLayout.render(...);
   }
 });
 ```
@@ -200,4 +222,4 @@ FlowRouter.triggers.enter([AccountsTemplates.ensureSignedIn]);
 [1]: https://atmospherejs.com/kadira/flow-router
 [2]: https://atmospherejs.com/kadira/blaze-layout
 [3]: https://atmospherejs.com/kadira/react-layout
-[4]: https://atmospherejs.com/gwendall/blaze-to-react
\ No newline at end of file
+[4]: https://atmospherejs.com/gwendall/blaze-to-react