This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Q&A: Nested Arrays, ES6, & More" Lesson
[00:00:00]
>> Brian Holt: V3-10 is pushed for those that need it.
>> Speaker 2: So now that the search component can filter based on a search term, how do we use the route on the client app component? And pass a search term to a search point so that, as we navigate from the landing page to the search results page, we get that.
[00:00:31]
>> Brian Holt: Because we had that little search box on the landing page?
>> Speaker 2: Yeah.
>> Brian Holt: The answer to that question is there are several ways you can do that. You could have probably the app keep track of the landing or the search term, and then it would pass that both into the landing page and the search page.
[00:00:55] So, if we go back here to app.jsx Clientapp.jsx we would make this a stateful component, and then it would pass the search term both into landing and into search right? And then it would keep track of it. So in other words you'd find a common ancestor. The ancestor keeps track of it and then passes it into both the children.
[00:01:20] That's how we do it without using redux. The real answer to your question is how are we going to do it with redux. So yeah,
>> Brian Holt: I guess that kinda set ways into just the thought I wanted to say before we left. We're going to build this entire application besides that with React and no Redux.
[00:01:42] React solves almost all of your problems. And Redux is a really big hammer that only sometimes do you need. And I'm going to say as much as rarely need. So do not start building your applications with redux out of the box. Cuz it adds a lot of complexity to your app.
[00:02:00] And React solves most of it by itself. Right, what I showed you here scales to large applications. So the point at Netflix, we still were not using redux in most of our applications.
>> Speaker 3: Yeah, I guess related to data fetching.
>> Brian Holt: Yeah.
>> Speaker 3: We have Redux.
>> Brian Holt: How do you do that?
[00:02:21] So data fetching without Redux. There is a specific section on this. We will go over it. But the answer is inside your React components.
>> Brian Holt: So react can take care of everythhing that redux can, 100% for sure, no problem. Well, I guess problem, right, eventually you're gonna run into a problem, which is where redux comes in, right?
[00:02:47]
>> Speaker 4: I feel like redux was like, it was so new and cool, and everybody wants to reach for cool and new complex thing, versus looking at what is it solving, and why do I need it, first. It's just kinda the cult bandwagon.
>> Brian Holt: Definitely well and like eventually [INAUDIBLE] cuts the point where you just said React Redux right.
[00:03:12] Like they just kind of like went together in the same breath. And that's not fair. Like React really stands on it's own. If you talk to like Ryan Florence, again one of the authors of React Router. He said that he literally never uses Redux and he always just uses React.
[00:03:28] I'm not too far away from that. There is a point where I will use Redux
>> Brian Holt: And we'll definitely address more of that when we get to Redux. But I want to show you that you can build a big application just with React and most of the time that's okay.
[00:03:44] There's a great blog post from Dan Abramov called, You Might Not Need Redux, and so that's a good one to read as well.
>> Speaker 3: Even for like scalable apps?
>> Brian Holt: For sure you can write pretty big applications and react with no redux. React is like the state management thing where I showed you a here in search.
[00:04:09] This scales to large applications, for sure.
>> Speaker 4: There's more questions from Chet.
>> Brian Holt: Cool.
>> Speaker 4: First a funny comment. He said I also got a job because of version two. And also, the new version three stuff that I'm seeing tomorrow at my work.
>> Brian Holt: That's awesome.
>> Speaker 4: What about nested arrays of objects, which contain nested arrays of objects?
[00:04:43] Normalizer?
>> Brian Holt: Yeah there is a library called normalizer. There's like a redux normalizer, there's several ways to normalize that. Which is basically to say like take crazy structures of data and turn them into a useful sort of data. There's a bunch of ways to do that. Redux has different ways of doing it.
[00:05:01] You don't necessarily need redux to do that though.
>> Speaker 4: This one is an ES6 question about arrow functions, I don't know,
>> Brian Holt: Sure, go ahead.
>> Speaker 4: Lets say that one probably should look at call ES6 the right part if we got questions on arrow functions because is inglorious, detail in his course.
[00:05:23]
>> Brian Holt: Yeah, way better than I do, for sure. I watch his courses so I can tell you the same things.
>> Speaker 4: Will we cover hooking up our client side app to a back-end or server side?
>> Brian Holt: Yeah, so you saw the ratings API thing that I built for you, that's inside of the app.
[00:05:44] We'll definitely be hooking up to our fake API.
>> Speaker 4: Yes all of these last minute Q and As will be available to watch tonight. There's a few people throwing in RxJS into chat, but I didn't really see a good time to really talk about it. But using Rx with React?
[00:06:16]
>> Brian Holt: So I love RxJS, it's crazy awesome, and you should definitely watch course on frontendmasters if you're interested in RX stuff. Or Kyle's, right, either one of those are really good.
>> Speaker 4: Yeah, and he just recorded last Saturday an advanced asynchronous programming in JavaScript, which covers more real world applications of RX
[00:06:38]
>> Brian Holt: Perfect. So, as far as it directly applied to react, I would say that there is no special place that it goes in react. In other words, you would use rx and react as you would in any other program, and there's no special hook into it. There's no react RX or anything like that as far as I know, or as far as I would want to use.
[00:07:03] So you can have an observable, admitting ajax client or WebSocket client, but that would be any different for react than it would for anything else.
>> Speaker 4: I think the point is that react just renders the data, right?
>> Brian Holt: Yeah.
>> Speaker 4: However you're dealing with the data and handlers and stuff could be handled by RX.
[00:07:23]
>> Brian Holt: Exactly.
>> Speaker 4: And once the observable kicks out data, then you would want to render that data to a component.
>> Brian Holt: Right.
>> Speaker 4: Another question, any thoughts on using graph QL with React? I mean I think that's the same thing where you're just pulling the data and rendering it to a component right?
[00:07:48]
>> Brian Holt: It's a tiny bit more opinionated so I considered covering it today but that would covering graph QL would literally be a full other day. The cool thing about using graph QL with React is that you can make components declare their own data dependencies. So basically your component says I require username and first name and last name from the API.
[00:08:14] And then as you build up your component tree at the top level you'll gather all of the queries and then send that to graph QL and then feed that back down through your tree. So basically, the fact that you're including a component, who then be sending that data to an API, and the API will be automatically feeding that back down into the component.
[00:08:34] It's really sleek, it's declarative data dependencies. I did some helping with Falcor, which is the Netflix version of that and you can do a similar thing as well with Falcore. Its really cool, its really sleek so and than graph QLs in the names of the language that you declare those dependencies in and then relays the name of the service, relay or apollo or the two big ones that you feed that too.
[00:09:03] So, yeah whole another course really cool but we're not gonna talk about it.
>> Speaker 5: Do we need to do any service side rendering or we can just do it all client side where we at?
>> Brian Holt: To answer that question is it depends on what your needs are, right?
[00:09:19] Certainly a service side rendering deals a lot of benefits, it's great for SCL. It's faster, right. It's perceived to be faster to the user, there is a bunch of stuff about that, that's really cool, but it also does add some complexity to wrap, you have to make sure that everything works in both the node and in the browser, you have to be using node that's another layer of complexity
[00:09:44]
>> Brian Holt: So it's trade offs, right? You gotta make the right trade offs for it. And we'll be doing server side rendering maybe by the end of tomorrow, and you'll get to experience those trade offs firsthand.
>> Speaker 5: Okay, but we can run this on a server like a CMS or something that didn't have Node installed on it?
[00:10:05]
>> Brian Holt: Absolutely.
>> Speaker 5: Yeah, okay.
>> Brian Holt: Yep, definitely, there's a bunch of companies out there that are running React in production right now with no server-side rendering.