Remake the colorbox React web app into a React Native app.

1. Download and install the latest version of Node.js (or LTS with npm version 6+)

2. Run the following commands in your terminal (hover over below to copy and paste)

Follow the instructions here.

Download the Expo mobile client app.

Now we can start coding!

 Q: Why does it exist? 

 A: Mobile dev is not like web dev. The required skills (Java for Android, Swift/Obj C for iOS) and tooling (AndroidStudio, XCode) are far different from things that web developers are used to, despite the fact that mobile apps are usually very similar to web apps.

 

Many technologies have tried to bridge the gap in some sort of hybrid solution, but React Native was different by using JavaScript wrappers that compile to native code. It's very performant. And it re-compiles quickly. More info here.

 Q: How different is it from regular React?

 A: The development experience is very similar. The tooling is quite different (iPhone simulator + XCode).

 

The major difference is in the JSX. There are no div, h1, p, span, form tags, because there isn't a DOM here, thus no HTML.

 

Instead we are provided with React wrappers around native components such as: View, Text, TouchableOpacity, TextInput.

 

Browse the list of native components here.

 Q: What things are not so good with it?

 A: When I did my first React Native project a couple years ago, it was at version 0.25. Now it's at version 0.56...

 

React Native and its many libraries/packages change a lot, and many seemingly minor versions have breaking changes. So there is definitely not as much stability as web React.

 

Also, build failures are much more common, and the error messages are generally much less helpful. It can make debugging much more time-consuming.

 Q: What's the difference between create-react-native-app and react-native-init?

A: Using create-react-native-app (CRNA) automatically sets you up with Expo. Expo is a third-party client which provides many convenient APIs for common native components like maps integration, etc. React Native init, on the other hand, gets you raw React Native with webpack.

 

To my knowledge, CRNA is good for making simple or medium-complexity apps quickly, but it locks you in to packages supported by Expo. With regular React Native, you have to spend more time messing with tooling but you get more control and flexibility, and you can develop new native components. CRNA can be a good way to start though, and then eject later.