Start Building a React Native Application

Tyler McGinnis
InstructorTyler McGinnis

Share this video with your friends

Send Tweet
Published 7 years ago
Updated 3 years ago

We'll download the requirements for getting started with React Native, refactor our app to ES6, walk through debugging, and talk about the philosophy behind React and React Native.

[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.

Shawn
Shawn
~ 7 years ago

Great series. Great topic. Thanks egghead.

Looks like I'll need to upgrade to Yosemite to use Xcode with iOS 8. Does not work on Mavericks.

Jarrod
Jarrod
~ 7 years ago

This video is really quiet even at full volume.

Omer Koren
Omer Koren
~ 7 years ago

I agree with Jarrod. Can anything be done regarding the volume of the video? I even tried to download and watch via VLC, which allows 125% in volume, but no good... I could try Camtasia, which can increase the volume by 1000%...

Omer Koren
Omer Koren
~ 7 years ago

Thanks. That's an interesting video. Any idea how to develop if I don't have Mac?

Shawn
Shawn
~ 7 years ago

Confirmed. Build now works after upgrade to OS X Yosemite and Xcode 6.3.

Luis
Luis
~ 7 years ago

I should have read some of these post before I started. I was not able to get pass the 6th video lecture because I'm using OS X Mavericks and Xcode 6.2. I believe I need Yosemite and a later version of Xcode to get the code to run properly. However, not all is lost since I have another computer with Yosemite.
Later...I got the code up and running on my other machine.

Terry Osbon
Terry Osbon
~ 7 years ago

I did not catch what tool was being used to paint the components on the screen red. This was demo'd at ~6:30 mark in the video. Could you please clarify for me what plugin/tool/devtool feature was used?

Tyler McGinnis
Tyler McGinnisinstructor
~ 7 years ago

Hi Terry,

Run this code in the console.

https://gist.github.com/tylermcginnis/ce4c81b5aa3b2d8173f3

Alain Armand
Alain Armand
~ 6 years ago

Hi Terry. Second time trying to run through the set up. First time using Xcode for anything. Both times I have run through the instructions, when I try to open the project via the Xcode GUI as you did in the video, i get the following error. "Xcode does not support opening folders without a project or workspace." If I run the file from the terminal via "open githubNotetaker.xcodeproj" it opens and the simulator build succeeds. Is doing it this way going to cause problems later? Is there something I needed to have done to get the project to open from the GUI?

Is there a recommended environment for following this tutorial? I ask because I am running into one error after the other in the simulator and xcode that i dont see referenced in the comments by others.

My current error is "Invariant Violation: Application githubNotetaker has not been registered. This is either due to a require() error during initialization or failure to call AppRegistry.registerComponent."

Thank you.

Paul Stocks
Paul Stocks
~ 6 years ago

Alain, to open an xcode project you need to navigate to the folder with the .xcodeproj file. This is in the ios folder. Something must have changed since the video was made. If you you look at the output of the 'react-native init ....' you will see they point you to this folder.

Eric
Eric
~ 6 years ago

Would be nice to have a section about Push Notifications with React.

Joe Seifi
Joe Seifi
~ 6 years ago

using Xcode 7.3 with El Capitan, can't open the project folder in Xcode. I get this error:

"Xcode does not support opening folders without a project or workspace."

Any ideas?

Carlo
Carlo
~ 6 years ago

Thanks!

Leon
Leon
~ 6 years ago

I couldn't open the root directory either, but it works if you open the ios directory (which as the 'githubNotetaker.xcodeproj' file).

Mark Berry
Mark Berry
~ 5 years ago

You have to open the "ios" folder because it has the .xcodeproj file in it.

Mark Berry
Mark Berry
~ 5 years ago

Tyler, Can you "futureproof" this tutorial by adding a comment that gives all the Versions required in node, react, react-native and NavigatorIOS, just like you did in the "Build Your 1st React App" vid that you made???

That futureproofing made your other video freaking genius. I ran through it, learned a TON, and had zero hangups in that tutorial. This particular tutorial has been so frustrating. I made it to the end of Vid 2 and have been stuck for hours!

A comment here, (and better) an addition to the vid itself, would really help out! I'm about to quit, because I can't find a solution anywhere.

If I understand dependencies correctly, we can keep going with NavigatorIOS from vid 2 if we stick to an older version of react-native...? Right?? Futureproofing solves that problem, correct? That's what I would rather do. I don't care to use the latest react-native if I can't even program in the language yet. Using the react-native version that you originally created the vid in is a great solution.

Thanks in advance.

Raunaq Sahni
Raunaq Sahni
~ 5 years ago

For people having trouble with following the code from this course can choose to refer to my github repo of this project built with React Native 0.44: https://github.com/raunaqss/githubNotetaker/

Each lesson corresponds to a branch just like Tyler's repository.

Ettiene Grobler
Ettiene Grobler
~ 5 years ago

I'm running Xcode 8.2 on OSX El Capitan, and the xcode project isn't even building for me. When will this course be updated with latest versions?

Tang
Tang
~ 5 years ago

seems the videos are a little bit old :(

Frances Maxwell
Frances Maxwell
~ 4 years ago

This video could use being updated.

Peter Surma
Peter Surma
~ 4 years ago

This video could use being updated.

I was just thinking the exact same thing!

Ivan
Ivan
~ 4 years ago

update pls ..

Michael Fields
Michael Fields
~ 4 years ago

Doesn't build for me either.

Milan Barande
Milan Barande
~ 4 years ago

If you encounter trouble during this course here's an updated version of the app using more recent syntax and removing the deprecated parts used in the videos, feel free to use if you're stuck with a bug on your app :) https://github.com/MilanBarande/github-notetaker Take not that ListView will be deprecated soon as well, I'm still using it in this code.

Cher
Cher
~ 3 years ago

For anyone struggling to open the project, you have to open the githubNotetaker.xcodeproj file in Xcode, not the entire folder :)

Julian Pineda
Julian Pineda
~ 3 years ago

Doesn't work. Too old to follow. Sad.

Creeland Provinsal
Creeland Provinsal
~ 3 years ago

In case anyone else was struggling with setting this up I made a starter repo using the latest version of React Native with some instructions on how to get started. https://github.com/eggheadio-projects/react-native-starter