1 00:00:00,000 --> 00:00:04,571 [MUSIC] 2 00:00:04,571 --> 00:00:09,400 Hi, my name is James, and this is the Treehouse React Panel. 3 00:00:09,400 --> 00:00:12,200 Thanks for joining us live on Facebook. 4 00:00:12,200 --> 00:00:13,550 We're gonna have our discussion. 5 00:00:13,550 --> 00:00:15,740 And then at the end of the panel discussion, 6 00:00:15,740 --> 00:00:17,170 we're going to answer your questions. 7 00:00:17,170 --> 00:00:22,840 So be sure to post them in the comment section on the Facebook Livestream. 8 00:00:22,840 --> 00:00:24,930 And we'll be taking a look at those and answering them later. 9 00:00:26,290 --> 00:00:31,100 Starting with introductions, at the end of the table, we have Jared Schaab. 10 00:00:31,100 --> 00:00:32,330 Welcome, Jared. 11 00:00:32,330 --> 00:00:36,240 Jared is a software developer with ten years of experience. 12 00:00:36,240 --> 00:00:39,510 He's worked at the Home Depot QuoteCenter for the past two years. 13 00:00:39,510 --> 00:00:41,740 And over the last several years, has focused more and 14 00:00:41,740 --> 00:00:43,440 more on front end development. 15 00:00:43,440 --> 00:00:46,296 And he really enjoys the seemingly limitless things, or 16 00:00:46,296 --> 00:00:48,569 the cool things that you can do with web apps. 17 00:00:48,569 --> 00:00:51,250 So welcome Jared, glad to have you here. 18 00:00:51,250 --> 00:00:52,410 >> Thanks. 19 00:00:52,410 --> 00:00:56,645 >> To his immediate left, in the middle of the table here, is Beau Palmquist. 20 00:00:56,645 --> 00:00:57,430 >> Hi. 21 00:00:57,430 --> 00:01:00,960 >> Beau is a software developer with eight years of experience. 22 00:01:00,960 --> 00:01:04,239 He started his front end development career with none other than 23 00:01:04,239 --> 00:01:05,582 Microsoft Silverlight. 24 00:01:05,582 --> 00:01:06,232 >> Yep. 25 00:01:06,232 --> 00:01:06,831 >> It's pretty cool. 26 00:01:06,831 --> 00:01:09,438 >> [LAUGH] >> We're not gonna be talking about 27 00:01:09,438 --> 00:01:11,602 Silverlight, today, but it's kind of a fun little fact. 28 00:01:11,602 --> 00:01:15,961 But he now enjoys working with React, amongst other JavaScript libraries. 29 00:01:15,961 --> 00:01:20,778 You're in the process of opensourcing a .NET microservice framework 30 00:01:20,778 --> 00:01:22,388 written in .NET Core. 31 00:01:22,388 --> 00:01:25,288 So that sounds like a very cool thing. 32 00:01:25,288 --> 00:01:27,721 >> Yeah. >> And you're transitioning into a dev ops 33 00:01:27,721 --> 00:01:29,340 platform stability role. 34 00:01:29,340 --> 00:01:33,210 With a focus on developer productivity and application delivery. 35 00:01:33,210 --> 00:01:34,640 So welcome, both, glad to have you here. 36 00:01:34,640 --> 00:01:35,485 >> Thank you, nice to be here. 37 00:01:35,485 --> 00:01:39,105 >> And then, to my immediate right is Joe Fraley, welcome, Joe. 38 00:01:39,105 --> 00:01:40,270 >> Hey. 39 00:01:40,270 --> 00:01:42,740 >> He's a software engineer at HPE, 40 00:01:42,740 --> 00:01:45,710 otherwise known as Hewlett Packard Enterprise. 41 00:01:45,710 --> 00:01:48,550 He's attended Portland Code School over a year ago. 42 00:01:48,550 --> 00:01:50,950 And is an active open source contributor and 43 00:01:50,950 --> 00:01:53,770 community member in Portland's JavaScript scene. 44 00:01:53,770 --> 00:01:56,114 We bump into each other occasionally at meetups and whatnot. 45 00:01:56,114 --> 00:01:57,790 >> Yeah, all the time. 46 00:01:57,790 --> 00:02:03,680 >> And volunteers with groups like XRAY.fm and the Animal Charity Evaluators. 47 00:02:03,680 --> 00:02:05,780 So welcome, Joe, glad to have you here today with us. 48 00:02:05,780 --> 00:02:06,910 >> Thank you. 49 00:02:06,910 --> 00:02:10,090 >> So we're going to do a little bit of the leveling of the playing field, so 50 00:02:10,090 --> 00:02:10,660 to speak. 51 00:02:10,660 --> 00:02:14,480 And start off by asking kind of a basic question, but what is React? 52 00:02:14,480 --> 00:02:17,900 So Beau, in your own words, what is React? 53 00:02:17,900 --> 00:02:22,020 >> Well, React is a JavaScript library that really helps 54 00:02:22,020 --> 00:02:24,510 facilitate building presentational components. 55 00:02:24,510 --> 00:02:28,510 So it focuses mostly on the view aspect of your application. 56 00:02:28,510 --> 00:02:33,262 And makes it very quick and easy to get started and start developing components 57 00:02:33,262 --> 00:02:35,999 for [CROSSTALK] >> [CROSSTALK] So very component-focused. 58 00:02:35,999 --> 00:02:37,898 >> Yep. 59 00:02:37,898 --> 00:02:40,800 >> And because of that, it's more concerned about the view. 60 00:02:40,800 --> 00:02:45,280 And it's less like a full-blown framework that does everything under the sun, 61 00:02:45,280 --> 00:02:45,815 so to speak. 62 00:02:45,815 --> 00:02:48,531 >> Yep. >> Okay, cool, so given that it's like 63 00:02:48,531 --> 00:02:53,830 more focused on the view and based around developing components. 64 00:02:53,830 --> 00:02:55,770 There's other pieces that come into play? 65 00:02:55,770 --> 00:02:57,610 Like is there an ecosystem around this then, 66 00:02:57,610 --> 00:02:59,160 when you want to develop applications? 67 00:03:00,730 --> 00:03:03,315 >> Yeah, I mean, it kind of depends, you can augment. 68 00:03:03,315 --> 00:03:04,815 If you wanna full-frame it, 69 00:03:04,815 --> 00:03:07,940 you're gonna have to augment it with some other frameworks. 70 00:03:07,940 --> 00:03:13,260 So things like Redux, and some of those things, and React Router. 71 00:03:13,260 --> 00:03:18,880 But specifically for the ecosystem, things like Babel or something like that. 72 00:03:18,880 --> 00:03:21,936 But yeah, you definitely will have a suite of tools and 73 00:03:21,936 --> 00:03:26,139 frameworks you'll need if you wanna build a full-fledged application. 74 00:03:26,139 --> 00:03:29,354 >> So Joe, for everyone's edification, what is Babel? 75 00:03:29,354 --> 00:03:31,378 >> [LAUGH] What is Babel? 76 00:03:31,378 --> 00:03:34,086 >> [LAUGH] >> Yeah, Babel's, I guess, 77 00:03:34,086 --> 00:03:35,518 what they call a transpolation tool. 78 00:03:35,518 --> 00:03:36,160 >> Okay. 79 00:03:36,160 --> 00:03:39,750 >> So it's this thing that you plug into your, 80 00:03:39,750 --> 00:03:42,290 it's a piece of software that you install from npm or something. 81 00:03:42,290 --> 00:03:45,910 And then you can run a script that 82 00:03:45,910 --> 00:03:50,114 tells it to read all of the JavaScript files you've written. 83 00:03:50,114 --> 00:03:50,648 >> Yep. >> And 84 00:03:50,648 --> 00:03:54,952 it will print out some translated files somewhere else. 85 00:03:54,952 --> 00:04:00,114 >> So if I want to use arrow functions, for instance, 86 00:04:00,114 --> 00:04:06,490 or some other ES2015 or newer feature, then I can do that. 87 00:04:06,490 --> 00:04:09,899 And then it's gonna transpile that down to ES5 or something else. 88 00:04:09,899 --> 00:04:10,738 >> Yeah. 89 00:04:10,738 --> 00:04:12,879 >> That's widely support across a wide variety of browsers. 90 00:04:12,879 --> 00:04:17,500 >> Right, so newer JavaScript features are the primary reason, I think, 91 00:04:17,500 --> 00:04:20,240 that people often use Babel tool, today. 92 00:04:20,240 --> 00:04:22,390 But you could theoretical use it for anything. 93 00:04:22,390 --> 00:04:25,030 >> So Babel's not absolutely required when you're doing React, but 94 00:04:25,030 --> 00:04:26,910 it's commonplace, it sounds like. 95 00:04:26,910 --> 00:04:27,733 >> Yeah, yeah. 96 00:04:27,733 --> 00:04:29,460 >> Okay, what else? 97 00:04:29,460 --> 00:04:32,280 What about bundling in modules and that sort of thing? 98 00:04:32,280 --> 00:04:34,090 >> You'd probably wanna be using webpack. 99 00:04:34,090 --> 00:04:34,630 >> Okay. 100 00:04:34,630 --> 00:04:36,789 >> It's kinda my tool of choice. 101 00:04:36,789 --> 00:04:41,418 I think you can also use things like Grunt or Gulp. 102 00:04:41,418 --> 00:04:42,153 >> Okay. >> Grunt 103 00:04:42,153 --> 00:04:44,981 is a little less popular these days, but- >> Okay, so 104 00:04:44,981 --> 00:04:49,300 the combination of React, Babel, and webpack is pretty common. 105 00:04:49,300 --> 00:04:52,599 You'll see that a lot probably, I think, in training and in online examples. 106 00:04:52,599 --> 00:04:53,107 >> Right. 107 00:04:53,107 --> 00:04:53,983 >> Okay. >> Yeah. 108 00:04:53,983 --> 00:04:58,150 >> And then you mentioned Redux, so what is Redux? 109 00:04:58,150 --> 00:05:02,478 >> Well, Redux helps you with managing the state side of things in your in your web 110 00:05:02,478 --> 00:05:03,338 application. 111 00:05:03,338 --> 00:05:06,932 So React doesn't really come with a concept of a store. 112 00:05:06,932 --> 00:05:11,020 It's just, you feed components property or prompts. 113 00:05:11,020 --> 00:05:13,360 And then they just take those and display that data. 114 00:05:13,360 --> 00:05:14,018 >> So let's take a step back. 115 00:05:14,018 --> 00:05:14,990 >> Sure. 116 00:05:14,990 --> 00:05:17,360 >> So give me an example of state in a component. 117 00:05:18,670 --> 00:05:21,590 >> So I guess a component has a local state that it will manage. 118 00:05:21,590 --> 00:05:24,287 But Redux manages more along the application-wide 119 00:05:24,287 --> 00:05:25,056 store- >> So 120 00:05:25,056 --> 00:05:28,258 like a local state might be like if you have like a start/stop button 121 00:05:28,258 --> 00:05:29,503 flipping back and forth. 122 00:05:29,503 --> 00:05:32,103 >> Yeah. >> Then that component is gonna know what 123 00:05:32,103 --> 00:05:33,461 button to display. 124 00:05:33,461 --> 00:05:35,917 >> Exactly, it'll manage its own state, so typically, 125 00:05:35,917 --> 00:05:37,648 more visual things will happen there. 126 00:05:37,648 --> 00:05:40,256 Or like, I typically use, for like forms, 127 00:05:40,256 --> 00:05:43,790 I'll keep a lot of stuff in a local state in the component. 128 00:05:43,790 --> 00:05:46,380 And then that's pretty much what that's good for. 129 00:05:46,380 --> 00:05:51,880 >> So state outside of local components then, give me an example of that. 130 00:05:51,880 --> 00:05:54,950 >> Sure, if you've got a lot of components and 131 00:05:54,950 --> 00:05:56,970 they're gonna need to share some piece of data. 132 00:05:56,970 --> 00:05:59,390 And you wanna keep that kind of centralized and 133 00:05:59,390 --> 00:06:01,710 organized, Redux makes that easy. 134 00:06:01,710 --> 00:06:05,470 And it does it in a way that will maintain it in an immutable fashion as long as 135 00:06:05,470 --> 00:06:07,175 you're doing things correctly. 136 00:06:07,175 --> 00:06:07,740 >> Right. 137 00:06:07,740 --> 00:06:12,260 >> So imagine you've got a couple of components that have dependency on 138 00:06:12,260 --> 00:06:14,180 a user's profile or something like. 139 00:06:14,180 --> 00:06:16,780 This one might display an image, this one might be their name. 140 00:06:16,780 --> 00:06:19,736 But you have one piece of data stored in ones in the store. 141 00:06:19,736 --> 00:06:21,988 >> One source of [CROSSTALK] >> Yeah, 142 00:06:21,988 --> 00:06:25,240 then you can basically feed it to both of those components and keep it in sync. 143 00:06:25,240 --> 00:06:28,920 >> Okay, I'm sure we'll circle back on Redux a little bit more later on. 144 00:06:28,920 --> 00:06:31,958 Is there any other pieces to the React ecosystem? 145 00:06:31,958 --> 00:06:36,030 Anything else that's worth mentioning early on here in this conversation 146 00:06:36,030 --> 00:06:36,745 that comes to mind? 147 00:06:36,745 --> 00:06:38,080 Maybe that covers it. 148 00:06:38,080 --> 00:06:40,160 >> Well, I mean, it's maybe not just React, specific. 149 00:06:40,160 --> 00:06:42,370 But definitely linting plays a pretty big role. 150 00:06:42,370 --> 00:06:48,050 To make sure that you can run some linting rules against your JSX, 151 00:06:48,050 --> 00:06:48,930 which I know you'll get to. 152 00:06:48,930 --> 00:06:52,510 You can actually evaluate your components at compile time. 153 00:06:52,510 --> 00:06:57,350 >> So give me an example, so Jared, give me an example of linting. 154 00:06:57,350 --> 00:07:00,430 Like if I've never done linting before, how would you explain that to me? 155 00:07:00,430 --> 00:07:02,970 >> Linting is basically just a way for 156 00:07:02,970 --> 00:07:08,000 you to apply a common style across your entire code base. 157 00:07:08,000 --> 00:07:10,150 >> Okay, so if I'm using single-quotes, but 158 00:07:10,150 --> 00:07:12,819 our standard is we use double-quotes to note strings. 159 00:07:12,819 --> 00:07:15,972 >> Right, and also when you run your linting task or process, 160 00:07:15,972 --> 00:07:18,790 depending on how you have that all wired up. 161 00:07:18,790 --> 00:07:21,340 It'll give you an exception or a warning in your console, and 162 00:07:21,340 --> 00:07:22,800 say, hey, this is not right. 163 00:07:22,800 --> 00:07:25,000 You're not following your linting rules. 164 00:07:25,000 --> 00:07:26,430 >> Got it, okay, cool. 165 00:07:26,430 --> 00:07:28,605 >> I think as long as we're talking about the ecosystem, though. 166 00:07:28,605 --> 00:07:35,560 It's worth pointing out something that can be confusing for people using other tools. 167 00:07:35,560 --> 00:07:40,710 And it's already been said that React is a library as opposed to a framework. 168 00:07:40,710 --> 00:07:44,030 And I think it's kind of confusing what that means. 169 00:07:44,030 --> 00:07:45,040 >> Mm, sure. 170 00:07:45,040 --> 00:07:48,430 >> Like that's what this ecosystem talk is really about, I think, is like, okay. 171 00:07:48,430 --> 00:07:52,720 Well, if React isn't a framework, then what else do I need? 172 00:07:52,720 --> 00:07:55,140 And I think whatever the answer to that question is, 173 00:07:55,140 --> 00:07:58,490 is like the difference in a library and a framework. 174 00:07:58,490 --> 00:08:02,090 >> Right, cuz it leaves some of those decisions unanswered, basically. 175 00:08:02,090 --> 00:08:05,330 There might be recommendations in some cases, I would guess? 176 00:08:05,330 --> 00:08:09,260 >> Right, so like a great example of this is if you have a web application that 177 00:08:09,260 --> 00:08:14,090 needs to render different views, depending on what's in the URL. 178 00:08:14,090 --> 00:08:16,165 So we sometimes call that routing in web apps. 179 00:08:16,165 --> 00:08:19,491 Angular or Ember, if you're using those tools, 180 00:08:19,491 --> 00:08:22,272 they have built-in resources for that. 181 00:08:22,272 --> 00:08:25,660 There's just a way to do that when you're using the framework. 182 00:08:25,660 --> 00:08:29,050 Whereas React doesn't have any opinion about how that works. 183 00:08:29,050 --> 00:08:31,850 If you install React, there's nothing there that will help you do that, 184 00:08:33,310 --> 00:08:35,180 aside from like the paradigm, itself. 185 00:08:35,180 --> 00:08:37,459 So you might need other tools like React Router. 186 00:08:37,459 --> 00:08:41,150 So a totally different tool in the ecosystem you install and 187 00:08:41,150 --> 00:08:43,720 learn to use, in addition to React. 188 00:08:43,720 --> 00:08:44,550 >> So that's interesting. 189 00:08:44,550 --> 00:08:48,890 So it's less opinionated about the the all-up picture and 190 00:08:48,890 --> 00:08:49,890 all the different pieces. 191 00:08:49,890 --> 00:08:52,820 So that gives you more choices and more flexibility. 192 00:08:52,820 --> 00:08:53,540 But I would imagine, 193 00:08:53,540 --> 00:08:56,946 when you're new to React, that might also create some challenges. 194 00:08:56,946 --> 00:08:57,907 >> [LAUGH] >> Right? 195 00:08:57,907 --> 00:08:58,687 >> Yeah. >> Yeah, 196 00:08:58,687 --> 00:09:02,046 I think that's probably one of the scariest things 197 00:09:02,046 --> 00:09:07,390 about picking up React is it feels like you can't just pick up React. 198 00:09:07,390 --> 00:09:10,350 I guess I have to learn to use Immutable, whatever that is, 199 00:09:10,350 --> 00:09:13,119 and Redux, Flux, or something. 200 00:09:13,119 --> 00:09:16,104 >> Right, okay, so let's circle back a little bit. 201 00:09:16,104 --> 00:09:19,113 Let's talk a little bit more about how you've used React. 202 00:09:19,113 --> 00:09:21,815 Cuz I definitely want to dive into the learning aspect of it. 203 00:09:21,815 --> 00:09:24,495 And some of those dependencies and where do you start. 204 00:09:24,495 --> 00:09:28,243 But for now, I'd like to kind of steer the conversation back towards you guys's 205 00:09:28,243 --> 00:09:31,370 personal experience with using React. 206 00:09:31,370 --> 00:09:33,740 So Jared, you're using React professionally? 207 00:09:33,740 --> 00:09:35,035 >> Mm-hm >> That's correct? 208 00:09:35,035 --> 00:09:36,907 >> That's correct. >> Can you talk a little bit about 209 00:09:36,907 --> 00:09:38,467 like how you're using it today? 210 00:09:38,467 --> 00:09:43,398 >> Well, right now, we are using it to create our web application 211 00:09:43,398 --> 00:09:46,852 that will talk to a microservices back end. 212 00:09:46,852 --> 00:09:52,027 And our primary use case for that is kind of a dev ops dashboard. 213 00:09:52,027 --> 00:09:55,564 And we basically are bringing all these different views and 214 00:09:55,564 --> 00:09:59,537 components together that give us kind of just a, we call it pulse. 215 00:09:59,537 --> 00:10:03,540 But just kind of a little bit of a heartbeat on 216 00:10:03,540 --> 00:10:05,550 All of our market services now they're doing it. 217 00:10:05,550 --> 00:10:09,620 >> Now, have you used other kinds of front end development frameworks in libraries 218 00:10:09,620 --> 00:10:10,770 before using react? 219 00:10:10,770 --> 00:10:17,550 >> I have used knockout and sorry, I haven't used that with react. 220 00:10:17,550 --> 00:10:23,670 >> Okay, no I meant, in terms of like how does using react feel different to you, 221 00:10:23,670 --> 00:10:26,150 than other other options right. 222 00:10:26,150 --> 00:10:29,610 >> Yeah, I so I have used knock out that, 223 00:10:29,610 --> 00:10:32,810 I could it been just lack of knowledge on my behalf. 224 00:10:32,810 --> 00:10:35,190 But it definitely feels like it lead you down. 225 00:10:36,300 --> 00:10:39,930 More of a spaghetti code type code base. 226 00:10:39,930 --> 00:10:43,720 >> So reacts kind of helps you keep your code more well organized. 227 00:10:43,720 --> 00:10:49,334 >> Yeah, yeah, because it lends itself to writing your views into components, 228 00:10:49,334 --> 00:10:50,320 reusable components. 229 00:10:50,320 --> 00:10:54,620 And with the one way data flow, you don't really have to worry about okay, 230 00:10:54,620 --> 00:10:57,280 well this thing over here is setting my state, 231 00:10:57,280 --> 00:11:00,029 and this thing over here is setting this state. 232 00:11:00,029 --> 00:11:04,902 And which levers are pulled at this specific point in time. 233 00:11:04,902 --> 00:11:10,200 >> Yeah, so one of the things that I have heard, and I think I experienced 234 00:11:10,200 --> 00:11:15,080 this myself when I was starting to learn React is, your initial reaction to JSX. 235 00:11:17,920 --> 00:11:20,030 >> Well. >> Well, maybe we should explain what JSX 236 00:11:20,030 --> 00:11:24,540 is first before we talk about, like >> So what is JSX? 237 00:11:24,540 --> 00:11:26,666 >> So, JSX is- >> Good luck. 238 00:11:26,666 --> 00:11:32,030 >> Yeah, It's difficult to kind of sum up in words, but it's basically a formatter 239 00:11:32,030 --> 00:11:36,170 of markup of sorts that looks very much like HTML, but 240 00:11:36,170 --> 00:11:38,617 it's actually all in JavaScript and there- >> So, 241 00:11:38,617 --> 00:11:41,572 that's sorta that new jerk reaction thing? 242 00:11:41,572 --> 00:11:43,400 >> Yeah. >> So, you just said that 243 00:11:43,400 --> 00:11:44,540 You're writing markup. 244 00:11:44,540 --> 00:11:45,710 >> It looks like it but it. 245 00:11:45,710 --> 00:11:46,320 >> Okay. >> So, 246 00:11:46,320 --> 00:11:50,770 you look if you were to open up a JSX file you'd see what looks like HTML, 247 00:11:50,770 --> 00:11:55,640 but if you look very closely you'd start to notice some very minor differences, 248 00:11:55,640 --> 00:11:58,930 so things like you don't use class, you use class name. 249 00:11:58,930 --> 00:12:01,900 So then, you start to realize it's actually an HTML, 250 00:12:01,900 --> 00:12:04,980 it gets pumped through something that generates HTML. 251 00:12:04,980 --> 00:12:09,120 So, It's kind of, it's an intermediate step to getting to HTML. 252 00:12:10,520 --> 00:12:15,200 >> Right, so, you might have an initial reaction to like, 253 00:12:15,200 --> 00:12:16,610 this doesn't make any sense. 254 00:12:16,610 --> 00:12:19,200 Isn't this like polluting my JavaScript or something, 255 00:12:19,200 --> 00:12:22,730 but It turns out that it's not it doesn't turn out that way, right? 256 00:12:22,730 --> 00:12:26,500 >> No, I actually really liked after a while I loved that it was JavaScript, 257 00:12:26,500 --> 00:12:28,970 because then I could refrain back to linking thing, 258 00:12:28,970 --> 00:12:34,290 I could apply rules into JSX it could start evaluating those things. 259 00:12:34,290 --> 00:12:36,820 >> And find some stuff that you wouldn't necessarily find if you're familiar with 260 00:12:36,820 --> 00:12:38,840 Angular with like, templates, now you can. 261 00:12:38,840 --> 00:12:42,020 They'll like, that you usually had to wait until run time, and 262 00:12:42,020 --> 00:12:44,760 then you'd start to see bindings not working, or something not happening. 263 00:12:44,760 --> 00:12:48,650 Whereas with JSX you could kinda pump it through all kinds of analyzers and 264 00:12:48,650 --> 00:12:52,390 linting, and see if things are gonna kinda where you wanna behave the way you want 265 00:12:52,390 --> 00:12:53,290 even higher, you can run it. 266 00:12:53,290 --> 00:12:55,830 >> I imagine there's probably some some 267 00:12:55,830 --> 00:13:00,140 added benefits to not have the context switch, between like a file and 268 00:13:00,140 --> 00:13:02,300 like is that a template file then back and forth, right? 269 00:13:05,100 --> 00:13:08,404 >> So, JSX is another is the other reason that most 270 00:13:08,404 --> 00:13:11,140 people are using double I think today. 271 00:13:11,140 --> 00:13:12,405 >> okay, >> It's just point 272 00:13:12,405 --> 00:13:14,968 >> So JSX isn't Itself JavaScript like, 273 00:13:14,968 --> 00:13:19,760 it's got like, it's got characters that are not valid JavaScript. 274 00:13:19,760 --> 00:13:22,330 >> Yup. >> Angle brackets, specifically. 275 00:13:22,330 --> 00:13:22,980 >> Yeah. 276 00:13:22,980 --> 00:13:25,169 >> Okay. >> That's the part of it but 277 00:13:25,169 --> 00:13:28,607 it does transpired to valid JavaScript. 278 00:13:28,607 --> 00:13:32,527 And what a chance piles to is like if you go on you like right just like 279 00:13:32,527 --> 00:13:34,557 file on your computer at home, and 280 00:13:34,557 --> 00:13:38,980 then you like run up your babble and you look at what came out the other side. 281 00:13:40,170 --> 00:13:41,360 What comes out the other side, 282 00:13:41,360 --> 00:13:45,520 are just some might react functions that create paragraphs. 283 00:13:45,520 --> 00:13:47,750 >> So you could just, if you knew that API, 284 00:13:47,750 --> 00:13:52,460 you could just write that code yourself and forego using, it's not a requirement. 285 00:13:52,460 --> 00:13:54,030 In other words, to use JSX. 286 00:13:54,030 --> 00:13:55,830 >> That is true, yes. 287 00:13:55,830 --> 00:13:56,930 >> Okay, that's cool. 288 00:13:58,340 --> 00:14:01,680 >> So sorry, you didn't like JSX when you first saw it. 289 00:14:01,680 --> 00:14:03,468 >> Well, are you asking, Jared? 290 00:14:03,468 --> 00:14:04,000 >> No. >> Sorry. 291 00:14:04,000 --> 00:14:05,120 >> Are you asking me or him? 292 00:14:05,120 --> 00:14:05,800 >> I don't know. 293 00:14:05,800 --> 00:14:07,720 It's sounded like someone didn't like it at first. 294 00:14:07,720 --> 00:14:09,950 >> No, it was me pushing on that because I've read, 295 00:14:09,950 --> 00:14:14,530 and then I think I had that reaction a little bit, that it feels like you're 296 00:14:14,530 --> 00:14:18,700 commingling something that maybe ought not to be brought together. 297 00:14:18,700 --> 00:14:23,496 Though I read something recently that talked about how the inverse is true. 298 00:14:23,496 --> 00:14:25,741 Today, even though we don't really recognize it, 299 00:14:25,741 --> 00:14:28,470 we've been putting JavaScript in our HTML. 300 00:14:28,470 --> 00:14:30,680 >> With data attributes and stuff? 301 00:14:30,680 --> 00:14:31,550 >> Yep, yep, yeah. 302 00:14:31,550 --> 00:14:34,270 >> So, it's actually better to go the other way, for 303 00:14:34,270 --> 00:14:37,100 all the reasons that Beau was pointing out. 304 00:14:37,100 --> 00:14:38,310 So- >> Yeah, I personally did like it, 305 00:14:38,310 --> 00:14:41,850 I was just kind of playing the advocate there, 306 00:14:41,850 --> 00:14:42,527 so- >> [LAUGH] 307 00:14:42,527 --> 00:14:43,580 >> Yeah, absolutely. 308 00:14:43,580 --> 00:14:47,600 >> We've touched upon some of the benefits of React, 309 00:14:47,600 --> 00:14:49,670 what are some other things that come to mind? 310 00:14:49,670 --> 00:14:51,480 Like I've heard about this thing called a virtual DOM. 311 00:14:52,800 --> 00:14:55,030 Talk about that a little bit, who he wants to take that one? 312 00:14:56,100 --> 00:14:56,705 >> Good talk. >> Joe? 313 00:14:56,705 --> 00:14:57,930 >> [LAUGH] >> You started to laugh, 314 00:14:57,930 --> 00:14:59,200 that means it's you. 315 00:14:59,200 --> 00:15:00,590 >> Yeah. 316 00:15:00,590 --> 00:15:01,860 >> The virtual DOM. 317 00:15:01,860 --> 00:15:02,880 So at its core, 318 00:15:02,880 --> 00:15:08,610 the virtual DOM is Well maybe it's easier to start with the dom itself. 319 00:15:08,610 --> 00:15:12,630 So, the DOM is just this like, the document object model. 320 00:15:12,630 --> 00:15:16,140 So, a representation of what your program looks like in the browser. 321 00:15:16,140 --> 00:15:17,922 So, when you're scrolling through a webpage it's [CROSSTALK]. 322 00:15:17,922 --> 00:15:19,511 >> It has a paragraph, and 323 00:15:19,511 --> 00:15:22,990 inside the paragraph might be a spam or >> All right. 324 00:15:22,990 --> 00:15:26,250 >> Yup. >> So, the virtual DOM is like, 325 00:15:26,250 --> 00:15:29,760 version of that that's held in memory, like a program is running. 326 00:15:29,760 --> 00:15:34,310 And the advantage of that is that you can make comparisons against it, 327 00:15:34,310 --> 00:15:37,410 and do all kinds of logic in between them. 328 00:15:37,410 --> 00:15:40,910 So, the DOM gets put out on your screen in front of you and 329 00:15:40,910 --> 00:15:44,130 the virtual DOM is like something in between. 330 00:15:44,130 --> 00:15:45,620 >> So, why go to the trouble? 331 00:15:45,620 --> 00:15:48,110 I mean is the DOM slow or something? 332 00:15:48,110 --> 00:15:50,750 Is that is that the motivation there? 333 00:15:50,750 --> 00:15:54,280 Yeah, maybe- >> Sure, I mean paint operations in 334 00:15:54,280 --> 00:15:57,900 the DOM are just, if you start to analyze it they take up tons of cycles. 335 00:15:57,900 --> 00:16:02,170 So React identified, well if we can just pick portions that need to update 336 00:16:02,170 --> 00:16:05,280 using the virtual DOM, then it will improve performance. 337 00:16:05,280 --> 00:16:10,620 >> Well and a lot of Web applications before were pretty much using jQuery 338 00:16:10,620 --> 00:16:15,180 was kinda the go to and I mean depending on how you did your selectors and 339 00:16:15,180 --> 00:16:19,070 stuff you could be selecting and changing huge portions. 340 00:16:19,070 --> 00:16:23,720 It's almost kinda like with SQL any framework or any of those ERMs. 341 00:16:23,720 --> 00:16:28,700 Like if you write your query wrong you're gonna doing some nasty non performance 342 00:16:28,700 --> 00:16:29,220 stuff. 343 00:16:29,220 --> 00:16:31,540 And it's the same thing with your jQuery selectors. 344 00:16:31,540 --> 00:16:32,110 >> Right. 345 00:16:32,110 --> 00:16:32,640 >> So that's cool. 346 00:16:32,640 --> 00:16:38,440 So, when you're using JSX or this API, if you're writing pure JavaScript. 347 00:16:38,440 --> 00:16:41,460 You're actually manipulating the virtual DOM, right? 348 00:16:41,460 --> 00:16:45,170 And you can kinda like probably not concern yourself as much, 349 00:16:45,170 --> 00:16:48,240 with what the underlying operations are doing. 350 00:16:48,240 --> 00:16:49,470 Is that for the most part true? 351 00:16:50,840 --> 00:16:51,830 >> Yes, and yes. 352 00:16:53,800 --> 00:16:58,330 >> So, there might be times when there may be problems that arise, right? 353 00:16:58,330 --> 00:17:03,430 >> You can still run in the case where you're updating a lot more of your DOM, 354 00:17:03,430 --> 00:17:07,240 then you want to and not to dive too deep into it at the sure. 355 00:17:07,240 --> 00:17:11,945 You can't tap into some of your Component Life Cycle events, which will allow you to 356 00:17:11,945 --> 00:17:15,355 kinda dictate whether a component needs to update or not. 357 00:17:15,355 --> 00:17:20,070 >> Okay,so if you had a case where something is not optimal then you can 358 00:17:20,070 --> 00:17:22,720 basically hint or help React out and say, 359 00:17:22,720 --> 00:17:25,570 look I know this doesn't need to be rendered in this point. 360 00:17:25,570 --> 00:17:26,345 Right. 361 00:17:26,345 --> 00:17:26,910 >> Well that's cool. 362 00:17:28,560 --> 00:17:31,440 So, when I'm first starting to learn React, 363 00:17:31,440 --> 00:17:34,920 I'm probably gonna do a personal project on my own time. 364 00:17:34,920 --> 00:17:39,280 Is there differences between like how I may wanna get started learning React 365 00:17:39,280 --> 00:17:45,860 versus the kind of work that Beau, you, and Jared are doing professionally? 366 00:17:45,860 --> 00:17:48,070 You guys maybe wanna talk about that a little bit, 367 00:17:48,070 --> 00:17:51,620 like >> Yeah. 368 00:17:51,620 --> 00:17:53,850 >> So, if you were starting a personal project, 369 00:17:53,850 --> 00:17:55,060 let me phrase that question differently, 370 00:17:55,060 --> 00:17:58,660 if you were starting a personal project, how would you start that? 371 00:17:58,660 --> 00:18:00,640 Like, would you immediately bring in Webpack, 372 00:18:00,640 --> 00:18:03,010 would you immediately bring in Babel? 373 00:18:03,010 --> 00:18:08,180 Or is there a way to do this incrementally that makes it easier to get going? 374 00:18:08,180 --> 00:18:10,237 >> I know when I first started, 375 00:18:10,237 --> 00:18:14,190 like all that stuff seemed very daunting it was scary. 376 00:18:14,190 --> 00:18:15,207 >> [LAUGH] >> Yeah. 377 00:18:15,207 --> 00:18:18,968 >> I was a little scared because you bring in this whole webpack thing, right, and it 378 00:18:18,968 --> 00:18:22,860 just feels like you kinda start going down all these different little rabbit holes. 379 00:18:22,860 --> 00:18:25,380 It's like okay web packing and you start learning about web packing. 380 00:18:25,380 --> 00:18:29,010 And then okay, I need babble and you start going down this this rabbit hole and 381 00:18:29,010 --> 00:18:32,820 then also and you realize you can't learn these things but I have no idea but React. 382 00:18:32,820 --> 00:18:34,860 >> Right. >> This is trying to bite off yeah. 383 00:18:34,860 --> 00:18:40,180 >> I mean but the cool thing now that React has been kinda gaining a lot 384 00:18:40,180 --> 00:18:45,908 more popularity among the development community is stuff like open. 385 00:18:45,908 --> 00:18:49,240 And that kinda stuff that actually support out of the box so 386 00:18:49,240 --> 00:18:53,116 you can actually just go in and start Into co-pending create a new, 387 00:18:53,116 --> 00:18:55,843 I don't know what it's called actually a pen? 388 00:18:55,843 --> 00:18:56,415 A new pen? 389 00:18:56,415 --> 00:18:56,980 >> [LAUGH] >> And 390 00:18:56,980 --> 00:18:59,020 so you can create a pen and- >> Yeah. 391 00:18:59,020 --> 00:19:02,780 >> Say, I want to do React, and you can just start writing JSX. 392 00:19:02,780 --> 00:19:03,410 >> Absolutely. 393 00:19:03,410 --> 00:19:04,330 >> And creating components? 394 00:19:04,330 --> 00:19:07,650 >> Yeah, which is we need >> That is cool. 395 00:19:07,650 --> 00:19:11,330 >> I think on that note, and to the point of the virtual DOM, 396 00:19:11,330 --> 00:19:13,750 as when you start learning React. 397 00:19:13,750 --> 00:19:19,400 One of the hardest things about it is that if you're coming 398 00:19:19,400 --> 00:19:24,640 from a different world, where the way that you do things on a web page is you say, 399 00:19:24,640 --> 00:19:28,200 hey jQuery, append this button to the page now. 400 00:19:28,200 --> 00:19:31,190 >> Right, or hey jQuery, add this class to the button now, 401 00:19:31,190 --> 00:19:34,962 cuz the users logged in or >> If you're using other frameworks like 402 00:19:34,962 --> 00:19:39,220 the backbone, was if you have had a library for 403 00:19:39,220 --> 00:19:43,340 this, but ultimately you would just like plug in some jQuery at different points. 404 00:19:43,340 --> 00:19:46,780 So, in that in that world the way that you'd make changes and 405 00:19:46,780 --> 00:19:51,380 see how stuff works, is you tell your program do this thing now. 406 00:19:51,380 --> 00:19:51,966 >> Imperative. 407 00:19:51,966 --> 00:19:53,970 >> And then you go and look at it, and so you did it. 408 00:19:53,970 --> 00:19:57,960 >> So, that you're touching upon the whole imperative vs declarative Right, 409 00:19:57,960 --> 00:19:58,800 a little bit? 410 00:19:58,800 --> 00:19:59,430 >> Yeah, exactly. 411 00:19:59,430 --> 00:20:04,400 So to me at least, one of the core different philosophies of React, 412 00:20:04,400 --> 00:20:07,350 one of the reasons that it's gotten so much attention and adoption, 413 00:20:07,350 --> 00:20:13,200 is that it encourages you to stop thinking that way about writing your programs. 414 00:20:13,200 --> 00:20:19,060 So what it wants you to do is say okay, when the state of my 415 00:20:19,060 --> 00:20:24,040 application is such, when a user is logged in, when a mouse is hovering over this 416 00:20:24,040 --> 00:20:29,400 part of the page whatever the state of your application means. 417 00:20:29,400 --> 00:20:31,366 If it's 4 a.m. 418 00:20:31,366 --> 00:20:32,630 Whatever. 419 00:20:32,630 --> 00:20:34,250 Then the page should look like so 420 00:20:34,250 --> 00:20:38,090 and you give a description of how the page under those conditions. 421 00:20:38,090 --> 00:20:38,680 >> Okay. >> And then 422 00:20:39,680 --> 00:20:41,540 >> Reacts just like does some stuff with 423 00:20:41,540 --> 00:20:43,990 the virtual DOM to make sure that happens, >> Right, 424 00:20:43,990 --> 00:20:45,300 >> And you don't that 425 00:20:45,300 --> 00:20:47,500 yourself manually, usually. 426 00:20:47,500 --> 00:20:50,020 So when you start learning React I think hardship 427 00:20:50,020 --> 00:20:53,280 is wanting to see things happen right away and 428 00:20:53,280 --> 00:20:56,920 if you have this intuition of I wanna see things change I gonna make them change, 429 00:20:56,920 --> 00:21:02,550 then that can be that can be an obstacle, it can be confusing about where to began. 430 00:21:02,550 --> 00:21:03,440 Interesting. 431 00:21:03,440 --> 00:21:04,050 >> Well. 432 00:21:04,050 --> 00:21:07,010 Real quick you had mentioned the so 433 00:21:07,010 --> 00:21:11,470 the state and the visual state in the way I think about that is that react is made 434 00:21:11,470 --> 00:21:15,220 is the state of your UI basically deterministic based on something so 435 00:21:15,220 --> 00:21:19,250 you can actually go in and feed it specific state information and 436 00:21:19,250 --> 00:21:23,850 it'll look and behave the same way, which is a very powerful feature. 437 00:21:23,850 --> 00:21:24,930 So. 438 00:21:24,930 --> 00:21:28,820 >> So, we mentioned components earlier in the conversation. 439 00:21:28,820 --> 00:21:33,630 So, when you're building a react app, you're thinking in terms of components? 440 00:21:33,630 --> 00:21:34,380 Is that correct? 441 00:21:36,060 --> 00:21:40,690 >> Yeah, for the most part I think the many you start bringing in some Redux and 442 00:21:40,690 --> 00:21:43,610 other things some new terms will start to turn off like pure component and 443 00:21:43,610 --> 00:21:48,300 container and stuff like that, but yes still trying to compantice the UI into 444 00:21:49,300 --> 00:21:51,879 small little pieces and then you can mix and match. 445 00:21:51,879 --> 00:21:55,150 >> Are there like, even without Redux for instance and 446 00:21:55,150 --> 00:21:58,450 so we're leaving the conversation of containers out for the minute. 447 00:21:58,450 --> 00:22:00,924 Are there different types of components? 448 00:22:00,924 --> 00:22:03,540 >> Yeah. >> I think there are two main ones 449 00:22:03,540 --> 00:22:06,556 are stateful components and non-stateful components. 450 00:22:06,556 --> 00:22:10,370 >> Okay, so a component that needs to keep track of some sort of local state would be 451 00:22:10,370 --> 00:22:14,290 a stateful component, but some components just okay, so 452 00:22:14,290 --> 00:22:16,730 what would be an example of a nonstateful? 453 00:22:16,730 --> 00:22:19,630 >> So stateless components are ones that are basically implemented 454 00:22:19,630 --> 00:22:21,780 as a pure function they're not going to have any side effects. 455 00:22:21,780 --> 00:22:24,110 You just feed in some props and they're going to, 456 00:22:24,110 --> 00:22:26,620 you know, they're not going to make an API call. 457 00:22:26,620 --> 00:22:29,590 They're not going to do any kind of weird stuff inside of that component. 458 00:22:29,590 --> 00:22:32,290 It's it's going to be highly, 459 00:22:33,930 --> 00:22:36,610 it's very likely you'll know what's going to happen when you give it data so 460 00:22:36,610 --> 00:22:39,570 everything's encapsulated very tightly into that function. 461 00:22:39,570 --> 00:22:42,712 >> So define pure function for me. 462 00:22:42,712 --> 00:22:46,490 [LAUGH] >> Pure function as one that takes some 463 00:22:46,490 --> 00:22:52,000 input and have some output and given the same input you always get the same output. 464 00:22:52,000 --> 00:22:52,680 >> So 465 00:22:52,680 --> 00:22:57,000 that have to do with referential integrity >> Transparency, excuse me. 466 00:22:57,000 --> 00:22:58,295 >> I don't know, does it? 467 00:22:58,295 --> 00:23:00,410 [LAUGH] >> You guys ever hear of that? 468 00:23:00,410 --> 00:23:02,160 >> No, I've not heard that term. 469 00:23:02,160 --> 00:23:07,050 >> So I believe that, with a pure function, instead of calling the function 470 00:23:07,050 --> 00:23:09,750 you can just replace it with whatever the expected result would be. 471 00:23:09,750 --> 00:23:14,030 And the rest of your application, >> It's essentially yes. 472 00:23:14,030 --> 00:23:15,720 Yeah, it is interpreted yeah, right. 473 00:23:15,720 --> 00:23:20,450 So, it's predictable results right that there isn't any other external state that 474 00:23:20,450 --> 00:23:24,540 that's changing how whatever that functions doing. 475 00:23:24,540 --> 00:23:27,440 It's not going to be influenced by something other than what I pass to 476 00:23:27,440 --> 00:23:28,920 it in terms of arguments. 477 00:23:28,920 --> 00:23:30,800 >> So yes an example for, so 478 00:23:30,800 --> 00:23:35,000 an example of our thing you might want component tossed in your web app is like. 479 00:23:35,000 --> 00:23:36,880 You might have buttons on your page. 480 00:23:36,880 --> 00:23:39,560 You might have buttons all over the place. 481 00:23:39,560 --> 00:23:41,100 >> Right. >> And they might do different things and 482 00:23:41,100 --> 00:23:45,850 look different ways, but they might in the end have some things in common. 483 00:23:45,850 --> 00:23:49,500 Like their shape may be, and the fact that they take text, and 484 00:23:49,500 --> 00:23:52,050 the fact that when you click them something happens. 485 00:23:52,050 --> 00:23:54,810 And so, you can capture all of that into a single function and 486 00:23:54,810 --> 00:23:57,860 react you can say here is a button thing, and 487 00:23:57,860 --> 00:24:00,950 here's what it does and then you can import that and use it all over your app. 488 00:24:00,950 --> 00:24:04,050 Pass it different props, different parameters basically. 489 00:24:04,050 --> 00:24:06,540 Will change how that button looks in different places. 490 00:24:06,540 --> 00:24:10,210 >> So what is that component, for anyone who hasn't done React, 491 00:24:10,210 --> 00:24:13,230 when you define a component and then I'm using it in another component. 492 00:24:13,230 --> 00:24:15,380 What does that look like from a code perspective? 493 00:24:17,550 --> 00:24:20,450 >> So well basically we're going to be doing is importing it or 494 00:24:20,450 --> 00:24:24,840 requiring it into your whatever component you're going to bring it into and 495 00:24:24,840 --> 00:24:27,690 then that's when you're going to be using your J.S. X. 496 00:24:27,690 --> 00:24:32,080 Syntax and you'll basically be writing -- let's say my components to and so 497 00:24:32,080 --> 00:24:38,550 are you writing a and bracket through so that it looks just like a custom element. 498 00:24:38,550 --> 00:24:44,310 Just like HTML stepped inside a very considered day of it's food in this case. 499 00:24:44,310 --> 00:24:46,130 >> Nice. Well that makes it easy to read and 500 00:24:46,130 --> 00:24:50,060 write so if you have all these components you can buy into gathered in the name 501 00:24:50,060 --> 00:24:54,442 of the laws provided in the script to, 502 00:24:54,442 --> 00:24:58,537 that's cool. 503 00:24:58,537 --> 00:25:03,460 So components, we talk about stateless components, Staple components. 504 00:25:03,460 --> 00:25:06,460 Let's just stick on that a little bit more so. 505 00:25:06,460 --> 00:25:11,440 << I was just going say, you know we talked a lot about state in about data for 506 00:25:11,440 --> 00:25:14,560 your components, but I think it's important to also note that 507 00:25:14,560 --> 00:25:18,730 one of the differences between a staple and a stateless component is being 508 00:25:18,730 --> 00:25:22,860 a little bit tap into those lifecycle events that we kind of alluded to. 509 00:25:22,860 --> 00:25:25,010 >> So, was an example of one of those events? 510 00:25:25,010 --> 00:25:27,330 So, like should your component update. 511 00:25:27,330 --> 00:25:31,660 If you're any stateless component, you don't have access to any of these 512 00:25:31,660 --> 00:25:35,670 lifecycle events to tap into this tell react don't re-render me or 513 00:25:35,670 --> 00:25:36,980 do re-render me. 514 00:25:36,980 --> 00:25:41,730 Where as with a stateful component you can customize that behavior. 515 00:25:41,730 --> 00:25:44,390 >> Okay. >> So like what's an example in like 516 00:25:44,390 --> 00:25:48,320 an app you've worked on where you're like I need some state here. 517 00:25:48,320 --> 00:25:50,602 Like when is the hallmark where it is? 518 00:25:50,602 --> 00:25:53,292 [LAUGH] >> Like an input form or 519 00:25:53,292 --> 00:25:57,600 something like that or, we have a notification component that we're 520 00:25:57,600 --> 00:25:59,680 listening >> When it mounts, 521 00:25:59,680 --> 00:26:03,420 we wanna actually create a WebSocket connection or something like that so 522 00:26:03,420 --> 00:26:07,040 we can establish that and be notified when messages are coming in and 523 00:26:07,040 --> 00:26:08,810 then display them directly in that component. 524 00:26:08,810 --> 00:26:13,210 So that's one scenario, but there's kind of varies but 525 00:26:13,210 --> 00:26:19,670 when you think << I did a little personal project, but it was making up an API call. 526 00:26:19,670 --> 00:26:22,780 So I can tell component did mount, 527 00:26:22,780 --> 00:26:25,630 that's where you going to want to typically make your API call. 528 00:26:25,630 --> 00:26:30,160 So you don't necessarily have a state as part of that component, 529 00:26:30,160 --> 00:26:33,680 you're kind of being handed the state be a this API call. 530 00:26:33,680 --> 00:26:35,870 >> So, when you're making an API call, 531 00:26:35,870 --> 00:26:39,070 you in this is kind of what we alluded to earlier you can do that? 532 00:26:39,070 --> 00:26:41,850 However you want to do that then, right? 533 00:26:41,850 --> 00:26:44,270 This react have an opinion about how you make an API call? 534 00:26:44,270 --> 00:26:48,060 >> Well, they have an opinion where you're making the API call but not so 535 00:26:48,060 --> 00:26:49,630 much how you're making the API. 536 00:26:49,630 --> 00:26:50,250 >> Okay. 537 00:26:50,250 --> 00:26:51,290 Got it. 538 00:26:51,290 --> 00:26:54,690 Whereas like if I was using something like Angular, for instance. 539 00:26:54,690 --> 00:26:57,780 I probably would use their built-in service to do that, 540 00:26:57,780 --> 00:27:00,985 I guess is what I was angling at. 541 00:27:00,985 --> 00:27:02,640 >> [LAUGH] >> Yeah, so like. 542 00:27:03,680 --> 00:27:06,000 There are different ways to structure your apps, right. 543 00:27:06,000 --> 00:27:09,150 And one way is you might say, like if you need to go and 544 00:27:09,150 --> 00:27:12,180 get some user information, or like movie times. 545 00:27:12,180 --> 00:27:17,550 You make a request, you say hey, movie times API, I want these. 546 00:27:17,550 --> 00:27:22,000 And when you get the results, then I want you to make the page look like so. 547 00:27:22,000 --> 00:27:23,350 You'd render a react component. 548 00:27:23,350 --> 00:27:23,910 >> Right. 549 00:27:23,910 --> 00:27:27,410 But another way of doing that is to say, here's my React component, 550 00:27:27,410 --> 00:27:30,730 the movie times table, that you can write. 551 00:27:30,730 --> 00:27:34,820 And if it's a stateful component, you could say, okay, 552 00:27:34,820 --> 00:27:39,930 like when you're about to, when some part of your rendering magic is happening, 553 00:27:39,930 --> 00:27:43,180 I want you to go to fetch the movie times. 554 00:27:43,180 --> 00:27:46,610 And that's what you're going to use in what follows. 555 00:27:46,610 --> 00:27:48,460 So reactive zero way as an A.P.I. 556 00:27:48,460 --> 00:27:52,300 that allows you to look at components like that's cool. 557 00:27:52,300 --> 00:27:57,580 >> And so we've mentioned redux a couple times so as your application has grown. 558 00:27:57,580 --> 00:28:00,030 And maybe you have now dozens of components and 559 00:28:00,030 --> 00:28:03,890 there might be stay over the place where. 560 00:28:03,890 --> 00:28:07,906 How does Redux, I mean that helps me manage that true? 561 00:28:07,906 --> 00:28:10,186 >> [LAUGH] Is that is that true. 562 00:28:10,186 --> 00:28:11,310 >> Yeah. [LAUGH] 563 00:28:11,310 --> 00:28:12,650 >> Well I'll do my best to try to sell 564 00:28:12,650 --> 00:28:15,860 this but yeah, it's going to help you organize it at least 565 00:28:15,860 --> 00:28:20,650 from a if I were to look at the state of your Redux store I should have if I could 566 00:28:20,650 --> 00:28:23,630 just glance at it in kind of ninety what type of application you're probably gonna 567 00:28:23,630 --> 00:28:27,730 write which is already a big help to just be able to see that but then. 568 00:28:27,730 --> 00:28:31,350 So if you are looking at a new reactor out those using redux you might just go look 569 00:28:31,350 --> 00:28:34,970 at the store to get an understanding of what data a state was in there. 570 00:28:34,970 --> 00:28:37,620 Yeah. So like when and that's typically where 571 00:28:37,620 --> 00:28:43,550 I've actually seen API calls move to is like actions verses. 572 00:28:43,550 --> 00:28:48,210 So even though one component did now we might do something We still will probably 573 00:28:48,210 --> 00:28:52,700 go through like a redux action which will trigger an API, which if it's an request, 574 00:28:52,700 --> 00:28:57,050 we'll go get that, fetch it, sent some state inside of the redux store and then 575 00:28:57,050 --> 00:29:01,000 kind of propagate that down to anybody that's cares about that state change. 576 00:29:01,000 --> 00:29:05,300 >> So redux is probably maybe a little more difficult to learn than react. 577 00:29:05,300 --> 00:29:07,150 Itself, is that fair to say? 578 00:29:07,150 --> 00:29:11,170 >> Yeah, I think it requires a little bit of [CROSSTALK]. 579 00:29:11,170 --> 00:29:16,010 >> Now you wrote a course here at Treehouse that teaches Redux. 580 00:29:16,010 --> 00:29:18,340 >> Yeah, I authored a course about React and 581 00:29:18,340 --> 00:29:21,690 Redux, and >> It definitely goes into a lot more 582 00:29:21,690 --> 00:29:24,240 detail than we're gonna have time for right now. 583 00:29:24,240 --> 00:29:27,510 >> But that would be one of, one great resource. 584 00:29:27,510 --> 00:29:29,670 >> Absolutely. >> You can use offline to. 585 00:29:29,670 --> 00:29:30,400 >> Yeah. 586 00:29:30,400 --> 00:29:32,505 >> Or online as it were. 587 00:29:32,505 --> 00:29:34,360 [LAUGH] To learn more about redux. 588 00:29:34,360 --> 00:29:35,290 >> Yeah. 589 00:29:35,290 --> 00:29:40,375 >> Now Jared you also did a workshop for treehouse, what was that about? 590 00:29:40,375 --> 00:29:43,270 >> I've wrote a workshop on how to unit test your 591 00:29:43,270 --> 00:29:48,310 react components utilizing MOCA and a library called inside. 592 00:29:48,310 --> 00:29:51,650 >> So would you describe you know I mean as you know testing react 593 00:29:51,650 --> 00:29:55,070 nontrivial thing or is it actually better than that it might be otherwise. 594 00:29:55,070 --> 00:29:56,752 Or is for some other technology. 595 00:29:57,801 --> 00:29:59,573 >> Compared to how it used to be when we'd have a script. 596 00:29:59,573 --> 00:30:01,195 [LAUGH] >> I think it is, 597 00:30:01,195 --> 00:30:04,096 you could call it non-trivial. 598 00:30:04,096 --> 00:30:06,150 [LAUGH] >> It does take a little bit of set up and 599 00:30:06,150 --> 00:30:08,670 there's a little bit of knowledge. 600 00:30:08,670 --> 00:30:13,015 But the one thing I really liked about Enzyme is it kind of. 601 00:30:13,015 --> 00:30:16,474 It kind of wraps up some of the rendering stuff that needs to happen. 602 00:30:16,474 --> 00:30:21,010 So you can just focus on testing your react components and the behaviors. 603 00:30:21,010 --> 00:30:23,620 I mean because you've heard us talk a lot about state, 604 00:30:23,620 --> 00:30:27,640 and your component should look like this at 4 AM. 605 00:30:27,640 --> 00:30:31,386 Given Joe's example and you can actually go ahead and validate, 606 00:30:31,386 --> 00:30:34,941 that your component is going to render that stuff correctly. 607 00:30:34,941 --> 00:30:36,419 >> Which is tremendously valuable. 608 00:30:36,419 --> 00:30:42,155 >> Which is huge, because unit tests can also serve as like documentation and 609 00:30:42,155 --> 00:30:46,906 behaviors for what your application or component should do. 610 00:30:46,906 --> 00:30:49,661 And you know that really makes it clearer for 611 00:30:49,661 --> 00:30:54,589 a newer developer to come in and say okay, run the test here's the behaviors. 612 00:30:55,620 --> 00:30:57,470 But I need to make this change. 613 00:30:57,470 --> 00:30:59,100 This behavior is not here. 614 00:30:59,100 --> 00:31:02,030 I've broken a previous behavior with my changes, and 615 00:31:02,030 --> 00:31:05,680 you just get that validation now and a little bit more safety. 616 00:31:07,410 --> 00:31:09,590 Instead of shooting from the hip, so to speak. 617 00:31:09,590 --> 00:31:12,243 >> So Enzyme is a library, who created that? 618 00:31:12,243 --> 00:31:13,024 >> Airbnb. 619 00:31:13,024 --> 00:31:16,470 >> Airbnb, very cool. 620 00:31:16,470 --> 00:31:20,530 What is this create react that thing, that I've heard about. 621 00:31:20,530 --> 00:31:22,640 >> Should probably use if you're just starting to wonder. 622 00:31:22,640 --> 00:31:25,670 >> Yeah. [LAUGH] >> Yeah it's probably a good idea. 623 00:31:25,670 --> 00:31:28,064 It's a tool that the community has created, 624 00:31:28,064 --> 00:31:31,784 because many people have had this experience of wanting to use react. 625 00:31:31,784 --> 00:31:32,608 [LAUGH] >> But 626 00:31:32,608 --> 00:31:36,852 you have to set up a web Pac Bell and then I babble config and 627 00:31:36,852 --> 00:31:40,940 make all sorts of other decisions about other things. 628 00:31:40,940 --> 00:31:45,311 So create react is a command line tool, you can install and then you can run it. 629 00:31:45,311 --> 00:31:49,215 You can say, new create react app, given a name. 630 00:31:49,215 --> 00:31:53,518 And then it just creates a directory structure with everything installed and 631 00:31:53,518 --> 00:31:54,187 built out. 632 00:31:54,187 --> 00:31:57,102 >> So that you all agree that if you were going to go home tonight, and 633 00:31:57,102 --> 00:31:59,971 start a quick personal project, you would go for that tool and. 634 00:31:59,971 --> 00:32:01,322 >> Yeah absolutely. 635 00:32:01,322 --> 00:32:02,040 >> I said Yeah. 636 00:32:02,040 --> 00:32:04,720 >> I mean bundles of that ecosystem software moves 637 00:32:04,720 --> 00:32:07,685 the variability of trying to figure all out all that stuff. 638 00:32:07,685 --> 00:32:09,576 >> Yeah and then you think about too on what you can. 639 00:32:09,576 --> 00:32:13,193 Once you need or feel like, you've got enough experience with what packing 640 00:32:13,193 --> 00:32:15,578 that kind of stuff you knew some customizations. 641 00:32:15,578 --> 00:32:20,638 You can actually remove the hidden layer of config files, 642 00:32:20,638 --> 00:32:24,260 that they've pushed to the side for you. 643 00:32:24,260 --> 00:32:25,540 And then gets access to them. 644 00:32:26,740 --> 00:32:27,580 >> Excellent. 645 00:32:27,580 --> 00:32:32,034 Well, let me let me check to see if we have any questions from our audience here. 646 00:32:32,034 --> 00:32:34,364 >> Cool. 647 00:32:34,364 --> 00:32:37,569 And of course, I can't read [LAUGH] what's on the tablet here, 648 00:32:37,569 --> 00:32:38,847 let me get my glasses on. 649 00:32:38,847 --> 00:32:45,330 So Andrew asks, what is Fiber, and do I need to learn it to learn react? 650 00:32:45,330 --> 00:32:46,440 So what is Fiber? 651 00:32:46,440 --> 00:32:47,270 I've never heard of that. 652 00:32:47,270 --> 00:32:48,900 >> I have not heard of it either. 653 00:32:48,900 --> 00:32:49,835 Joe you look like you know. 654 00:32:49,835 --> 00:32:52,255 >> [LAUGH] >> Yeah, I wish I didn't. 655 00:32:52,255 --> 00:32:55,260 >> [LAUGH] >> So 656 00:32:55,260 --> 00:32:59,740 Fiber is just an optimal, a rebuild basically of react's core. 657 00:33:00,920 --> 00:33:02,890 It's a bunch of optimizations, 658 00:33:02,890 --> 00:33:08,060 that the React development team thinks are important. 659 00:33:09,130 --> 00:33:14,870 But there's no obvious way to fit them in, to the way that reactors currently built. 660 00:33:14,870 --> 00:33:18,080 >> So is that like a future look at what react might become? 661 00:33:18,080 --> 00:33:19,300 Is that the way to think of that? 662 00:33:19,300 --> 00:33:20,430 >> Yeah that's exactly it. 663 00:33:20,430 --> 00:33:23,823 >> Okay, so you wouldn't start there probably then, right? 664 00:33:23,823 --> 00:33:25,559 >> I guess it depends. 665 00:33:25,559 --> 00:33:27,750 I guess it depends on what you want. 666 00:33:27,750 --> 00:33:28,940 When I was learning React, 667 00:33:28,940 --> 00:33:34,710 a big part of my motivation to play with it all and this was, 668 00:33:34,710 --> 00:33:39,657 you more than a year ago so things were even more confusing than they are now. 669 00:33:39,657 --> 00:33:41,730 >> [LAUGH] >> If you think they're confusing today, 670 00:33:41,730 --> 00:33:43,615 you should time travel back a year. 671 00:33:43,615 --> 00:33:46,900 >> [LAUGH] >> A big part of my drive was well, 672 00:33:46,900 --> 00:33:49,720 I know that other people are struggling with this. 673 00:33:49,720 --> 00:33:54,790 And so if I can master it, I will be attractive to prospective employers. 674 00:33:54,790 --> 00:33:59,070 So if you think, if that's on your table, if you're thinking, 675 00:33:59,070 --> 00:34:04,060 I really want to get a job and stand out, then you might just start with, 676 00:34:04,060 --> 00:34:06,775 I don't know, whatever the hard new thing that no one's using yet. 677 00:34:06,775 --> 00:34:07,750 >> [LAUGH] >> But 678 00:34:07,750 --> 00:34:11,370 that'll definitely be a challenging way to learn this world. 679 00:34:12,410 --> 00:34:13,631 >> Excellent. 680 00:34:13,631 --> 00:34:15,597 So that was the only question we've had so far. 681 00:34:15,597 --> 00:34:16,387 [LAUGH] >> But 682 00:34:16,387 --> 00:34:20,068 for anyone who's watching us online, send your questions in. 683 00:34:20,068 --> 00:34:23,890 And if there's something that we haven't specifically addressed yet. 684 00:34:23,890 --> 00:34:28,220 So I'm going to move in to what I'm calling the speed round. 685 00:34:28,220 --> 00:34:30,130 So I'm going to ask each of you. 686 00:34:30,130 --> 00:34:34,540 So I'll ask a question and we'll start with Joe and we'll go this direction. 687 00:34:34,540 --> 00:34:38,910 And just try to keep your answers brief and we'll go through this quickly. 688 00:34:38,910 --> 00:34:40,876 So first off, favorite editor. 689 00:34:40,876 --> 00:34:42,914 >> VS Code. 690 00:34:42,914 --> 00:34:44,271 >> Beau. 691 00:34:44,271 --> 00:34:45,630 >> Atom. 692 00:34:45,630 --> 00:34:46,520 >> WebStorm. 693 00:34:46,520 --> 00:34:47,880 >> Wow, three different answers. 694 00:34:49,390 --> 00:34:51,017 So I'm a VS Code fan. 695 00:34:51,017 --> 00:34:52,505 Didn't used to be for a long time. 696 00:34:52,505 --> 00:34:53,587 I used Atom a lot but. 697 00:34:53,587 --> 00:34:55,245 >> Yeah, I really love VS code. 698 00:34:55,245 --> 00:34:56,045 >> It's so fast. 699 00:34:56,045 --> 00:34:58,598 It's so much faster and there's so many cool things. 700 00:34:58,598 --> 00:35:01,764 Being able to command click a function name and appear. 701 00:35:01,764 --> 00:35:03,971 [LAUGH] >> As a file where it's defined is insane. 702 00:35:03,971 --> 00:35:06,827 >> Excellent. 703 00:35:06,827 --> 00:35:09,933 Favorite part of React? 704 00:35:09,933 --> 00:35:12,159 >> Stateless functions. 705 00:35:12,159 --> 00:35:12,945 Beau. 706 00:35:12,945 --> 00:35:15,631 I was going to go if you're going to say all JSX onset, 707 00:35:15,631 --> 00:35:17,137 just like the way that works. 708 00:35:17,137 --> 00:35:18,923 >> One way data flow. 709 00:35:18,923 --> 00:35:19,523 >> Excellent. 710 00:35:19,523 --> 00:35:21,296 >> We didn't even talk about that. 711 00:35:21,296 --> 00:35:25,118 >> We did a little bit but. 712 00:35:25,118 --> 00:35:27,895 >> Let's make it worth saying something about it but if we don't write. 713 00:35:27,895 --> 00:35:30,608 [CROSSTALK] >> [INAUDIBLE] speed round first and 714 00:35:30,608 --> 00:35:31,985 you know this stuff. 715 00:35:31,985 --> 00:35:36,300 >> So Jared maybe you want to define what one way data flow? 716 00:35:37,820 --> 00:35:42,919 >> Basically, I mean if you've ever played with knockout or whatever you can. 717 00:35:42,919 --> 00:35:47,736 There's two ways you can update your mode,l is you can update it on 718 00:35:47,736 --> 00:35:52,136 the model or you can have information kind of pushed into it. 719 00:35:52,136 --> 00:35:54,572 And with React you kind of get it, 720 00:35:54,572 --> 00:35:59,803 you have a one way data flow where stuff just trickles down from the top. 721 00:35:59,803 --> 00:36:02,288 And you don't get stuff trickling back up. 722 00:36:02,288 --> 00:36:04,463 [CROSSTALK] [LAUGH] >> So the idea of, like, in Knockout, 723 00:36:04,463 --> 00:36:05,948 you would have a two way data binding. 724 00:36:05,948 --> 00:36:09,224 >> You can have two-way data, and that was kind of, 725 00:36:09,224 --> 00:36:14,450 earlier I mentioned kind of spaghetti code hell, in my opinion to a data binding 726 00:36:14,450 --> 00:36:19,527 kind of lead you down that path of having like stay over here and sit over here. 727 00:36:19,527 --> 00:36:22,551 And which levers are pulled that which specific time but, 728 00:36:22,551 --> 00:36:26,310 because the one way data flow it's much easier to debug and. 729 00:36:26,310 --> 00:36:28,582 >> So having that limitation which really is, 730 00:36:28,582 --> 00:36:33,580 it's kind of a limitation actually makes it easier to develop your applications and 731 00:36:33,580 --> 00:36:35,590 understand what's actually happening. 732 00:36:35,590 --> 00:36:36,380 >> Absolutely. 733 00:36:36,380 --> 00:36:37,830 >> That's very cool. 734 00:36:37,830 --> 00:36:39,971 Least favorite part of React? 735 00:36:39,971 --> 00:36:44,769 >> React is very context dependent sometimes, there are refs and mixins. 736 00:36:44,769 --> 00:36:46,005 >> That's not a short answer. 737 00:36:46,005 --> 00:36:48,153 [LAUGH] >> There you go. 738 00:36:48,153 --> 00:36:49,081 >> That's a slop. >> Half of that. 739 00:36:49,081 --> 00:36:53,669 >> [LAUGH] >> There's some traps I think with 740 00:36:53,669 --> 00:36:55,266 this in React. 741 00:36:55,266 --> 00:36:56,877 >> Beau? 742 00:36:56,877 --> 00:37:00,566 >> For me it was probably just learning the, when do you use some of the life 743 00:37:00,566 --> 00:37:04,149 cycle of [INAUDIBLE], is taking the time to figure out when best uses. 744 00:37:04,149 --> 00:37:06,696 That was probably the thing I liked least, 745 00:37:06,696 --> 00:37:09,541 because I just wasn't immediately apparent. 746 00:37:09,541 --> 00:37:10,341 In the pipeline for React. 747 00:37:10,341 --> 00:37:12,120 [CROSSTALK] >> That was a bit of a spike 748 00:37:12,120 --> 00:37:12,673 in complexity. 749 00:37:12,673 --> 00:37:13,543 >> Yeah. 750 00:37:13,543 --> 00:37:16,175 >> Jared. >> A styling support. 751 00:37:16,175 --> 00:37:18,719 It feels kind of like a second class citizen. 752 00:37:18,719 --> 00:37:21,774 Or at least that's, because I struggle with it so 753 00:37:21,774 --> 00:37:24,631 much, that's kind of what it felt like to me. 754 00:37:24,631 --> 00:37:25,880 >> So last one. 755 00:37:25,880 --> 00:37:30,320 If you could send a message back in time to yourself, when you were learning React. 756 00:37:31,360 --> 00:37:32,730 What would you tell yourself? 757 00:37:32,730 --> 00:37:33,990 Joe. 758 00:37:33,990 --> 00:37:34,972 >> Man. [LAUGH] 759 00:37:34,972 --> 00:37:37,814 >> Nobody knows how to do any of this 760 00:37:37,814 --> 00:37:39,188 the right way. 761 00:37:39,188 --> 00:37:43,290 It seems like everyone out there has got this magically. 762 00:37:43,290 --> 00:37:43,936 >> Except you three, though. 763 00:37:43,936 --> 00:37:45,840 >> Except for us. 764 00:37:46,910 --> 00:37:49,200 Yeah, that would have comforted me a lot, 765 00:37:49,200 --> 00:37:52,260 feeling like, everyone's super confused about this. 766 00:37:52,260 --> 00:37:55,095 You just have to do anything with it to have an understanding. 767 00:37:55,095 --> 00:37:56,401 >> And it's okay to have questions. 768 00:37:56,401 --> 00:37:56,902 >> Yeah. 769 00:37:56,902 --> 00:37:57,849 >> Yeah, totally. 770 00:37:57,849 --> 00:38:03,110 >> Well, that's always true regardless but, that's good to know that it's young. 771 00:38:03,110 --> 00:38:04,670 Yeah it is really is really. 772 00:38:04,670 --> 00:38:06,240 Beau. 773 00:38:06,240 --> 00:38:07,880 >> For me it probably would have been, 774 00:38:07,880 --> 00:38:11,336 investing some more time in figuring out when to use stateless functions. 775 00:38:11,336 --> 00:38:14,208 I didn't, I started out not using them hardly at all. 776 00:38:14,208 --> 00:38:15,017 I didn't see the benefit. 777 00:38:15,017 --> 00:38:16,895 >> You were using stateful components. 778 00:38:16,895 --> 00:38:19,685 >> Yeah, I was adding a lot of overhead and stuff, so 779 00:38:19,685 --> 00:38:22,925 it kind of boilerplate and just made it a lot more complex. 780 00:38:22,925 --> 00:38:25,365 So I'd probably give myself that piece of advice, use them. 781 00:38:25,365 --> 00:38:27,147 Here' s how they work and use them. 782 00:38:27,147 --> 00:38:27,708 >> Jared. 783 00:38:27,708 --> 00:38:32,860 >> I think for me it'd be a commitment, and what I mean by that 784 00:38:32,860 --> 00:38:38,549 is almost committing to a point in time in React's kind of life. 785 00:38:38,549 --> 00:38:41,009 I don't know if I want to call it a life cycle, but 786 00:38:41,009 --> 00:38:44,800 life because things have been changing so fast over the last couple years. 787 00:38:44,800 --> 00:38:47,547 And it's so hard to keep up with everything, and 788 00:38:47,547 --> 00:38:49,692 you almost get a little bit of thrash. 789 00:38:49,692 --> 00:38:53,111 Because you finally feel like you've got a piece mastered down. 790 00:38:53,111 --> 00:38:53,890 And then all the sudden. 791 00:38:53,890 --> 00:38:56,126 [LAUGH] >> They've turned that on its head and 792 00:38:56,126 --> 00:38:59,530 all of a sudden you're like no what am I doing so. 793 00:38:59,530 --> 00:39:01,340 I think if you got the fundamentals down, come in and 794 00:39:01,340 --> 00:39:05,200 get those fundamentals down, and then going forward and. 795 00:39:05,200 --> 00:39:08,040 >> Excellent. Do we have time to do some more questions? 796 00:39:08,040 --> 00:39:10,180 Excellent, we got some more questions. 797 00:39:10,180 --> 00:39:11,990 So Andrew asks, 798 00:39:11,990 --> 00:39:16,780 are there any interesting trends you see happening in the React Redux world? 799 00:39:16,780 --> 00:39:18,711 Any idea what's on the horizon. 800 00:39:18,711 --> 00:39:23,785 So, what is the future of React and Redux look like it looks like? 801 00:39:23,785 --> 00:39:26,070 >> It was going so well what is it. 802 00:39:26,070 --> 00:39:30,482 >> It's just another programming language that's purely functional. 803 00:39:30,482 --> 00:39:33,697 A lot of the ideas in React and Redux are borrowed from that architecture. 804 00:39:33,697 --> 00:39:35,595 And people are starting to use it a lot more. 805 00:39:35,595 --> 00:39:36,375 >> Interesting. 806 00:39:36,375 --> 00:39:39,035 >> Beau, Jared, any insights into the feature? 807 00:39:39,035 --> 00:39:42,510 >> I mean the fact the Redux documentation immediately said we're following Elm. 808 00:39:42,510 --> 00:39:45,085 [LAUGH] >> I was actually thinking something 809 00:39:45,085 --> 00:39:46,245 fairly similar to that so. 810 00:39:46,245 --> 00:39:46,830 >> Interesting. 811 00:39:46,830 --> 00:39:49,250 So, who knows. 812 00:39:49,250 --> 00:39:50,465 >> It looks cool, I think. 813 00:39:50,465 --> 00:39:52,799 I think there are a lot of cool things happening. 814 00:39:52,799 --> 00:39:55,138 I don't know if you've seen Redux saga. 815 00:39:55,138 --> 00:39:55,753 >> I have no idea. 816 00:39:55,753 --> 00:40:00,359 >> There's a completely different ideas about how to write JavaScript. 817 00:40:00,359 --> 00:40:04,270 And I seem to be happening in the Redux world. 818 00:40:04,270 --> 00:40:04,950 Interesting. 819 00:40:04,950 --> 00:40:08,165 Okay. Nick asked, as a Reactive helper, 820 00:40:08,165 --> 00:40:11,656 do you have any interest in React if you are? 821 00:40:11,656 --> 00:40:14,805 >> Something else I know nothing about >> [LAUGH] 822 00:40:14,805 --> 00:40:15,561 >> All right. 823 00:40:15,561 --> 00:40:16,577 Nick is Nick. 824 00:40:16,577 --> 00:40:19,533 >> Can anyone define what React Is? 825 00:40:19,533 --> 00:40:20,996 >> Yeah, so React, 826 00:40:20,996 --> 00:40:27,180 what we've been talking about is a version of React that targets the web. 827 00:40:27,180 --> 00:40:29,470 >> Okay, that's a good, yep, yep. 828 00:40:29,470 --> 00:40:33,420 >> But in fact, React can be abstracted away from that, and 829 00:40:33,420 --> 00:40:36,333 you can target other things like >> Iphone, 830 00:40:36,333 --> 00:40:37,380 >> React native. 831 00:40:37,380 --> 00:40:42,450 >> React native is iPhones and Androids or VR, 832 00:40:42,450 --> 00:40:47,038 you can target virtual reality run times all kinds of other stuff. 833 00:40:47,038 --> 00:40:50,471 LED boards. 834 00:40:50,471 --> 00:40:54,560 >> So yes we're all very interested in VR we haven't delved into it yet 835 00:40:54,560 --> 00:40:55,530 it sounds like, right? 836 00:40:55,530 --> 00:40:56,210 >> No. 837 00:40:56,210 --> 00:40:56,860 Okay cool. 838 00:40:58,820 --> 00:41:04,450 Andrew asked, do you see there being a move away from JSX to pure JS? 839 00:41:04,450 --> 00:41:06,020 So we touched on that earlier. 840 00:41:06,020 --> 00:41:07,600 You know not even bothering to write that. 841 00:41:07,600 --> 00:41:11,660 But just program it against the API directly. 842 00:41:11,660 --> 00:41:16,560 >> Personally, I don't think so I you know if you've ever looked at what just writing 843 00:41:16,560 --> 00:41:20,730 pure Java Script using the React API looks like, it's a nightmare. 844 00:41:20,730 --> 00:41:21,603 If you think JSF. looks bad, look at this. 845 00:41:21,603 --> 00:41:22,110 >> [LAUGH] >> [LAUGH] 846 00:41:22,110 --> 00:41:22,610 >> Look at this and 847 00:41:22,610 --> 00:41:24,344 then you'll change your mind but I didn't [CROSSTALK] 848 00:41:24,344 --> 00:41:26,590 >> Is it more verbose, is that it? 849 00:41:26,590 --> 00:41:31,600 >> It is very verbose and there's just like there's a lot more nesting involved. 850 00:41:32,720 --> 00:41:34,890 That you used as kind of hidden from you. 851 00:41:34,890 --> 00:41:39,010 With just these nice simple little angel brackets that you get to use that much in 852 00:41:39,010 --> 00:41:42,940 this probably having that extra layer of abstraction the JSX gives you probably 853 00:41:42,940 --> 00:41:47,540 help shield you from changes they might make to the API in the future,is that 854 00:41:47,540 --> 00:41:48,280 a possibility? 855 00:41:51,000 --> 00:41:51,710 >> I don't know. 856 00:41:51,710 --> 00:41:55,610 >> Well yeah I was going to say the thing about geodesics I like is that it's highly 857 00:41:55,610 --> 00:41:58,070 readable versus the A.P.I. If you don't know much about it. 858 00:41:58,070 --> 00:42:02,080 You kind of have to learn and understand what it's doing when it makes sense. 859 00:42:02,080 --> 00:42:04,232 >> Liam asked, do you think React native or 860 00:42:04,232 --> 00:42:07,916 another language will replace classic app development languages? 861 00:42:11,905 --> 00:42:14,980 >> I don't do any native mobile development. 862 00:42:14,980 --> 00:42:16,513 I do play with reckoning. 863 00:42:16,513 --> 00:42:18,896 >> So yes it has replaced. 864 00:42:18,896 --> 00:42:19,676 >> [LAUGH]. 865 00:42:19,676 --> 00:42:23,690 >> Where I work we have native developers. 866 00:42:23,690 --> 00:42:26,582 I don't see that changing in the market here. 867 00:42:26,582 --> 00:42:27,690 >> Okay. >> Right. 868 00:42:27,690 --> 00:42:31,420 >> But it does seem like things are changing a lot and JavaScript gets bigger. 869 00:42:33,010 --> 00:42:35,994 >> Marcella ask, what is the optimal size app for react? 870 00:42:39,369 --> 00:42:44,374 >> I mean we have a huge application that we use kind of to to monitor systems and 871 00:42:44,374 --> 00:42:49,148 it's hundreds of components and so I don't know if there's [CROSSTALK] 872 00:42:49,148 --> 00:42:50,138 >> So it can scale up? 873 00:42:50,138 --> 00:42:53,838 >> It can scale up big and it can, we can use it for Hello world, 874 00:42:53,838 --> 00:42:56,605 I don't know if there is an ideal size of it. 875 00:42:56,605 --> 00:43:00,280 >> Okay, excuse me if I say your name wrong. 876 00:43:00,280 --> 00:43:03,760 Powell asked what you guys think about mob X? 877 00:43:05,330 --> 00:43:08,140 >> It's a light replacement for Redux. 878 00:43:08,140 --> 00:43:12,630 I think that's actually a pretty good, if you're not gonna be building a large 879 00:43:12,630 --> 00:43:16,010 application, MobX is actually one of my favorites. 880 00:43:16,010 --> 00:43:18,450 So it's essentially an alternative to Redux. 881 00:43:19,810 --> 00:43:21,070 This it's simpler to use. 882 00:43:21,070 --> 00:43:24,400 >> Yeah I think it's easier to use but it also doesn't have as many as or 883 00:43:24,400 --> 00:43:26,910 it doesn't have as many of the features that I like in Redux. 884 00:43:26,910 --> 00:43:31,980 So it's not gonna do everything that Redux does but it's definitely a nice for 885 00:43:31,980 --> 00:43:35,253 like medium sized applications I think it's a good alternative. 886 00:43:35,253 --> 00:43:36,650 >> Cool, excellent. 887 00:43:36,650 --> 00:43:37,620 All right, last question. 888 00:43:37,620 --> 00:43:42,190 John asked what features are you looking forward to in future versions of React?. 889 00:43:47,500 --> 00:43:50,998 >> It would be really nice to have better JSX I think- 890 00:43:50,998 --> 00:43:51,994 >> [LAUGH] 891 00:43:51,994 --> 00:43:54,320 >> To be able to use F statements. 892 00:43:54,320 --> 00:43:57,160 And other I don't know. 893 00:43:57,160 --> 00:43:58,800 Normal JavaScript things. 894 00:44:00,090 --> 00:44:00,820 >> Anything else to add? 895 00:44:02,130 --> 00:44:03,065 >> Not a thumb. No. 896 00:44:03,065 --> 00:44:03,869 >> Okay. 897 00:44:03,869 --> 00:44:06,298 >> << Just make it go faster. 898 00:44:06,298 --> 00:44:06,950 >> Faster. 899 00:44:06,950 --> 00:44:08,397 >> For years we are trying to do that. 900 00:44:08,397 --> 00:44:11,990 >> The docs are so much better than they used to be. 901 00:44:11,990 --> 00:44:16,950 React and redox both have done just an amazing job and I documentation, and 902 00:44:16,950 --> 00:44:18,355 that just seems to keep getting better. 903 00:44:18,355 --> 00:44:21,190 >> Yeah, that is a huge plus you have a place to go to 904 00:44:22,860 --> 00:44:25,390 figure out what you're doing wrong or dancer questions. 905 00:44:25,390 --> 00:44:25,890 >> Yeah. 906 00:44:25,890 --> 00:44:29,410 >> All right, well that concludes our panel. 907 00:44:29,410 --> 00:44:31,900 So, I wanna thank you guys very much for joining us today. 908 00:44:31,900 --> 00:44:32,790 It was great having you. 909 00:44:34,420 --> 00:44:36,960 And thank you to the viewers for watching. 910 00:44:36,960 --> 00:44:39,000 I think we all had a good time and 911 00:44:39,000 --> 00:44:41,320 hopefully you learned something in the process. 912 00:44:41,320 --> 00:44:43,290 Be sure to give us your feedback. 913 00:44:43,290 --> 00:44:45,310 We'd love to hear you know what you like and 914 00:44:45,310 --> 00:44:48,780 what you didn't like and we hope to do this again in the future. 915 00:44:48,780 --> 00:44:52,490 And be sure to check out the various react content that we have on Treehouse. 916 00:44:52,490 --> 00:44:55,090 We have a great react basics course. 917 00:44:55,090 --> 00:44:58,250 That assumes nothing is a great place to start learning React. 918 00:44:58,250 --> 00:45:00,330 And if you're not already a Treehouse student, 919 00:45:00,330 --> 00:45:05,620 check out the seven day free trial and go learn about React by taking React Basic. 920 00:45:05,620 --> 00:45:08,420 So, thanks for tuning in and we'll see you again.