Complete Intro to React, v7 Wrapping Up

[00:00:00]
>> That is the end of the complete Intro To React version 7, you now have all the tools that you need and some additional ones to build basically any react application. Now you notice that like there's a lot of stuff in here that react just doesn't care about.

[00:00:15] But for the most part, it doesn't really care about Routers, right? You need something like React Router, or doesn't care about like data storage or data fetching or anything like that. That's all stuff that react basically says like, we just take care of rendering the UI layer. Everything else is up to you.

[00:00:31] As opposed to something like ember where there's like, ember models and Ember Router and a bunch of stuff in there. So, That's something for you to go to discover and make your own opinions about. I prefer it that way cuz I like to kind of put together the set of tools to build whatever application I need.

[00:00:51] And kind of have the minimal set as opposed to bring in, here's the entire structure to the building, good luck. Right, I was never a Rails person for that matter [LAUGH] for the same reason, Rails is great and if you have a Rails developer that's very talented, they can go faster than I can undoubtedly, I just don't like the black magic.

[00:01:10] Yeah, scares me, anyway, so the first thing, I gave you a couple of suggestions of like where to go from here now, the first one is definitely, take the intermediate course, right? Cuz I go into like a bunch of more stuff in terms of like. All the ecosystem tailwind, CSS, TypeScript, testing, Redux, server side rendering, code splitting, a bunch of stuff that like, will be really useful for either making your application more performant or like building larger scale applications, so.

[00:01:50] I would suggest that, I think it's a good course. One thing that we didn't do is we didn't paginate the results, so oops, if you're going to adoptme.com, if there's more than 10 results, we didn't paginate that so I would suggest that. That's a good kind of like stretch goal for you to learn how to go forward and go backwards and keep track of state and all that kind of stuff.

[00:02:13] Use a real API so we're using like a fake API that the front of masters and I put together but you can use the Petfinder API and actually previous versions of this course did used to do that, we overwhelmed them with how many people were requesting API keys.

[00:02:29] So we stopped doing that. But you if you feel like it can hop over here, you go to the Petfinder for Developers, you can get an API key. True story people have actually adopted animals because of this course. So I try and keep that going. So that's a good idea.

[00:02:48] They're free API keys, they're super nice people. There's like a nice SDK now. I actually like had to build an SDK for this class previously. There was one time that they blocked all our entire like I was teaching this live and they blocked everybody. That was a bad day.

[00:03:06] We actually had to reshoot the course cuz it was that bad. But yeah, their API is kind of unruly, like this is an example of one of the response objects from it. So they give you a lot of information. Okay, another thing you can do is deploy your code.

[00:03:23] That's always a fun thing to do to go through the deployment process. I might gave you the links here to a bunch of good places to do it. Use the theme in more places than just to but it's probably a good idea, add a navigation bar we didn't do that, try switching to a different build tool like VT or snowpack or ES build.

[00:03:44] You can also go like the classics, right, browser file, Webpack, Rollup anything like that. You can try and migrate this to react 18, it shouldn't be too hard in his current state. But then you can start playing with things like suspension, and I'll talk a little bit about suspension in intermediate, but there's a new way of doing like data loading suspension which we don't talk about and we will talk about VA whenever this that happens 6 months or so.

[00:04:14] Actually might have on here if you wanna kinda of preview, I did so I put with 18 here. So if you look at this, you can go through the lessons here and I got all the way through rebuilding this course in version 18 cuz I thought it would be out by now, and it's not.

[00:04:36] But if you go in here for example, probably the most interesting thing here is in react capabilities if you go in here to suspense, actually talk about how to build the details page using React 18 with suspense. So, I make no warranty if this is gonna stay up-to-date.

[00:04:54] I'm actively not giving you a warranty that this is gonna stay up-to-date. But if you wanna see what I wrote and was going to teach before I switched everything back to React 17, this is where it is. By the same token, I believe that I did that for the projects as well.

[00:05:13] Let me make sure that's true I did with 18. So if you wanna look here at portals and ref 13, you can see the state of the project with reacting to you. So for example here in details, you can see here I built it with suspense and what's called the like a resource loading paradigm using suspense and stuff like that so pretty fun stuff.

[00:05:45] Again, I make no warranty that this is gonna be up to date, V8 of this class will have that stuff all up to date and ready to teach. Okay, and then yeah let me know if you like it. Please tweet at me, I am the worst at responding to particularly LinkedIn DMs.

[00:06:05] Having worked there, I try and spend a little time on that website as possible but definitely public tweets are always super appreciated start of the repo. That's always super helpful as well, yeah. And just thanks for sticking through the intro. I'll take the like yeah. Last sense of questions now.

[00:06:23]
>> So you had promise to give us your thoughts on XJS.
>> We're doing shots first though [LAUGH]. Let's talk about like the higher level frameworks a bid for react cuz there's a few popular ones. The most popular one is gonna be next. Right, Nextjs. I am a big fan of Nextjs, your course website here.

[00:06:53] This one actually just rewrote Nextjs, I've been using Gatsby for 3 or 4 years now. A lot of front of masters websites that other instructors have made, I know Gen Z used it. Think primitive used it once. Some other of the front of masters instructors have built their course websites using my Gatsby course starter.

[00:07:20] And I just rewrote it Nextjs and it's like 100 times better, not to say anything Gatsby is terrible, it has got its own problems. So all right, let's talk about when you would use one and then how you would select it so, react like I said is fairly opinionated about the server element of it, it's fairly opinionated about how to load data Like how to load data.

