How to get started with React Native, according to this programming teacher

Photo credit: John Salzarulo.

Before diving in, I want to tell you a little story. I’ve been wanting to put together a simple website for quite a while (not a web app, but just a simple website). So, I started looking around for how to do it.

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

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 now is spent in React Native and, on the web, I see many people in the same situation I was in. In a week, I email and chat with a few dozen people 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, or a client just insists on using it for a project. (Tech people are very diverse in how and why they learn about new things.)

Some of these 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. In my experience creating a video course on React Native, many of the same problems come up.

Javascript syntax woes

class App extends React.Component { ... }

OK, 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 sign?

export default App;
export App;

What’s the difference of these, 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 to 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).

Have a basic grasp of React

Setting up the development environment

List of tools