Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 1083 of the free egghead.io lessons, plus get React content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

React Native: Up and Running

9:58 React lesson by

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.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

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.

Avatar
Robert

I am new to React and XCode. After watching this lesson, I pointed my browser to http://facebook.github.io/react-native/docs/getting-started.html#content and followed their getting started directions. This involved opening AwesomeProject.xcodeproj.

In XCode 6.3, I get an "issue": "No code signing identities found." Is this a concern?

This is also my first serious attempt to work on an Egghead.io lesson. Perhaps I should be using your code download, rather than what is on facebook.github.io?

Thanks -- Bob

In reply to egghead.io
Avatar
Carlos

Just a heads up, this example didn't work for me using version 1.7.1 of iojs. It worked when I switched back to Node version 0.12.2 (latest as of right now).

In reply to egghead.io
Avatar
Tyler

Good to know. Thanks for the heads up!

In reply to Carlos
Avatar
Robert

I'm slowly working my way through the lesson. I'm using XCode / iOS 8.3 and the project builds okay. I don't yet have 'watcher' or 'flow' installed, I will try to find the source code and install it as a standard user rather than a privileged user. A little hard for a deaf person to follow since I can't hear the audio, but I'm managing very slowly.

In reply to Robert
Avatar
Robert

I am so grateful to see the transcript you have provided. Thank you very much! This series has prompted me to discuss React Native with other developers at my day job, it is really getting my interest. Thank you again for providing the transcript!

In reply to egghead.io
Avatar
Robert

This lesson also works fine if you build Node v0.12.2 from source code as a standard user and build watchman the same way. I have both installed in ~/local and my PATH variable points to it. I'm also using the latest XCode and Command Line Tools for XCode. Using homebrew to install Node and watchman isn't strictly needed, but using it can be less work.

In reply to Tyler
Avatar
Shawn

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.

Avatar
Jarrod

This video is really quiet even at full volume.

Avatar
Yonatan

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

In reply to Jarrod
Avatar
Yonatan

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

Avatar
Shawn

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

In reply to Shawn
Avatar
Luis

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.

Avatar
Aviad

Sorry for my off-topic, but how to I make my sublime to look like that?

Amazing series BTW!

In reply to Tyler
Avatar
Terry Osbon

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?

Avatar
Alain Armand

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.

Avatar
Paul Stocks

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.

In reply to Alain Armand
Avatar
Eric

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

Avatar
Joe Seifi

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?

Avatar
Leon

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

In reply to Joe Seifi
Avatar
Mark Berry

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

In reply to Joe Seifi
Avatar
Mark Berry

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.

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.

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.

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.

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.

I'll head over to my terminal. I'm going to go to my desktop.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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.



HEY, QUICK QUESTION!
Joel's Head
Why are we asking?