Get Started with the Epic Workshop App (for React)

00:00 Hello and welcome to Epic React. I am going to show you around and get you an idea of how you're supposed to go through this awesome thing that you just purchased. So we're going to start on the Get Started page. This is actually probably where you're watching this video. So epicreact.dev slash get-started.

00:19 And this is going to give you an idea of what to expect as part of this workshop series. So, if we scroll down here, we're gonna see these available apps. This could look different for you based on the future apps that we add. But these are the apps that are part of the workshop series. Some of these are tutorials that are free for anybody to go through, and other of these are part of the workshop series that you're going through.

00:46 You'll notice as a part of this, the deployed version of the application is going to open up a deployed version of the app that we are gonna be working through. These all just will play for you if you have a license to Epic React, and so you can go through each one of the exercises, you can see what the solution looks like and everything, but you don't want to be running or watching videos in the deployed version of the app because we want you to run things locally on your machine. And it's actually very important. That's part of why we do things the way that we do, is because you should be practicing with the tools that you're going to be using when you actually are doing the work. And so that's why we're going to go to the setup link here.

01:33 This'll take you to the GitHub repo and show you the setup instructions. The GitHub repo for the first workshop here is React Fundamentals. And in the setup instructions right here, we can just copy this. And I'm gonna open up my terminal, and we'll go to our desktop. And let me bump this up a little bit.

01:53 We'll even full screen this thing. Here we go. And I'm just going to paste what we had in that readme. So what it's going to do is it's going to do some system validation, make sure that you're running on the latest version of Node and all of those things that were described in the readme. And then it's going to run installation for all the dependencies.

02:16 It will run some custom setup for this specific workshop. And one of those things is to set up the first problem app. We can take a look at that here in a second. And then it's going to validate that things were set up properly and all that. And once you get the workshop set up complete, then you're good.

02:34 If you don't get that workshop set up complete, you'll probably get an error. Read the error and hopefully it is descriptive enough for you to know what you need to do. Common errors include using a VPN that doesn't allow you to access public NPM, for example, so you want to check those sorts of things. But if you can't understand what's going on in the output, you ask an AI assistant and it doesn't explain what's going on or help you go through that, then you can go to the repo, open a new issue, and provide as much information as you possibly can. Now that we have everything set up, let's go over to our editor.

03:13 We'll open up this project in our editor, and we'll see a bunch of files in here. You'll see the exercises directory and I'm gonna tell you right now, you don't ever touch anything in the exercises directory unless you're contributing back like some sort of documentation or bug fix or something like that, which I absolutely welcome. But this is basically the template for each step in all of the exercises. So you don't want to be messing around in exercises directory. Where you're going to be playing around is in the playground, and we'll look at that here in just a moment.

03:44 Let's run the app with npm start, and I'll option click on that. This is 5639, that is T9 for Cody. Cody is the koala, he's our mascot and he helps us out with a lot of things. So here we have our onboarding. The video that you're watching right now should appear here and you can watch through this if you haven't already.

04:06 Then I don't know why I'm telling you this because you wouldn't have known that I told you this, but make sure you watch all of the video. And once you're finished with that, You click I've watched it, let's go. And now we're in the app and we are being asked to authenticate with epicweb.dev or it could say epicreact.dev. These are the same. The backends for these are exactly the same.

04:28 So we're going to retrieve the code. And this is going to give us a special code to verify that we are authenticating properly with the right app and all of that. So, youngbat82, I could continue, and that goes over to epicreact.dev to activate youngbat82, confirm device. And then we can come back here, and once that confirmation is received, now we're in a logged in state, and we're looking at the first exercise, or the first page of the React Fundamentals Workshop. You can read through all this stuff.

04:58 You've got Peter, the product manager, introducing himself, hello Peter. And we've got a bunch of other UI elements here along with our list of exercises. You can navigate to any one of the exercises using the nav here. And you'll notice also there is this continue to next lesson button which you can click on. So before we get into that though, I want to go to your account.

05:22 So if we come over here, we're going to have a couple of options. First, opt out of presence. So as you're working through the workshop, you're not the only one working through all this stuff. And we've got a bunch of people who are working on these workshops as well. So any Epic React or Epic Web Developer working through workshops will appear here.

