Getting Started with React Native

Why?

I decided to dive head-first into learning React Native today. Why, you ask, do I not just use Xcode and learn Swift (which I have heard was really great, actually) and then also use Android Studio and code in Java.

That basically answers the question. Cause I'm lazy. I want to develop native mobile apps, but yet I would basically have to rewrite the front-end twice in two different languages. That's quite a pain in the ass.
I know it could possibly make me a better programmer down the road. And my expertise could be more in demand in the future (maybe, but also maybe not).

However, I want to develop and release to multiple platforms with as little 'mode-switching' in my mind as possible right now. For this consistency, I think React Native will take off. Plus, there is the bonus feature of not having to wait 2 hours for compilation every time you make a change, which is quite nice. But, even if React Native hits an iceberg and sinks, React will still be around for web developers. This is also quite nice to fall-back on.


Setup (OSX)

You will need to install Xcode and the Android Studio SDK installed.

You should also have Node.js installed on your system. I suggest using nvm to switch between versions as React Native may require different versions from your other applications.
There are multiple ways to install nvm, and how you do it I'll leave to personal preference.

Next you need to install watchman which is a file watching service built by Facebook:

brew install watchman

Next, you need to install the React Native client:

npm install -g react-native-cli

Generating a Project

Thereis just one simple command to generate a new React Native project:

react-native init <name-of-project>

Testing

By default, React Native builds a running application.
Launch your server by running:

npm start

If you have your Xcode and Android Studio setup correctly you can launch the emulators or run it directly on the device.

iOS

react-native run-ios

This will launch an iOS emulator on your machine, which will you will see the following page on it:
React Native first run

Android

You can run a similar command for Android:

react-native run-android

However, you may get a red error screen if it is not set up on the correct IP address. To fix this you need to get to the dev menu by pressing Cmd+D or shaking the physical device

Then click Dev Settings and under "Debugging", select "Debug server host & port for device"
Enter: <Your_ip_address>:8081

To find out the IP address of your computer (from System Preferences > Network OR you can run $ ifconfig | grep 'inet') and make sure your device is on the same network.

Reload it and you should see the same welcome screen above!


References

https://facebook.github.io/react-native/docs/getting-started.html