Skip to content

Instantly share code, notes, and snippets.

@davegurnell
Created October 17, 2017 19:51
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save davegurnell/07439a450b2e4138fe951954133e5ce6 to your computer and use it in GitHub Desktop.
Save davegurnell/07439a450b2e4138fe951954133e5ce6 to your computer and use it in GitHub Desktop.

What we installed at the start

First we installed Node.js, which is a command line application that lets you run JAvascript code outside of the browser. We installed Node 7.10.2 (which isn't the latest version).

When you install node.js you get two commands:

  • node -- runs Javascript in your terminal;
  • npm -- "node package manager" This allows you to install libraries for Javascript development.

Then we use "npm" (the "node.js package manager") to install "create-react-native-app", which is a command line tool to create and manage React Native application source code:

sudo npm install -g create-react-native-app

(We then uninstalled and reinstalled an earlier version of Node.js, because create-react-native-app only supported an older version.)

We installed the Expo app on your phone (from the Play store). This is the "harness" app that will contain your Javascript code.

Finally, we installed a tool called "watchman" (which is a library that various node.js tools use to watch files on your hard drive to see if you edit them) to get around a random error message:

sudo npm install -g watchman

Then we created a react native project

Once we installed node.js and create-react-native-app, we created a blank application:

cd Documents
create-react-native-app FirstApp
cd FirstApp

Then we ran the app

Start by running a development server on your laptop. Make sure you're in the FirstApp directory:

cd Documents/FirstApp

Then run the server:

npm start

Open Expo on your phone and scan the QR code to see the app.

How to get to your code the next time

Open "Terminal" from the Spotlight menu (top right).

Change to the correct directory:

cd Documents/FirstApp

Run the development server on your Mac:

npm start

Open Expo on your phone and scan the QR code to connect.

Appendix A -- Places to look for documentation

Learn React Native https://facebook.github.io/react-native/docs/tutorial.html

Flexbox https://facebook.github.io/react-native/docs/flexbox.html

Appendix B -- Useful commands

  • cd -- change directory

    • cd directoryname
    • cd foo/bar/baz
    • cd ..
  • sudo command -- run a command as administrator (USE WITH CARE)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment