Skeleton React Native

This repository contains a React Native App skeleton powered by React Native.

This repo has been built and tested using the following software and associated versions, please ensure you meet the minimum version shown below for each in order for this repo to run correctly.

Prerequisites

Before you clone this repository, please ensure the following 5 packages have been installed (first-time setup only). Please also ensure that you have node/NPM installed. We are also using NPM to manage our project dependencies.

Environment Setup

1. Install XCode

Download it from Apple Store

2. Install HomeBrew

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Mac OSX dependencies management program used here to install node

3. Install Node/NPM

brew install node

or if it's already installed

brew upgrade node

Node runs Javascript outside of the browser.
NPM is used for installing dependencies.
Node and NPM come together, they are installed at the same time.

4. Install Watchman

brew install watchman

Watch filers on the hard drive and waits for them to change

5. Install React Native CLI

npm install -g react-native-cli

Used to generate new React Native projects

Let's get started

Clone the repository

CD into your 'projects' folder and clone the repo with the git clone command.

git clone git@github.com:frankdarnese/react-native-skeleton.git

Update folder name && cd into it

Change the repository name according to your new project. Linux and Unix users can rename their files and directories by using the mv command.

mv react-native-skeleton your_new_project_name && cd your_new_project_name

Please note: You can also rename the folder at the time you clone it. See example below:

git clone git@github.com:frankdarnese/react-native-skeleton.git YOUR_NEW_PROJECT_NAME && cd YOUR_NEW_PROJECT_NAME

Install NPM

Run npm install within the project folder

Build and run the project

To build and launch the project, run the following command:

• Option 1.
  

react-native run-ios

Note: This may take a few minutes before building the app. Once done, this should launch the Simulator and you should see the boilerplate welcome screen.

• Option 2.
  

Start the app from the Xcode IDE

Initializing GIT + GitHub remote setup

cd into the project folder and run

  git init
  git commit -m "Initial commit"
  git remote add origin git@github.com:YOUR-REPOSITORY-NAME.git
  git push -u origin master

Open the project folder in your favorite editor

e.g. If you are using atom:

  atom react-native-skeleton

or if you are in the project folder already:

  atom .

Setup ES6 + Babel + JSX Linting with Atom (Optional)

This sets up Atom to properly lint ES6+Babel+JSX using Airbnb's .eslintrc as a starting point.

1. In Atom install lint & es-lint packages

2. Install eslint-config-airbnb babel-eslint eslint-plugin-react which are files that contains a set of rules we are going to use during our project.

From your project root run:

npm install --save-dev eslint-config-airbnb babel-eslint eslint-plugin-react

3. Make sure ESLint knows to use the rule set-up/bundle we have just installed via NPM Inside of the project directory create a new file called .eslintrc

4. Add the following code to the .eslintrc file

  {
    "extends": "eslint-config-airbnb"
  }

Please check Airbnb's Javascript styleguide and the ESlint config docs for more information.

Testing

• To test the project inside the Simulator you can open the inspector mode from within the Simulator menu (CMD + D to show the menu).

• For web testing/debugging you can go to : http://localhost:8081/debugger-ui and open the web inspector.

• You may also install the standalone version of React Developer Tools to inspect the React component hierarchy, their props, and state.
  When react-devtools is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools. Please check the React Developer Tools on GITHUB for more info.