Getting started

1. Make sure you have these all up to date + the latest version of xcode: brew update brew install node brew install watchman

2. Next, run the react native cli interface: npm install -g react-native-cli

3. Create your project and cd into the new app directory: react-native init app-name

4. Run the environment: react-native run-ios (for OSX)

Optional ESLint Install

Note! ESLint is a tool that validates your JS code in your editor with a ruleset that you define.

For Atom

In your atom editor: Atom > Preferences > + Install > search "linter-eslint" > install "linter-eslint" and > the next package below should be "linter", install that as well

For VSCode

Search for eslint in extensions, download and enable it. Note You may have to add this in your settings: "eslint.enable": true

Once you have the packages installed from your editor:

1. Install ESLint globally npm install -g eslint

2. Save the ruleset to your project directory: (ESLint does nothing without a rule set) npm install --save-dev eslint-config-rallycoding

Create new file in your project directory: .eslintrc In the eslintrc file, we need to use the rules config we installed with npm. Create this object: { "extends": "rallycoding" }

Coding

Fun Fact *The React library knows how a component should behave and make them work together. On the other hand, the React Native Library

Use this link to troubleshoot when needed.

1. In index.js, remove all of the code. STARTING ON LINE 3:

// Import a library to help create a component
import React from 'react';
import { Text, AppRegistry } from 'react-native';

// Create Component
const App = () => (
    <Text>Some Text</Text>
);


// Render it to the device
AppRegistry.registerComponent('albums', () => App);

Store Your Components

1. In your app directory:

• take src

2. Now make a components foler

• take components