Build an App with React Suspense, Hooks, and Context Workshop Setup

Michael Chan: [00:00] Hey there Egghead friends. My name is Michael Chan, also known as Chantastic. I am over the moon about this course. I can't tell you how excited I am to be working with Egghead, to be meeting you, doing this course on React Suspense.

[00:19] I saw that it sold out in less than 12 hours, which has me really excited about your excitement for the topic. I hope to do that a lot of justice. As a precursor, this course is a little bit advanced. Not so much that you wouldn't be able to follow along if you were a newcomer to React, but I don't spend a lot of time talking about certain things, like how you would write a component, or how they compose together.

[00:52] I do talk about how all of those concepts interplay with Suspense. We talk about Suspense and how that impacts component organization. We talk about lazy loading and how that impacts component organization. A lot of these things are how you would modify your existing thinking about React and organization structure and component relationships in a world with Suspense and lazy loading.

[01:21] That's the big takeaway that I hope you get from the course. Beyond that, I will show you all of my favorite tips and tricks for composing components together after we get through the main Suspense stuff.

[01:36] Where is all this going to live? Great question. I am working right now, actively, feverishly putting in all of the disparate ideas and notes and things that I've written all into this one repo. I'm hoping that it's a really good way for you to explore the concepts.

[01:57] I am going to be working from this repository for the course, so I wanted to show you how to get in there, get around. If you want to watch it, you'll be able to see material as I put it in.

[02:12] Where is it? First of all, it's on GitHub, under my user, chantastic/react-suspense-course. If you wanted to go directly there, it's just github.com/chantastic/react-suspense-course, with the dashes in between the words.

[02:30] Here, I have a "Read Me," that tells you how to contact me if you want to get a hold of me, what the goals of the course are, why you should care, etc. At the bottom here, I have installation and usage instruction.

[02:45] That's what we're going to follow along with today, because I want you to be ready to hit the ground running so we can hit all of those important Suspense topics right off the bat. We're going to go through that. Then I'm going to show you the general organization of the app, so that's not a surprise to you either.

[03:03] OK, OK. Let's see. The first thing is, we just need to clone this repository, run Yarn to get all the dependencies, and then Yarn Start will do it.

[03:16] Just for those who are curious, I started this from a Create React App. Very minimal modifications -- just took out a couple of things we didn't need, so it's all just running the latest React scripts with the latest React and ReactDOM versions. Nothing fancy going on here. If you're familiar with React scripts and Create React App, you're good to go. This should feel very natural for you.

[03:47] Let's get that URL, copy that, and I'm going to move this aside here. My new Catalina backdrop. Then we are going to find the directory that we want and code/chantastic, and we're just going to getClone and pace our thing. It's going to clone it as ReactSuspenseCourse. It happens real fast.

[04:13] I am going to just open that in code. The editor that I'll be using is VS Code. You can use whatever editor...It looks like I opened the wrong thing. Oh, I do this all the time. I forgot the CD in the directory. CD/ReactSuspenseCourse. Then I'm going to open it up in code.

[04:38] OK, there we go. That's right. Then, let's see. I'm going to run Yarn. That's going to fetch all of the dependencies. Yarn is the default package manager for Create React App.

[04:56] Also, it's going to be critically important for one piece of our setup. I'll show you that as soon as we get all these dependencies...

[05:04] [audio gap]

Michael: [05:04] and loaded and talk about them. It is taking a while. It might take a while, and this is why it's important to do this beforehand.

[05:19] OK, so we're done. You're probably thinking, "Dang, that's a lot of dependencies." Those are just Create React App dependencies. There's nothing special going on beyond the Create React App setup here, and I'll prove that to you just by showing you code.

[05:38] From here, we're going to run YarnStart. If everything worked, that should open up a browser for us at localhost:3000, if it's available. Great. We have that. I can close this up now. Now, I didn't do this appropriately, but when you start, you should see Lesson 1. It'll just say, "Lesson."

[06:08] The way that this is set up is that there is this source directory, which you should be familiar with as a React App user. That just has one index file. It's going to input a lesson as app and then render that app to the DOM. What this does is it allows us to easily switch between lessons.

[06:30] When I decide that it's time to go to Lesson 2, you can just switch this. I hit Save, and then that will get you to the starting point for Lesson 2. That is the first thing, is this is how you change lesson in here. You don't have to restart a server. You're just going to change that number, which is really great.

[06:51] That takes us to the Lessons directory. So far, I only have five of the lessons in here. It's going to be significantly more than that. When you open those up, you'll see an index.js file. That is going to be what we're using as the application.

[07:05] You can see here, it's just Lesson 1, and then also a readme. That readme is going to give you instructions based on the current lesson, Lesson 1, on how to get to Lesson 2 -- the changes you need to make. Consequently, the application for Lesson 2 is the solution to Lesson 1.

[07:28] Hopefully, that all makes sense. I'm going to be driving us through that process on Wednesday, so you don't really need to worry about that unless you're following the project along, or doing it outside of the workshop.

[07:41] I want to talk to you about one way that I am cheating in this project. I want to show all my cards right upfront. Suspense has been in React for almost a year now. However, they have not provided a React cache implementation for different libraries to use as a reference.

[08:05] At some point, I'm assuming at React Conf, they will announce that they have a React cache implementation, so that other libraries like Apollo and whatnot can use this as a reference for their data fetching.

[08:26] In order to use this today, with the modern versions of React, we have to build it from source. I made a video on Akit to show you how to do that -- to show you that it's really not that complicated or that magical.

[08:39] Now, in order for us to require it, as we eventually will, as just importing the package react-cache, I've done a little bit of trickery here using Yarn. Yarn has this really cool feature called Yarn Workspaces.

[09:02] What they allow you to do...This isn't the article that I want. What they allow you to do is they allow you to establish a directory on your file system, inside of your project, that acts just like an npm package, even though it's not published to npm.

[09:21] Instead of using a relative path to import react-cache, I've set it up using Yarn Workspaces so that we have this react-cache package. It uses the source that is the recent react-cache development version that works with the latest version of React.

[09:42] Let's see. In package.json, we're just saying, "Hey, we have an additional workspace in this repository called react-cache, right here, with an index file. Now, in our application, when we have an example that says we want to import react-cache, like we would from npm, just resolve that to this local directory. Don't try to resolve it via vn.

[10:10] A little bit of trickery there just because this is a very new feature. Probably in the next two weeks, we'll get a implementation version of this that [inaudible] . We're just a little bit ahead of the curve. I've tried to make it as reasonable as possible for you to use this, and then make a little tweak down the road. I hope that helps.

[10:42] If you have any questions about this project, about the course, I am so happy to help. You can hit me up on Twitter @chantastic, or via email, which is, if I can find it, all linked here on that repository, chantastic/reactsuspensecourse.

[11:05] I'm so excited to see you on Wednesday. I cannot hardly wait. Feel free to hit me up on these mediums and just say hi, introduce yourself. We're going to have a lot of fun on Wednesday. Thanks so much. See you then.