05:40 You'll notice some of them have no avatar and those are the people who opt out of presence. So there will still be an icon representing you in there, but it's not going to identify you. All that it identifies you with is your avatar, which is controlled by Gravatar and your email address. Nobody can determine what your email address is from that, and your name, your first name. So if you don't want to show up in there, feel free to opt out, but I think it's more fun if people see people that they recognize, like, oh, we're working on this together, like let's talk about it, whatever.

06:17 And then we also can log out, but we don't wanna do that. We don't wanna log out. The other thing that we can do in here is connect to Discord and this will give us access to the exclusive Discord channels for Epic Web and Epic React developers. And we wanna be there because that's where questions are asked and answered and you can interact with the rest of the community and so we're going to click on connect discord. Now this is going to ask us to log in and discord makes it really easy to accidentally create a new account.

06:46 So make sure that you're logging into an existing account and not creating a new account in this process. So I'm going to log in with one of my Discord accounts here and this is going to ask me to authorize an external application, the Epic Web Bot. I promise to not do anything wrong, and the Epic Web Bot code is open source, so feel free to look at that. This is just going to add you to the server. So we click Authorize, and then it's going to take me over to the app again and say, hey, we've connected your account.

07:19 So now I'm connected as Cody Koala. And if I go to discord.com slash app, then we'll find that we have been added to the Discord. However, there's not a whole lot here to see because we haven't yet fully joined the Discord server. So we do see this notification from the bot talking to us and saying, hey, you need to finish onboarding. If we go to how to join, that will explain how we go through the onboarding process.

07:50 So let's go to log in. And I'm actually going to sign out because I was already logged in. And we'll go over here, we'll say me plus Cody at kentcdodds.com. And that will send us a magic link so that we can log in. That will appear in my email, and I click on that to log in.

08:11 And I already have an account, so you would select your team. I chose Red, and then provide your first name. And then you'll be brought here, where you can connect Discord. So I'm going to disconnect here, and I will hit connect to Discord, and we'll authorize again, and What this will do is it will give you full access to the whole Discord. And so now we can come here and we'll see we have access to all of the channels in the Discord and that is a really awesome place to be in.

08:42 And one of the things that we have access to is the Epic Web Discord where we can go and ask questions and whatever else we want to do as part of the Epic React and Epic Web series of workshops. So that gets us in Discord and that is quite useful. We'll look at that a little bit more here in just a moment. All right, so we've connected our Discord, we've logged in, we are ready to go with our first exercise. So if I click on this, this is gonna allow me to continue to the next lesson.

09:13 And so here I'm starting on that first exercise. Now, it is important we kind of skipped this first page. You want to watch the video and you want to read through all of this before proceeding to the first exercise. But each exercise is going to look something like this. You'll have an introduction.

09:30 You'll have a video where I maybe forgot to start the video with a smile. And so I have a funny look on my face. But read through all of this in addition to watching the video. And once you feel comfortable with this, you can mark as complete. And this is how we track your progress.

09:46 So we're not going to automatically track your progress as you watch the videos, because your progress is not measured by videos watched, it's measured by skills acquired, and I can't determine whether you've actually acquired the skills or that knowledge or feel like you're ready to move on. And so you have to click Mark as Complete for every step as we go through. So now we'll go to Start Learning. And here we are brought to the primary page for each exercise step. So there are a couple of things in here.

10:17 First, we have a video on the left. You'll notice actually here at the top we have the exercise, and then this is the step, and then this is the part of the step. So this is the problem part of the step. And then here's the title. We've got a video we can watch, you can open up the transcripts, and this is a pretty short video, so there's not much there.

10:37 Read through the instructions here, Peter, the product manager, is telling you exactly what to do. Cody the koala, here he is right here. Cody is going to tell you what you need to do throughout the workshop exercises and everything. Here we have on the left side, we have the playground. And so there's actually nothing going on in here because our first exercise, we start with a blank canvas.

11:01 Then we also have the problem. And so this is your starting point for every exercise. And so if you're kind of going through an exercise, you get partway through and you're like, wait, what did it look like before I started? You can look at the problem tab, and that will show you what it looked like when you started. The solution is what it's going to look like when you're done.

