From f8aaeea38d6348fdc405728584c78700d9482ae7 Mon Sep 17 00:00:00 2001 From: Benjamin Reid Date: Tue, 6 Mar 2018 11:31:07 +0000 Subject: [PATCH 1/6] Intro edits --- README.md | 20 +++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index b2a442a..47073ae 100644 --- a/README.md +++ b/README.md @@ -1,16 +1,26 @@ -# 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`. + +``` +yo react-native:base +``` ## What does all this stuff do?! From 00aad691243e8f243014babd91e80147408ec91c Mon Sep 17 00:00:00 2001 From: Benjamin Reid Date: Tue, 6 Mar 2018 11:34:47 +0000 Subject: [PATCH 2/6] And some ephasis --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 47073ae..038b5e6 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,8 @@ # ⚛️ generator-react-native -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 +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. From 57740627e77470285fbb0e98cf1010fd43fa2ace Mon Sep 17 00:00:00 2001 From: Benjamin Reid Date: Tue, 6 Mar 2018 11:59:25 +0000 Subject: [PATCH 3/6] Note on folder structure --- README.md | 93 ++++++++++++++++++++++++++++++++++++++++++------------- 1 file changed, 71 insertions(+), 22 deletions(-) diff --git a/README.md b/README.md index 038b5e6..f2e0553 100644 --- a/README.md +++ b/README.md @@ -22,32 +22,85 @@ more akin to what you might find with `rails new`. yo react-native:base ``` -## 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. - ## 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. - -``` -npm install -npm link -``` - -You can then run the following commands. - ## Commands -First, please create yourself a new React Native project with `react-native init MyApp && cd MyApp` before running any of the generator commands. - -### `base` +### `yo react-native:base` + +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. + +The outline of the application looks is described below. + +``` +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/ +│ └── index.js +├── Helpers/ +│ └── Log.js +├── Reducers/ +│ ├── App.js +│ ├── index.js +│ └── Nav.js +├── Sagas/ +│ ├── index.js +│ └── RequestExample.js +├── Scenes/ +│ ├── Styleguide/ +│ │ ├── Container.js +│ │ └── index.js +│ ├── index.js +│ ├── Launch.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, * A sensible `README` providing consistent instructions between projects @@ -78,10 +131,6 @@ Base will generate you a new project start point. It includes the following, 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. From 7175e8d98bdc7c9a70e71321c69be0077e776e2f Mon Sep 17 00:00:00 2001 From: Benjamin Reid Date: Tue, 6 Mar 2018 12:09:48 +0000 Subject: [PATCH 4/6] Notes on the outline --- README.md | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index f2e0553..3953ff2 100644 --- a/README.md +++ b/README.md @@ -39,7 +39,13 @@ This is the main command you’ll use with the generator, you’ll typically run once over a new React Native application to get you setup and provide some structure. -The outline of the application looks is described below. +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. + +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. ``` App/ From 0ff7d5dc840792f3230d20d251d0ad954ce9a764 Mon Sep 17 00:00:00 2001 From: Benjamin Reid Date: Wed, 22 Aug 2018 14:45:42 +0100 Subject: [PATCH 5/6] Update features --- README.md | 46 +++++++++++++++++++++++++--------------------- 1 file changed, 25 insertions(+), 21 deletions(-) diff --git a/README.md b/README.md index 3953ff2..6680313 100644 --- a/README.md +++ b/README.md @@ -108,32 +108,36 @@ App/ └── 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. From 1f8bd34363a668b5f1cbb6d3a7be0a9e441ce6f4 Mon Sep 17 00:00:00 2001 From: Benjamin Reid Date: Wed, 22 Aug 2018 14:47:31 +0100 Subject: [PATCH 6/6] Adjust folder structure --- README.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 6680313..573c991 100644 --- a/README.md +++ b/README.md @@ -71,13 +71,15 @@ App/ │ ├── index.js │ └── styles.js ├── Config/ +│ ├── Locales/ +│ │ └── en.json │ └── index.js ├── Helpers/ +│ ├── Translations.js │ └── Log.js ├── Reducers/ │ ├── App.js -│ ├── index.js -│ └── Nav.js +│ └── index.js ├── Sagas/ │ ├── index.js │ └── RequestExample.js @@ -86,7 +88,6 @@ App/ │ │ ├── Container.js │ │ └── index.js │ ├── index.js -│ ├── Launch.js │ └── Main.js ├── Services/ │ └── API/