Get started with React Native in lightning speed

Image courtesy of @dominik_qn on @Unsplash

Check out this FREE guide.

React Native is the future. This weekend at Zonder we are launching our mobile app for iOS and Android and I have been blown away at the speed of development to get there. That is due in no small part to our amazing team but also to this phenomenal framework. Today we’re going to walk through a very introductory course that shows how you can get your app up and running in an afternoon.

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

The react-native docs are the best place to get an overview of this process but I’ll be diving into more detail to make it even easier to get going.

// NB I am using macOS and iOS as my environments, the project that we build will still be an Android project but it will require some extra work to get started as outlined here.

We will be following the “Building Projects with Native Code” tab as it is a better long-term solution if you want to build your app on a device or upload it to the app store.

Select building projects with native code tab

You can still do this with create-react-native-app but you will need to run npm run eject at some point which is irreversible and a little tricky so this is a better road to go down IMHO.

Firstly you’ll need to install or upgrade node( if you’re running < V6).To check your node version run:

node -v

If node is missing or less than v6.0.0 run:

brew install node

If you are getting an error to the tune of “brew not recognized” or something to that effect, run this command to install it.

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

And then install watchman too.

brew install watchman

The next step is to run:

npm install -g react-native-cli

which, surprise surprise, installs the react-native-cli, you will also need Xcode and the most recent version of the command line tools installed.

Xcode command line tools ⌘, to open

The fun bit

Now that we have all of our foundations laid it’s time to launch our app. To do this create a project in a suitable directory.

react-native init AwesomeProject

cd AwesomeProject

and

react-native run-ios

This will launch a pretty lengthy build process, but don’t worry you won’t have to go through this every time you start a new project. The other thing to be aware of is that a launch packager will launch in a new terminal window, at some point after you run the above command. If you ever run into issues where your app is stuck on the loading screen this is a great place to look for errors that may be causing this.

Your app should be up and running and ready to build on top of, which we’ll be looking into next week.

Thanks for your attention, it’s the most valuable thing you can give anyone. The hardest thing about writing these posts is often getting started, so any suggestions/requests for topics would be appreciated! I also welcome feedback on previous posts.

If you liked what you have read here and would like to hear more from me please feel free to sign up for my e-mail list on my personal site here, or at the very least…

https://www.youtube.com/watch?v=DdCYMvaUcrA

Resources

The 15 Saddest Moments of Jeb Bush’s Presidential Campaign_The 2016 presidential election has been kind to Donald Trump and Bernie Sanders, but not Jeb Bush. His poll numbers…_www.gq.com