[00:07:49] It's fairly unopinionated about kind of all that kind of stuff. It's really meant to just be like here's how to render your code, and it's gonna get out of the way of doing anything else. Now, sometimes more opinions are helpful. If you have a very typical use case like rendering a blog for example, right, that's been done so many times and there's a really optimized way of doing it like rebuilding the wheel every single time is not a useful thing.

[00:08:15] So something like a higher level framework like Next can be super helpful about that. Let's just look at the the code for the course website. All I wanted to do is I have all these lessons here, right? So if you look at like the, I don't know one of these.

[00:08:36] This is just markdown. It's got a title and a description here in the front matter, and then it's just rendering this stuff out to kind of a blog post, right, it's like a blog post that's been like optimized for courses, right? Pretty solved problem, I could have built this all with React and made my own build process or I could have done it with parcel.

[00:08:58] But why would I do that when something like Next exists and it does that already super well, right? All I had to do here is I had to write a little bit of a data loader that took in all of my course information, that's like my course config data.

[00:09:15] This one takes all of my markdown in and then, renders it out and then spits it out into a blog post. And then next has a really cool feature. Let's see if I can show you in like the package.json that you just do next build and next export and it renders everything out to flat static HTML documents.

[00:09:35] Which is awesome because then you can host all this stuff on GitHub pages which is totally free, right, and it never goes down, then you can take that a step further, which I did. And you can build that into GitHub actions, right? So then anytime that you push to my repo, it just rebuilds it and redeploys it.

[00:09:52] I don't have to worry about anything. Everything just works. So I'm just gonna try to draw an arc of like how I landed on like, this is really awesome for Nextjs and I use Gatsby for years and I found that the graph QL is awesome, but it's not a very good abstraction for re querying against a file system.

[00:10:13] So Gatsby's heavily based on graph QL and it just, it got really finicky and awkward to work with. So I preferred to just going back to working with JavaScript and reading, using no JS to query the files as system, which it's very good at. So, all this to say Nextjs big fan works really well if you have a, I don't know, most problems that's probably what I would start today with if I was building like a front end, middle end kind of application.

[00:10:42] It's really easy to write your own API's and it's just basically express like, right? I probably wouldn't go back to using Gatsby after fighting it so many times. It's just some trauma there that I have to get over. [LAUGH] And then the new player out there is Remix.run.

[00:11:02] There's a coming soon course from Frontend Masters on Remix, I like to think of after having actually this is funny too, I built this course website as well on remix cuz I wanted to get more familiar with it, see if I can show you repositories remix. Yeah, remix core starter, so I built my, same lessons here, same structures and everything like that.

[00:11:32] I rebuilt this course website as well in Remix and I found that Next just had like a better fit for it if you're going for purely static flat documents like a static site web generation. Remix actually doesn't support that which is fine, it just doesn't, Remix requires its server component, Next, it's, you can have both the server side part of it or you can go for static file generation.

[00:11:56] So if I was gonna go build something like a ecommerce website today, I'd have a hard time picking between Remix and the Next. Personally, I'd probably end up choosing Next but that's cuz I'm just way more familiar with it and generally when you're trying to make money, it's a good idea to pick things that you know [LAUGH] to focus on the money part not on the tech part.

[00:12:18] But I would have no problem with anyone coming to as hey we're building this Remix style run and be great high fives like let's go do it, right, it's a pretty cool piece of software but it's meant to be more like Rails as a more than it's meant to be like Jekyll, right?

[00:12:35] As opposed to Next which is meant to kind of be either, you can definitely use Next like Rails and opposed to Gatsby which is much closer to something like Jekyll. I think people would guess who would probably take offense that I said it that way, but that's how I always used it.

[00:12:54] So Gatsby is just so slow. That's my problem with it, it's like you rebuild your site it takes forever. Yeah,
>> And so now in the last Nextjs workshop that was done here. We were shown like how you can do edge function super easily or like the serverless stuff, and that was wild.

[00:13:14]
>> Yeah.
>> To have just a new like component.
>> So, yes, absolutely. Remix actually works the same way. Yeah, it's optimized for serverless deployments. So it works on Netlify, it works on AWS and lambda. I don't know, what they're doing about edge stuff at the moment. I imagine it works on Edge stuffs.

[00:13:31] It does, it works on Cloudflare workers, so it does work on Edge stuff. Next is heavily optimized obviously for sell because they are the people that make it and good for them. [LAUGH] It's a great business model. Guillermo is a very smart person. But yeah, they're both really cheap to run cuz they'll run in surplus infrastructure.

[00:14:00] Yeah, I think I'll leave it at that. Yeah was that Scott that taught that class?
>> Yes
>> Scott's my hero His next course is amazing. By the way, if you wanna learn about Nextjs from someone that is truly good at it, definitely catch Scott's course on Nextjs Cool, other questions about anything that we talked about so far?

[00:14:25]
>> Looking for your opinion on Redux, but I'm assuming you're gonna get into that intermediate react.
>> Correct, yeah, if you wanna know my opinion on Redux, you got to spend like another hour with me in my course [LAUGH]. My one sentence opinion on is typically you wanna use React context.

[00:14:43] But there are use cases where Redux really shines. So there are places I still would use it. They're just rare. It's a fairly good way to put it, I think. Well, thank you for sticking around for the complete Intro To React. This was really super fun to teach.

[00:15:02] And I will catch you at the complete Intro To React V8. This is a fun course to teach and yeah, hopefully you enjoy it.
>> [APPLAUSE]