How to Get Started with React Native

Before diving in I want to tell you a little story — I’ve been wanting to put together a simple website. Not a web app, just a simple website. I haven’t done that in a quite a while so I started looking around for how to do it…

… and then I found myself falling down a rabbit hole of increasing complexity, using different tools, and forgetting about what I actually wanted to build.

I ended up throwing everything I did away (it was useless anyway), signing up for a course, and just following along so I could get a sense of things before working on my project.

Most of my time is spent in the realm of React Native, and on the web I see many people in the same situation I was in. I email and chat with a few dozen people a week who are also interested in learning React Native. They’ve heard about it from a friend or a co-worker, seen it mentioned on Twitter, a client insists on using it for a project, or one of a dozen other reasons. Tech people are very diverse in how and why they learn about new things.

Some people are coming from a web development background, others have used tools like Cordova, and others are making the leap into the JavaScript world for the first time. Regardless of someone’s background many of the same things come up.

JavaScript Syntax Woes

class App extends React.Component { ... }

Okay, I’ve seen classes before. No big deal — but in JavaScript?

const { amount, purchaseDate } = this.props;

Huh, const and what’s with the curly braces on the left of the equals?

export default App;
export App;

What’s the difference, though?

Regardless of whether you’re familiar with JavaScript or not the use of ES2015/ES6 trips people up, a lot. And it’s very common in React Native. People who have used JavaScript often haven’t used this (relatively) new syntax. And people who are just learning JavaScript are often referencing tutorials that don’t use it . This leads towards more confusion.

Just know that what you see in Javascript tutorials still applies, as does what you’ve previously learned. ES2015/ES6 is simply an extension that makes it easier to do things (once you’re familiar with it).

To learn ES2015/ES6 check out this no-fluff intro by Babel. There’s also a nice series that will introduce and explain things to you.

Have a Basic Grasp on React

I know you want to dive right into React Native — it’s awesome. But if you want to minimize confusion, then I would suggest spending a bit of time understanding the basics of a React application.

There’s some terminology you’ll want to know and you’ll want to understand how you compose an application. React Native is an extension of React. It’s just a different client target that’s using React and its principles to create the application.

Getting a grasp on React is a good use of time. Looking through the homepage alone will help you quite a bit. I also suggest you look through the official tutorial to get an even better grasp.

You don’t have to spend a ton of time here building a complex web application with React, just use this time getting familiar with the idea of React.

Setting Up the Development Environment

You don’t need a special text editor. Whatever you’ve been using will likely work fine. Don’t stress about the editor right now.

Now if you want to build a React Native app, which works on iOS and Android, you’ve got to install all the development tools for those platforms, right?

Well, no. Not right now at least.

There’s a tool called Expo which takes care of all the native development environment stuff so you can focus on learning React Native and building apps with it.

But wait — it gets better! There’s a command line tool called Create React Native App which makes it even easier to get started with React Native. It’s backed by Expo which means all we have to do is install the command line interface and then we’re off to the React Native races!

Scan the QR code output from the Expo app and start hacking! The code will update on every file save.

How do I…

Here’s a rapid fire, opinionated, list of tools to handle common needs:

Manage state: Redux
Work with a remote API: Redux Saga
Navigation: React Navigation
Share the app: Publish to Expo
Style the app: React Native Extended StyleSheet
A code editor: Visual Studio Code

I hope that helps you get up and running with React Native a bit faster and with less confusion!