Notes and reflections on learning ReactNative, from a workshop by Scott Moss at FrontendMasters.

What is ReactNative?

A version of React that builds native applications on [iOS] and [Android].

Create a new app

$ react-native init <ProjectName>

Afterwards, the instructions are pretty simple:

To run your app on iOS:

cd your_app
react-native run-ios

- or -

Open your_app/ios/my_react_native_todo_app.xcodeproj in Xcode Hit the Run button

To run your app on Android: Have an Android emulator running (quickest way to get started), or a device connected

cd your_app
react-native run-android

A few chores

git init
echo 'description of your app' | tee README.md > .git/description
hub create -d "$(cat README.md)"
npm init # fill in missing info

Watchman

Watchman is a utility that is used by ReactNative in development mode to notify the system to rebuild when a file changes. I don’t particularly like it, and it seems problematic. It’s also a resource hog. For instance, I can’t run Spotify at the same time I’m working (sux).

Make to shut down the watchman server when switching projects.

watchman shutdown-server

Json-Server

In order to have a nice server store, I’m using the json-server module. It provides a nice RESTful server endpoint for the data you want to serve up.

Initialize the data file

Create the db.json file with the following content:

{
  "todos": []
}

Make sure the key is in quotes – it’s JSON not JavaScript.

Caveat: if you decide to pre-populate the database, make sure that you have an id field for each record.

Redux

Redux is the predictable state container for JavaScript. React has been associated strongly the Redux, although it’s not the only option on the block (see RxJs too).

.fetch()

The .fetch() function is the new, modern replacement for doing AJAX-y things with XmlHttpRequest. It’s a cleaner interface and built right in. Using isomorphic-fetch lets you use it browser or server side to perform async actions. It’s a bit odd for a name, though, since you can use any of the HTTP verbs with it, not just GET.

NOTE: remember that .json() on the Response object is a function.

1
2
3
4
5
6
7
8
export function fetchTodos() {
  return dispatch => {
    dispatch(requestTodos())
    return fetch(ENDPOINT)
      .then(response => response.json())
      .then(json => dispatch(receivedTodos(json)))
  }
}

Testing

I’m testing with Mocha and Chai modules

Because I’m using babel in the tests, I also needed to install bable-preset-react to get the run-ios to work.

In fact, using Mocha like this causes react-native to have conniptions, so I’m taking out the .babelrc file until I can figure out how to have both tests and native. :(