Start Building a React Native Application

[00:01] If you head over to native.reactjs.com, that will bring you to this page, and then you can click on this button, "Getting started with React Native." The very first thing you'll need to do, if you don't already have these installed already, is install Homebrew and install Xcode.

[00:17] Homebrew will allow you to install node if you don't have that installed. It'll also allow you to install watchman. Basically, all watchman is doing is it's used by React Native to figure out when your code changes, and it'll reveal itself accordingly. It's basically like having Xcode do a build each time you save your file.

[00:35] Once you have node and watchman installed, and then, obviously, Xcode, then what you'll need to do is you'll need to install the React Native CLI. If you're unfamiliar with node and with npm, all this is doing is it's installing this node package or npm package to your system globally, with a -g flag.

[00:54] Once you do that, then you'll be able to use react-native init in order to initialize new React Native projects. That's exactly what we'll start doing.

[01:02] I'll head over to my terminal. I'm going to go to my desktop.

[01:13] Now, what I'm going to do is react-native init and then the name of my project, which we'll call "github-notetaker." That's just the app we'll be building in this series. It's finished. You should get an output that looks like that and have this new folder created for you.

[01:30] I'll cd into there. What I'm going to do is open this up with Sublime. We have the code here, but I'm also going to use Xcode and open this up with Xcode as well. I'm going to go "File," "Open," and then go to my desktop and open up just this entire folder.

[01:59] If we want to see a preview of this app that React Native provides us by default, all you need to do is click on this play button up here. That'll compile it. You'll notice this terminal window opens up here.

[02:11] In the meantime, React will be compiling it, and then we'll get this simulator going on right here. That'll pop us into our new github-notetaker app, and then we'll get a preview right here.

[02:25] What's super cool about React Native and what I mentioned in the introduction is Facebook has done a really good job of bringing the things we're used to on the Web, like live reload and debugging, into development with React Native.

[02:42] If you click on your simulator and then you click on control-command-Z, that'll pop up this little window. I'm going to go ahead and enable live reload. Now, you'll notice, here's the source code over here. If I change this to "Welcome to GitHub Notetaker" and I save this, it automatically reloads over here. That's fantastic, especially for developing.

[03:05] Another great feature is say I had a variable and, for whatever reason, I wanted to debug this. I can throw a debugger in there. Over here, if I hit command-D, that will open up this other window.

[03:25] If we open up the console here and refresh our app, we get thrown right into debugger, just as if we were on the Web. We can use things, check out what name is, and check out the local scope and all the other variables. Super-handy and something we've grown used to on the Web, that a lot of people take for granted.

[03:47] I'm going to close this now. I'm also going to remove this extra code that we just added. You'll notice, as you're looking at React Native code, that it's a mix between ECMAScript 6, or ES6 stuff, and React code. If you're not familiar with ES6 or with React, don't worry about it. I'll walk through it in this tutorial.

[04:15] The approach I'm going to take is I'm going to do this pretty much all in ES6. You'll notice, here, React is creating this class using the React.createClass syntax. I'm going to refactor this, right now, in order to use ES6 classes, just because I think that's the future and we'll all be doing that here, soon.

[04:36] What I'm going to do is create a class called "github-notetaker." This class is going to extend React.Component. Take off these. What we're doing is we're just creating a new github-notetaker class. That extends React.Component so we can do things like set state and a few other things as well, which we'll talk about when we get there.

[05:01] As of right now, what we have is we're requiring React Native. This is an ES6 thing called "destructuring." Basically, if you were to rewrite this like this, it would be mostly the same thing. It would be basically the same thing. You would do this for each property in this object.

[05:23] This just allows us to shorthand that so it makes less writing, which is usually a nicer thing. Also, too, with ES6, you don't really need to use the function keyword in here. I'm going to take away that. Everything else looks pretty good. We're using some ES6 arrow function down here.

[05:46] Let's save this and then go back to our app. We have an error, index.ios.js, line nine. This needs to be "extends," not "extend." Now, if we come back over here and refresh, then our app is back to where it was, but we've added some more ES6 stuff.

[06:08] Let's talk a little bit more about React and the fundamental building blocks of React. You'll notice the very first thing we're doing here is creating a React component. Everything in React is a component.

[06:19] If we go and we look at some examples of this...If this was just a UI...All this is is it's an iTunes app that's built with React. You'll notice if we go ahead and look at what things are components, you'll notice that we have lots of components. Everything is a component.

[06:36] Obviously, the darker the red is, the more nested the components are. This is its own component. We have the entire app, which is a component. We also have this grid, which is a known component we're feeding data to.

[06:49] Everything in React is a component that we first start out with. Then what we can do is we can nest components as deep as we want, but the fundamental building blocks of React are components.

[07:00] This render method...You can think of render as essentially the UI or the thing that's going to be rendered to the screen when React does all its rendering stuff.

[07:14] Notice here we're returning a bunch of these native iOS components, where typically, if we're doing web development, this would be like div. This would be span and things like that, but since we're doing React Native, everything's in these native components.

[07:31] That's what's actually really cool about React Native. The current state of building Android and iOS apps with JavaScript is one where frameworks produce hybrid apps. That's the norm.

[07:43] Most of these frameworks allow various levels of communicating with the native environment. The issue there is that all of them fall short in one aspect or another because they're all either wrapping a Web app in a Web view or they're doing some other JavaScript technique, which isn't really ideal.

[07:58] The fundamental base of React is that when any state changes, React takes the current representation of the DOM, compares that with the new representation of the DOM, then finds the minimum number of steps to go from the current representation to the next.

[08:10] React keeps track of these diffs and then makes one batch update to the DOM. This is extremely performant and one of the reasons why React is so fast. The important thing to realize though is that the DOM is an implementation detail of building apps for the Web.

[08:23] React doesn't need to just wrap a DOM. With the fundamental nature of React, we can take our virtual DOM representation. Instead of wrapping the real DOM, we can wrap UIkit for iOS development or the Android equivalent for Android development.

[08:36] React Native is able to take the native standard platform components, like UITabBar and UINavigationController, and wraps them in React component counterparts. This gives your app a consistent look and feel with the rest of the platform ecosystem.

[08:49] React Native not only wraps native components, but it's able to perform the layout on a separate thread, leaving the main thread open for more important tasks, like animation. With React Native, there's no HTML, no browser, and no Web views.

[09:02] There's always been the saying of "Write once, run anywhere." React Native doesn't embrace this mantra. In fact, it rejects it. When you're building an iPhone app, you're not really thinking about Android principles.

[09:11] Both platforms have an entirely different look. They both have an entirely different way you interact with apps. It will never make sense to have one app which runs on both platforms. If you're wanting to target both platforms, you should write two different apps.

[09:23] The benefit of React and React Native is if you understand how to build a React Native app for iOS, you understand how to build a React Native app for Android. It's learn once, write anywhere.

[09:32] Facebook's goal is to, and I quote, "be able to develop a consistent set of goals and technologies that let us build applications using the same set of principles across whatever platform we want."

[09:43] What this means is that a set of engineers can build an iOS app and turn around the next day and build the exact same app for Android just by virtue of knowing React. If you understand the principles of React and are somewhat familiar with ES6 and Flexbox, you'll fit right in with React Native.