11:17 So your playground should behave and look the way that your solution looks when you're finished with this exercise. You also have the tests, and these tests are going to tell you if you have completed the task that you've been invited to complete. And so here we have those tests failing. And so it's telling us, hey, we can't find the root element. So you need to render hello world into the DOM.

11:44 And so that is what you're going to do in this exercise. You can also open up those tests in a separate tab, you shouldn't ever need to do that. And then we also have the div tab, and this is going to tell you the difference between where you are right now and where you're trying to go. Now, what the solution looks like. You want to use this for helping you catch typos and small things like that if you get stuck.

12:06 You don't typically want to preview this too early because then you're kind of cheating yourself of the learning opportunity. But this can be helpful if you get totally stuck on something. Additionally, you can actually change the starting point and the end point of this diff. So you can say, hey, what's the difference between our solution and the next step? And you'll see, oh, we are just adding some comments and oh, there's this Epic WS thing.

12:32 Oh, that's interesting. Automatic browser reloading, huh, cool. So you can use that, and in fact, if you hold down the Option key or Alt, then click on the diff, and then you can get a full page view of what this looks like. And this is actually what I use as I'm developing the workshop material. And then finally, we have the chat tab.

12:50 And this is going to show you all of the chats from the Discord app. You click on the little Discord icon here, and it will actually open the local application for Discord on your machine. You click on this one, and it will open up the web app. So you can do one of those as you so desire. So there is that view.

13:12 Let's go ahead and go through this exercise. So first I'm going to watch the video and I can, here let's turn that down, I can change the speed so we can even go all the way up to 4x. Somebody asked me that jokingly, could we have 4x, and I was like yeah sure actually it's not that hard. So You can go up to 4X if you're really that wild, 2X or 3X, whatever you want to do there. You also have control of the captions, so you can turn on captions.

13:40 And then we have picture in picture, so if you want to move the image around or have it open in a different area. And then you also have control over the quality, and you can go forward and backward and control the audio. And like I said, you have the transcript as well. So What you're going to do is you'll watch the video, you'll read through the instructions, you'll click on the files here so you know what files are relevant. For most of the Epic React workshops, you're going to be working in just a couple of files, but by clicking on this, or any time you see the keyboard, clicking on that, it's actually going to open your editor in that file, which is quite nice.

14:22 So it opens it in the editor that is closest to the Playground directory, this is where you're going to be working. But you'll notice the Playground directory is gitignored, and so if I wanted to go to index.html, well, I have it opened. Index.html, that's a recently opened file. But there are a lot of things that your editor might do because it's a gitignored file. Additionally, if we are looking for index in here, we're going to see there are a lot of index files in here, and that's for each one of the exercises.

14:52 And for that reason, I recommend that you actually open up the Playground directory in a separate instance of your editor. So keep this one going, because this is where we've got our logs and everything are gonna be happening here, but you should just have the Playground Directory open as a separate instance of your editor. And then whenever you click on this keyboard or you click on files and click on that relevant file, it will open up in your Playground directory. Now, if that doesn't work, we've got some troubleshooting steps of some environment variables or a .env file that you can add to the project to make sure that it's opening in the correct editor, but it guesses pretty well what the right editor should be. So with that now, let's go ahead and complete this exercise.

15:41 So you're gonna follow the instructions. We've got Cody the Koala right here. We have Dominic the document with documentation links. We have Marty the money bag giving you really strong hints. Marty is there to say, we're not learning about this right now, so it's not really irrelevant for you to know how to do this.

15:56 I'm just going to give this to you. And we have a couple other emoji characters as well. So we'll start right here with an HTML document. We've got our body and a div with an ID of root. Our AI assistant kind of just did that for us and some of you might be thinking, oh I should probably turn off my AI assistant right because I'm gonna not learn if I don't do it myself.

16:18 And you're welcome to do that. You can do whatever you want. But I actually recommend that you keep your AI assistant on. These code comments are really going to help guide the AI assistant and stuff. And so maybe it feels a little too hand-holdy.

