Advanced React Patterns Introducing Advanced React Patterns

[00:00:00]
>> Kent C. Dodds: This is my fifth workshop for Frontend Masters and I am so excited to be doing this. Yeah, Advanced React Patterns stuff. So this first slide is just bunch of little emoji and stuff. These are all links to things of interest. So I am somebody who lives in Utah, works for PayPal.

[00:00:24] I have a family and a dog. This is links to a picture of my cute puppy. My oldest is not even six yet. So I don’t know why we got a dog. But we did and she's adorable. Yeah, a whole bunch of other things. So, just to set expectations for the workshop.

[00:00:45] This is extremely hands-on. So, I'm actually trying something little bit different from one I've done before. Before, I've had these exercises that I will demo something for you and then you'll do something almost identical to what I did. And then I'll do that again what you did to go through the solution.

[00:01:08] This time, I'm actually just showing you the general like, this is what the end result should look like from a usability standpoint. This is a problem that we're solving. And then I just unleash you to that and there are really laid out comments and stuff to help you along.

[00:01:25] And then I'll be walking around to help with stuff and then I'll work through the solution. So, it is very, very hands on. This is definitely advanced content so if you are inexperienced with reactor or java script, you might have a little bit of trouble here. And so, for those of you who are experienced, if you can help out in the chat or here, in person, that will solidify your understanding of these concepts really well.

[00:01:53] So take advantage of that opportunity. And then somebody actually answered my pre-event survey with exactly this. They wanted to learn patterns that put a smile on your face when you're implementing components with them. And that's what these things do for me! So I thought, well, I'll just add that.

[00:02:10] Cuz that's what this is all about. Yeah, this is what it's not. So pretty much the whole thing is a toggle component. It's a component that just manages one piece of state. So, how many times do you need to build a toggle component? Maybe once. And how often does that toggle component need to be as flexible and advanced as this one?

[00:02:36] Probably never. But at the end, we'll convert that into something that's highly practical. And you'll see how the patterns that we have learned with this simple example can be applied to these more practical examples. So, don't be too concerned with that. And there's a wealth of things that you can do with react.

[00:02:58] We definitely don't have time to cover them all. So just prepare yourself for that. So here is what we are going to cover. Compound components, render props, state initalizers, state reducers, control props, provider pattern, higher order components and then our bonus Rendux. So, there you go. I should´ve made that smaller.

[00:03:26] So this is the setup, just go to the repo and follow the instructions. Everybody said they set up beforehand, it should be actually be really, really easy, especially considering the fact that you can run the whole thing in code sandbox. And you don't have to actually install anything.

[00:03:46] So you can do this whole thing in the browser if you want to which I think is so cool. But yeah, if you wanna do it in your own editor, just follow the instructions. It should work on any machine. So as far as logistics, sorry more boring stuff, if you have questions, raise your hand.

[00:04:06] That's why we do it in this workshop format. I love this. When I do my screencast for Egghead, that's one thing I really miss out on. I can set up this whole thing so the environment is pristine and there are no weird errors and stuff, but I don't get any feedback from anybody watching my videos until after they're already published.

[00:04:28] So your job here is to ask me the questions that people two months from now are going to want to ask when they're watching this. So please if you have any questions, please do ask those. And make any relevant comments that you like. That would be really appreciated.

[00:04:49] We do have the workshop chatroom for those of you who are remote or even those of you who are here in person. Again, some people may not get things right away and they maybe asking questions in the chat. It's totally cool if you wanna answer those questions. That's part of your workshop experience is helping other people get this.

[00:05:11] So definitely take advantage of that opportunity. At the end of all of our exercises we’ll have, so all of our exercises have tests to validate that you’ve implemented things correctly. And for each one of those test files, there’s an extra test that has a link to a feedback form.

[00:05:31] That's not just a feedback form, it's an elaboration form. Scientifically proven, you reiterate what you've just learned, you'll retain it better. And so this is for you. It's also for me, but it's mostly for you to reiterate what you've learned so that you retain this. And so please fill that out when you're finished.

[00:05:49] If you have any questions from me, I say anything that is not really relevant to today's discussion, feel free to ask those on my ask me anything on GitHub. And then feel free to follow me on Twitter cuz I sometimes tweet interesting things, at least some people think so.

[00:06:07] Okay, so this is our routine for today. I’m gonna start out with explaining why, and give an intro to the exercise. And then we’ll do exercises. And if you are able to and interested in pair programming with somebody, that actually can be a really effective tool at understanding.

[00:06:30] And so if you can, then yeah, definitely, you’re welcome to chat and talk and invited to do that during the exercise. And then fill out that form. Some of the exercises have a bonus that you can do in addition to the other material. You can expound on the solution and make changes so if you finish early, see what you can break and prepare yourself with questions to ask me, would be really great.

[00:07:02] And then try to find opportunities to help other people. And if you find like typos and stuff like that you can also make pull requests to the repo. I should actually mention that I have had two people who have made pull requests, several pull requests to help make this workshop even better.

[00:07:23] So a huge shout out to these two folks.