Merge pull request #30 from simpleweb/readme-update

README updates

README.md

@@ -1,77 +1,147 @@
-# generator-react-native
+# ⚛️ generator-react-native
 
-These generators should be run on _existing_ React Native projects.
+The aim of of this generator is to **provide structure** and a **set of patterns**
+to eliminate the time you would spend bootstrapping your own. While this comes
+with some opinion, there’s no overarching framework on top of React Native; it’s
+purely a collection of commonly used modules and some sensible architecture to
+get you or your team off the ground.
 
-## Starting a new project?
+## How should the generator be used?
 
-First setup a barebones React Native project, make sure it's the latest version too.
+Create a new React Native project using their CLI tool.
 
 ```
 react-native init MyApp && cd MyApp
 ```
 
-The next logical step is to install this generator (instructions below) and run the `base` command.
+Once this is complete, simply run the main generator command. This will rework
+and add to the files that are generated by React Native and give you something
+more akin to what you might find with `rails new`.
 
-## What does all this stuff do?!
-
-So... there's no documentation just yet, but there are some [resources](#resources) on some of the more complex topics.
+```
+yo react-native:base
+```
 
 ## Installation
 
-This generator uses Yeoman, please install it first.
+This generator uses [Yeoman](http://yeoman.io/), install along with the
+generator.
 
 ```
-npm install -g yo
+npm install -g yo generator-react-native
 ```
 
-This is not available on `npm` _yet_. So for now, clone the project down and inside the folder run.
+## Commands
 
-```
-npm install
-npm link
-```
+### `yo react-native:base`
 
-You can then run the following commands.
+This is the main command you’ll use with the generator, you’ll typically run it
+once over a new React Native application to get you setup and provide some
+structure.
 
-## Commands
+The outline of the application looks as described below; while it does provide
+structure it also sets up various libraries to handle things like HTTP requests,
+managing your applications state and long running async’ tasks.
 
-First, please create yourself a new React Native project with `react-native init MyApp && cd MyApp` before running any of the generator commands.
+The full list of features are described in more detail below but they do assume
+an opinion with which technologies you may want to work with. However, nothing
+is set in stone and most parts can be easily reworked.
 
-### `base`
+```
+App/
+├── Actions/
+│   ├── App.js
+│   └── index.js
+├── Assets/
+│   └── AppIcon.png
+├── Components/
+│   ├── App/
+│   │   └── index.js
+│   ├── Button/
+│   │   ├── index.js
+│   │   └── styles.js
+│   ├── Layout/
+│   │   ├── index.js
+│   │   └── styles.js
+│   ├── Text/
+│   │   ├── index.js
+│   │   └── styles.js
+│   └── Utilities/
+│       └── Environment/
+│           ├── index.js
+│           └── styles.js
+├── Config/
+│   ├── Locales/
+│   │   └── en.json
+│   └── index.js
+├── Helpers/
+│   ├── Translations.js
+│   └── Log.js
+├── Reducers/
+│   ├── App.js
+│   └── index.js
+├── Sagas/
+│   ├── index.js
+│   └── RequestExample.js
+├── Scenes/
+│   ├── Styleguide/
+│   │   ├── Container.js
+│   │   └── index.js
+│   ├── index.js
+│   └── Main.js
+├── Services/
+│   └── API/
+│       ├── index.js
+│       └── logging.js
+├── Store/
+│   ├── Middleware/
+│   │   ├── Buffer.js
+│   │   ├── index.js
+│   │   ├── Logger.js
+│   │   └── Saga.js
+│   └── index.js
+├── Styles/
+│   └── Variables/
+│       └── index.js
+├── Types/
+│   └── index.js
+├── App.js
+└── Router.js
+```
 
-Base will generate you a new project start point. It includes the following,
+`base` will generate you a new project starting point, including the following:
 * A sensible `README` providing consistent instructions between projects
-* `nvm` setup
 * Can optionally `init` Git for you
-* Router (using `react-native-router-flux` or `react-navigation`)
+* Router using `react-navigation`
 * Redux setup
-* Redux store that is persisted and restored automatically
-* Redux logger
-* Launch screen that waits for the store to be restored from the cache
-* Prevents Redux actions from being dispatched before the cache is restored
-* Environment configuration variables
-* Sagas (to handle async tasks like HTTP requests)
+  * Store is persisted using `redux-persist`
+  * Helpful state changes logged in the debugger using `redux-logger`
+  * Actions are prevent from being dispatched before the cache is restored
+* UI niceities
+  * CSS-in-JS support for `styled-components`
+  * Start to a styleguide to list your components
+  * Example Button component
+  * Layout component example to DRY up scene layouts
+  * Pattern to organise components and their styles
+* Helpful utilities
+  * `log` helper to output coloured logs to the debug console
+  * Visual display of your app’s environment while it’s running, this gets hidden
+  in production
+* Optional support for different locales using `react-native-i18n`
+* Environment variables available in JavaScript, Objective C and Java using
+`react-native-config`
+* Sagas (to handle async tasks like HTTP requests) using `redux-saga`
 * Initial setup for deep linking
-* Handy `fetch` wrapper that will log what requests are being made, providing the base URLs from the environment variables
-* Pattern to manage components and their styles
-* Visual display of your app’s environment while it’s running, this get’s hidden in production
-* Automatic versioning of iOS and Android versions based on the `package.json` version.
+* Requests are setup to be handled with `axios` with clear logging in the
+debugger provided
+* Automatic versioning of iOS and Android versions based on the `package.json`
+version
 * Pattern to manage Flow types across the app
-* `log` helper to output coloured logs to the debug console
-* Logs that get excluded when in production
-* Generic app icon that can be processed through a separate generator to handle all your iOS and Android icons
-* Simple Styleguide setup
-* Example Button component
-* Style variables
-* Platform specific style variables
-* Layout component example to DRY up scene layouts
+* Generic app icon that can be processed through a separate generator to handle
+all your iOS and Android icons
 
 Please note, follow the "Manual Notes" below after running this command. Hopefully in the future these can be automated.
 
-```
-yo react-native:base
-```
-
 ### `component`
 
 An easy way to scaffold stateless and stateful components.