Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adds a quick start guide for React Native. #152

Merged
merged 1 commit into from
Aug 23, 2016
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/images/quick-start-react-native/hello-1.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/images/quick-start-react-native/hello-2.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/images/quick-start-react-native/spammy.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
140 changes: 140 additions & 0 deletions docs/quick-start-react-native.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,140 @@
# Quick Start for React Native

## Installing Reactotron.app

Let’s [download the desktop app](https://github.com/reactotron/reactotron/releases/download/v0.94.0/Reactotron.app.zip) to start. It’s OS X only at this point, but will shortly make available on Windows and Linux.

Unzip & run.

![Installing The App](./images/quick-start-react-js/installing.jpg)


## From Scratch

Let's start a brand new app from scratch. If you want to use your own, skip to the next section.

Download `react-native-cli` if you haven't yet:
```
npm i -g react-native-cli
```

Then spin up a brand new React Native app.
```
react-native init ReactotronDemo
cd ReactotronDemo
```

You'll need to run this in an emulator for Android or the simulator for iOS. Facebook has some [great guides](http://facebook.github.io/react-native/docs/getting-started.html#content) on getting started.

## Installing Reactotron

Let's install Reactotron as a dev dependency.

```
npm i --save-dev reactotron-react-native
```

I like a separate file for initializing. Create `ReactotronConfig.js` in your editor of choice and paste this:

```js
import Reactotron from 'reactotron-react-native'

Reactotron
.configure() // we can use plugins here -- more on this later
.connect() // let's connect!
```

Finally, we import this on startup in `index.ios.js` and `index.android.js` on line 1:

```js
import './ReactotronConfig'
```

At this point, Reactotron is hooked up.

Refresh your app (or start it up `react-native start`) and have a look at Reactotron now. Do you see the `CONNECTION` line? Click that to expand.

![We Have Contact](./images/quick-start-react-native/first-connect.jpg)


Go back to your app and refresh it 5 or 6 times. Now look.

![Chatty](./images/quick-start-react-native/spammy.jpg)

Pretty underwhelming huh?


## Hello World

Let's do some classic programming.

Open up `index.ios.js` or `index.android.js`.

Right after the line you just added in the previous step lets put this:

```js
import Reactotron from 'reactotron-react-native'
```

Next, inside the `render()` function, put this as the first line:

```js
Reactotron.log('hello rendering world')
```

Save that file and refresh your web page if you don't have live reloading.

Now Reactotron looks like this:

![Hello 1](./images/quick-start-react-native/hello-1.jpg)

While collapsed, the grey area to the right shows a preview. Click to open.

![Hello 2](./images/quick-start-react-native/hello-2.jpg)

Let's change our log statement to:

```js
Reactotron.log({ numbers: [1, 2, 3], boolean: false, nested: { here: 'we go' } })
```

Or this

```js
Reactotron.warn('*glares*')
```

Or this

```js
Reactotron.error('Now you\'ve done it.')
```

Or this

```js
Reactotron.display({
name: 'KNOCK KNOCK',
preview: 'Who\'s there?',
value: 'Orange.'
})

Reactotron.display({
name: 'ORANGE',
preview: 'Who?',
value: 'Orange you glad you don\'t know me in real life?',
important: true
})
```

## Now What?

Well, at this point, we have a complicated version of `console.log`.

Where Reactotron starts to shine is when you start plugging into Redux, tracking global errors, and watching network requests.

Check out our [Demo](../packages/demo-react-native) for more goodies.

![Demo Native App](./images/quick-start-react-native/react-demo-native.jpg)

![Demo Reactotron](./images/quick-start-react-native/react-demo-native-reactotron.jpg)
4 changes: 2 additions & 2 deletions readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ Still putting this together.

# Quick Start

See our [React JS Quick Start](docs/quick-start-react-js.md).
See our [React Native Quick Start](docs/quick-start-react-native.md). Coming soon.
* See the [React JS Quick Start](docs/quick-start-react-js.md).
* See the [React Native Quick Start](docs/quick-start-react-native.md).


# Changes
Expand Down