This course has been updated! We now recommend you take the React Native, v2 course.
Transcript from the "React Components & React Native" Lesson
>> Scott Moss: So React components, a lot of people said they never used React, so we're just gonna go over React components briefly. I'll get into some live examples and then I'm gonna set you free on a exercise. So React components, who here is hasn't heard of web components before?
>> Speaker 2: There's a question on the line.
>> Scott Moss: I use a lot of React for web, still getting used to style, I wonder how different are the two worlds? They're very similar, React for the web and React Native, I would say are probably at least 75% the same.
[00:01:02] So it's pretty close. It's gonna be nice. So React brings into view encapsulation with their React components. So that means every single thing, your whole application is just a tree of components. Like if you open the DOM, you see a tree of elements. Your application is going to be just like that.
[00:01:17] So we're going to do these components that you made or you downloaded somewhere else and that's what React components offer. So separation of concern, so we can separate different functionalities, different parts of our UI into different components and then we can compose those components together to create our application.
[00:01:35] And because of that, it's modular so if we separate everything out like that then it's completely modular, we can stick this component here, we can share with this person. We can test it, isolate it for the rest of the application, all types of stuff, it's pretty cool. And it uses JSX.
[00:02:31] Any questions on this stuff?
>> Speaker 2: There's a question in the line, I'm not sure if you answered it yet though.
>> Scott Moss: Which one? Does React Native actually compiles native code? Yeah, we'll get into exactly how React Native works. Yet you will have native code on your app. Yes, it is not some web view like Ionic.
[00:02:52] Like, you're gonna bring up a web view and if it's gonna run your code in there. There's no DOM in React Native. There's no DOM and that's the beauty of React. React itself is not, the React components itself are not attached to the DOM. They're completely separated from the DOM.
[00:03:06] In fact, there's React and then there's React Dom because they separated the two. So we're gonna be using the part of React that has nothing to do with the DOM in React Native which is just how you define components. That's pretty much it, it has absolutely nothing to do with the DOM.
[00:03:21] So yeah, this isn't tied to the web at all. It's just a way to create components, to create UIs, that's it. And in those UIs are then converted to native UIs by the React Native platform. So that make sense?
>> Speaker 2: Follow up.
[00:03:44] So we're gonna get into that on the next, after the first exercise. Good question though, yeah, there's no DOM, so like what the hell is it, yeah, we'll see. Cool, any question on this so far? No, no, you can just stop working down there.
>> Speaker 2: Getting close.
>> Scott Moss: You're getting close, okay.
[00:04:57] We're not gonna get in that cuz I don't think anybody raised their hand when they said they knew native development, so it's no point of even getting into that. It's cross platform so we can, all right, React Native is gonna run on Android and iOS. It started off at just iOS but then they got it working on Android which is pretty legit.
[00:05:15] And it also brings over some other good parts of the web. So it's not just the React component syntax like JSX and all the other awesome stuff, but things like flex boxes and some CSS stuff. All that stuff comes over to React Native, which is pretty dope in my opinion.
[00:05:31] So yeah, any questions on that stuff?
>> Scott Moss: Cool, all right, so now what we're gonna do is let's hop in to some React.
>> Speaker 2: Before you jump in.
>> Scott Moss: Yes
>> Speaker 2: Couple more questions on the line.
>> Scott Moss: Okay.
>> Speaker 2: The one that actually Charles' question, do you use tools like redux in React Native to manage state.
>> Scott Moss: Yes, you can. So the only thing that's gonna be specifically for React Native are going to be the components that we use. As far as like the application logic, you can use whatever you want as long as it's not attached to DOM. So redux is a great example of a state management solution that is not attached to the DOM.
[00:06:14] And in fact, we're gonna be using that today and tomorrow or you can roll your own. So pretty much any flux implementation you want to use that isn't attached to the DOM, which is pretty much all of them, you can use in React Native.