react-native-starter-kit [WORK IN PROGRESS!]

A tutorial for getting started with your first react-native application

Environment Setup

IOS

Download XCode from the app store
Install Homebrew by copying and pasting the following command into your terminal:
$ /usr/bin/ruby -e "$(curl -fsSLhttps://raw.githubusercontent.com/Homebrew/install/master/install)"
Install node with Homebrew using the following command:
$ brew install node
Install Watchman with Homebrew using a similar command to the one above:
$ brew install watchman
Watchman looks out for file changes and triggers actions such as rebuilding assets with these changes.
Install the React Native cli:
$ sudo npm install react-native-cli -g
Initialise your React Native project using the React Native cli:
$ react-native init <projectName>
NOTE: the project name must be purely alphanumeric
Checkout to the newly created folder:
$ cd <projectName>
Create a new repository on GitHub and then copy the clone link:
Initialise your project and link it to the GitHub repo:
$ git init
$ git add .
$ git commit -m "init"
$ git remote add origin <yourCloneLink>
$ git push -u origin master
Run XCode by right clicking on the projectName.xcodeproj file in your Finder and then selecting 'Open with XCode'. The file is located within the ios directory. Once XCode has loaded up, click the 'play' button in the top left to build your project:
This should open the simulator. Press Cmd+Shft until you get to it. (it should appear in your dock if you can't find it) You should then be able to see the following window:
Open the index.ios.js file in your text editor, make some changes to the text between the tags and then save it. Go back to your simulator and then press Cmd+R. Now you should be able to see your updated changes.
Delete the code from index.ios.js as we'll be writing our own from scratch later. You've now successfully set up an IOS simulator! We'll come back to this after we've set up android.

Android

Go to the React Native docs and select your platform at the top.
Scroll down until you see a link to download the JDK (Java Developer Kit) for your OS:
Download the JDK that you need. I chose the one for Mac (make sure you accept the license agreement first):
Once it's downloaded, follow the installation instructions:
Alternatively you can download the Android Studio which essentially does the same thing. You can follow instructions for that **here
Next you'll need to install the android-sdk. Type the following command into your command line:
$ brew install android-sdk
Then you'll have to set the ANDROID_HOME environment variable. To do this, type the following into the terminal:
-$ cat ~/.bash_profile (this prints out your bash profile)
-$ vi ~/.bash_profile (press i then enter)
-Edit the new first line and paste -ANDROID_HOME=/usr/local/opt/android-sdk
-Then press :wq
-Lastly enter $ echo $ANDROID_HOME (should print what you saved it as)
-If that hasn't worked then try $ export ANDROID_HOME=~/Library/Android/sdk in your terminal
-Restart your shell so that it loads the new bash profile || run source ~/.bash_profile if you want to keep the same window
In the React Native docs it recommends that you install Flow which is a static type checker which helps to quickly find errors in Javascript applications. You can install it with Homebrew:
$ brew install flow
Next you'll need to install an Android simulator. Download and install Genymotion. To do this you'll need to create an account. Click on the sign in button in the top right and then click Create Account:
Once you've activated your account, click on the products tab at the top and then scroll down until you get to the development options. Genymotion is free if you use it for personal use so if that's the case, click on the 'Individual' tab and then click on 'Get Started' in the box titled 'Basic':
Follow the link and then click on the download that you want:
Once it's downloaded, move both Genymotion and Genymotion Shell into Applications:
Next download and install VirtualBox which is a virtual machine that you can run on top of your existing OS. (It basically helps with the emulation of Genymotion): Choose the version you want:
Then follow the instructions to install it:
To run a device emulator, open Genymotion and then sign in. Then when it asks if you want to add a new device click yes:
Select a device that you want to emulate and then click 'next': Genymotion then retrieves the virtual device: If it displays the error 'Genymotion failed to import OVA files' then delete the Genymotion cache by going into settings>misc:
To run the emulator, click on the one you just downloaded and then press 'start': Then go to your terminal and type the following commands in separate tabs or windows (make sure there is only one instance running):
$ npm run start
$ react-native run-android
(make sure your emulator is running) You should be able to see the emulator fetch the JS bundle and then display the content in index.android.js:
If the build still fails, create a new file in your android/ directory called local.properties with the following code within it:
sdk.dir = /Users/<USERNAME>/Library/Android/sdk
After you've made changes in index.android.js you can reload the emulator by pressing the grip in the bottom right and then selecting 'Reload JS':

You've now successfully set up a development environment for both IOS and Android! Now it's time to start developing...

Redux

Next we'll add Redux to manage the state of our application.

If you haven't checked out these Redux tutorial videos from its creator, Dan Abramov, I'd strongly recommend doing so before you go any further.

Create the following folders and files within your file tree:

├── android
├── app
│   ├── actions
│   ├── components
│   ├── containers
│   ├── reducers
│   ├── action_types.js
│   ├── config.js
│   └── configure_store.js
├── ios
├── test
├── .buckconfig
├── .flowconfig
├── .gitignore
├── .watchmanconfig
├── index.android.js
└── index.ios.js

We'll build up our file tree as we start to develop our appplication but first let's add content to our config.js and configure_store.js files

In your config.js file add the following:
```
'use strict';  
export default {
appName: '<insert_app_name>',
inviteLink: 'http://localhost:1234',
serverRoot: 'http://localhost:1234'
};
```
And in your configure_store.js file we'll set up our store:
```
'use strict';
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import createLogger from 'redux-logger';
import rootReducer from './reducers/index.js';
const createStoreWithMiddleware = applyMiddleware(thunk, createLogger())(createStore);
export default () => {
const store = createStoreWithMiddleware(rootReducer);
return store;
};
```
You'll need to install these modules as dependencies in order to use them. Run the following command in your command line:
$ npm install --save redux redux-thunk redux-logger
Let's walk through what we've added. We've imported a number of modules at the top of our file. So what do they do?
createStore - creates a Redux store that holds the complete state tree of your app.
applyMiddleware - allows you to add certain middleware to extend the functionality of Redux.
thunk - middleware that allows you to dispatch a function instead of an action. (these functions can dispatch other actions)
createLogger - debugging tool that logs all of the actions that have been called to the console.
We then need to import our root reducer (which we'll write in the next step)
The store is created with our root reducer and then exported for use in our index.android.js and index.ios.js files.
Now let's create our root reducer. A root reducer combines all of our reducers together into a single object.
In your reducers directory create an index.js file and add the following code:
```
'use strict';
import { combineReducers } from 'redux';
import reducer1 from './reducer_1.js';
import reducer2 from './reducer_2.js';
const rootReducer = combineReducers({
reducer1,
reducer2
});
export default rootReducer;
```
We import each of our reducers into the index.js file and then use Redux's combineReducers to merge them together (once they've been created).
Now we have to add our store to our application. We can do this in our index.android.js and index.ios.js files.
We need to wrap our app components that are returned from these files in <Provider></Provider> tags. The Provider provides the application with the store. Install react-redux to gain access to the provider:
$ npm install --save react-redux

jackcarlisle / react-native-starter-kit