React Native (feat. Redux) React Components & React Native

[00:00:00]
>> [MUSIC]

[00:00:04]
>> 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?

[00:00:21]
>> Scott Moss: Everyone knows what web components are, it's like this new standard that's come in to the browser. It's like a widget for the web, pretty much, it's like a new API for widget for the web. So React components and other frameworks who also have components, it's just their philosophy to bring that same widget system to JavaScript frameworks.

[00:00:40] Yes?
>> 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:01:52] I remember when React was first announced they got booed off stage, forgot what conference it was. I can't remember but they got booed off stage cuz people's like, it's gross, you got XML in your JavaScript, that's terrible like they got booed off stage but now it's like JSX is like the best thing.

[00:02:08] People are like, man, I can't live without JSX. I think it's just funny, but I do love JSX because it's like writing JavaScript in your HTML instead of writing string templates so you get the syntax highlighting, you can just do regular JavaScript stuff like map. You'll see it's pretty simple if you never used React, it's literally just JavaScript for your templates which is amazing.

[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.
>> Scott Moss: Yes? If your JSX on web compiles JavaScript which injects things into the DOM, then what does JSX compiles on React Native?

[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:05] So, React Native. React Native, bridges native in JavaScript development, literally. It's literally a bridge, that's what React Native is. There's a bridge that sits there and it runs your JavaScript code on the JavaScript VM on the mobile device. So on iOS that's what JavaScript core on Android, that's V8.

[00:04:25] So it's gonna run your JavaScript on that VM there and there's a bridge that where is asynchronous communications happen between the native code and your JavaScript code. Whether that's you develop some native module that you wanna use in JavaScript or some JavaScript that you're gonna use natively, it just talks asynchronously like that.

[00:04:42] You can also expose native modules to JavaScript like I just said. So React Native shifts with tons of APIs and UI and stuff that you can use in React Native but you can also create your own if you know mobile development and there's tons of examples on how to do that.

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

[00:05:57]
>> 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.