16:31 Your AI assistant will basically just do everything for you. But a really important aspect of working in the modern age with AI assistants is that you are able to generate code with the assistant and then evaluate it and make sure that it is working. So that evaluation step is actually an important step in the process of knowing how to build web applications. And so I think that it's actually kind of useful to keep your AI assistant running. And so you're welcome to do whatever you want to, but I'm gonna keep the AI assistant running.

17:05 And in fact, in the videos, I have the AI assistant running as well. So we're gonna create our script type of module, and then we're gonna make our document get element by ID root. So we grab that element. We have our create element for the div. We add a class name and text content, and then we append that to the div.

17:24 If we save this, now come over here to our tests. We can see that our tests are passing. We can look at the playground. That looks like the solution looks, and because the tests are passing and everything, and I know what we're supposed to do, I feel pretty good about this. Now, I actually recommend that most of the time you have the Playground open in a separate tab.

17:45 And the reason that is a recommendation here is because this application has a whole bunch of other things going on. And if you open up the DevTools, you're going to see like a whole bunch of other things going on in the client and for your application here. But if you open up the Playground by itself, then all you're seeing is what you coded. So here I even have the code comments in here. I have my HTML.

18:09 This head gets added automatically by the browser, so I'm not lying to you. All you see is what you have written. And that's really useful because there's not a bunch of extra noise going on in the console for example. So I do recommend that you have this open typically in the videos you'll notice that I have the playground open on this side and the my editor open on that side. That's the way that I would do it if I was going through it myself.

18:33 And in fact, that's the way I did it in the videos. So once you feel like you're in a good spot, and then you can hit next or this little arrow here, these forward and backward arrows are just the same as next and previous. And then we get to the solution part of this step. So we're still in the first exercise, we're still in the first step, now we're on the solution side. And in the solution, we can watch the solution of me going through this and solving this particular problem.

19:04 Again, you have the transcript and you can click in any part and say, oh, how did he do that? And you click that and it'll take you right to that part of the video. And sometimes Peter, the product manager, will just like pat you on the back. Other times there will be Olivia, the owl, who gives you best practices and different things. And she'll be in here telling you like, good job, this is, and here's something important that you need to understand.

19:25 Sometimes there will even be subsequent videos in here as well. That's like, hey, when I recorded this the first time, this was the state of the world and now there's a new feature or something and I'll record a video to demonstrate that as well. So once you feel pretty good about this and you're set on this lesson, then you can mark this as complete and that gets our progress going. So you'll see here we have made some progress in this exercise, pretty cool. So now we can go to the next step of this exercise.

19:56 So we finished step one, now we're on step two and you'll notice some things have changed. We now have this set to playground thing that's flashing in our face. We have it right here as well. And even in the files, we have the set to playground thing. So what is that?

20:09 Well, the playground is actually an important part of the experience because it allows you to just say, I am only working in this editor and in this playground scenario, but I want to like skip a couple lessons or I wanna go back a couple lessons or whatever, and I wanna start from there. And so you will have this playground directory updated for you as you click on set to playground. So we click this and all of our code has been updated. Our previous implementation has been removed. If we ever want to get back to what the solution was, we can click on this and open up that solution.

20:44 And this is what the solution was at the time. So you can very easily just go to any step and it will get your code to that place. But if you really want to like save your work for some reason or something like that, then you'll need to rename the Playground directory before you click Set to Playground because I'm going to overwrite all of your stuff with that next step. So now that we have clicked Set to Playground, again, like it's important that you click on this before you go through any of the exercise. Our Playground is all set, our UI has been updated to whatever that playground is.

21:18 And now we have the next step to go through. We go through that step, we verify that the tests are passing and everything, and then we can go through the next and watch the solution and continue in that way. Once we are satisfied with, or once we are satisfied with our learning that we can mark it as complete. And then we'll finally be brought to this final step for the exercise. And this is just the finished page.

21:42 I'll just give you a dad joke, which is kind of fun. And you can feel free to chuckle a little bit, laughter is good for you. Sometimes I also am encouraging and everything too. But, and occasionally you'll find additional bits of knowledge and information in here as well. But the reason that we still have a mark as complete for this, even though it's not really something that you're learning, is because this step is very important to your learning, and that is writing down what you learned.

22:11 You're welcome to leave feedback, and I have a space for here to elaborate on you what you learned. You're welcome to to do this here. You'll get an email with your responses, but even if you don't do it here, I want you writing down what you learned in every step because if you don't, then it will go in one ear and out the other. So it's important for you to write down what you learned and then once you finish with that you can mark as complete and then congratulations we get confetti you finished this exercise. Now we can go on to the next step which is the next exercise and we continue in this fashion until we're completely done.

22:47 Now, if you close down and start up again, you can always click on the double arrow and it will take you to the next part of what you're supposed to be doing in this series of exercises. So it's gonna be a ton of fun going through all of this stuff. So there are a couple other things that I wanted to talk about before we get finish up here and that is some of the exercises are a little different from the ones that we were looking at here. Lots of these exercises are going to be pretty straightforward. As far as the code is concerned, if I set to playground right here, then open up the file here, you'll notice now it's not an index.html, it's an index.tsx.

23:29 And We don't even have an HTML file in here, and that is because for the most part we want to be working in TypeScript and we want to have all of our tooling and everything. And so when we're working in this environment, the Workshop app is going to create that index HTML for us and it actually dynamically compiles the TSX file. So you'll see it's like, whoa, look at all this. There's so big. So it just makes a bundle for us.

23:58 It's kind of interesting, kind of cool. But the important thing is that we're going to be working in just a handful of files most of the time. However, sometimes in like the performance workshop, we want to be talking about build tools. In the React Server Components Workshop, we're going to be doing server stuff. And so I want to show you what that looks like because we can't just load up an index HTML file and load the files client side.

24:23 We need to have a server in place. So in the React server components workshop and the performance workshop for a couple of these, we're going to have a slightly different UI in the Playground, and that is because we actually need to run a server. And so rather than just like instantly rendering the thing, you're gonna hit Start App, and this is going to start the application. Now, for our first exercise, our job is actually to make the server do something. So maybe we should skip ahead.

24:51 Let's go over to the Node.js loader step right here. Set this to playground and sometimes this will blow up. You can hit the refresh button and if that still doesn't work, then you can stop the app and then start the app again. And if things are ever not really working very well for you, you can just stop the app and start it again. If you wanna be a pro, then hit the Alt key or Option key, and that will change this to restart app.

25:21 So it'll stop it and start it right away for you. And then you can hit refresh here. And the URL bar doesn't always work super perfectly. So you may just decide to open this up in a new tab and then everything is just literally hitting your development server that you're running as part of this process. The other thing that's important for you to understand about this is that we will have the Playground directory open in its own instance of VS Code, but all of the logs are going to be inside of the same place where you ran the start script because this is where the output for or this is the process that is running your server.

26:04 And so you'll be looking in here for any logs that you need to take a look at. So, with all of that, that should get you pretty much all the way there. We also have a problem and solution, we'll have a start app script. And if you start these, then they will be running on separate ports. So you can open those up and compare, okay, here's where I'm at and here's where I'm trying to get.

26:27 As far as the experience goes and things. If you proceed, then it does not automatically stop. So you could, if you just keep on starting all these apps, you could have like 30 apps running all at once, which you probably don't want. And so you can hit stop app. And actually at any time you can also go to the admin route and This is going to show you all of the apps that are currently running.

26:49 So here we have the 0301 solution is running and the playground is running. Here are the processes we've gotten and various things like this. So if things are ever kind of funny, you can go to the admin route, clear the caches and stuff and try things again. And so that is important for you to understand as well. With that, I think that you're all set and ready to go with Epic React.

27:13 So thank you so much for joining us for this Epic React experience. There is also a frequently asked questions that you can go through and answer if you have any questions, they might be frequently asked. And if you do need to troubleshoot anything, there will be more instructions for troubleshooting things in here as well as the emoji key. So welcome to Epic React, I'm so excited to have you go through this experience. I am grateful that you spent the time to actually learn how to work through this application because you're going to be spending a lot of time working in this app and you want to be able to work in it effectively.

27:53 This is going to be a super awesome way for you to learn React and get really good at React. And I look forward to seeing all the cool things that you build. See you later!