React Component Patterns by Michael Chan

all right so I'm going to talk about five different types of react components and so this is kind of this is something that I was kind of like thinking about I am like like pretty dumb and so like like really dense and it takes me a really long time to like learn common things so I wasn't like classically trained in like computer science and all that I just kind of like picked this stuff up you know like HTML CSS a little bit of JavaScript and like that's like that's where I am right now I know a couple of things so like you read about you start learning reacting like there's just all of these like really amazingly smart computer science e people working on these things and you read these posts you're like I am super dumb because like everyone seems to know what these things are and like I don't so I am now that I know a little bit about a couple things I kind of wanted to like do like an experimental talk where I talk about like the shape of something before the technical part of it so like a lot of these things once I understood like a shape and like how these things kind of interact together and the timing of them all and like what works with what and what doesn't um everything was a lot easier and I could remember and I could like work better so these are five patterns that will help you to be a more productive react developer and be able to just kind of decipher the blog post that you read so we're going to start with this now I need a little bit of help from you all this is not a trick I'm not like trying to trick you I just need a little bit help what shape is this circle excellent okay what shape is this it's a little bit different small circle that's right okay what do we have here we have a small circle in a circle yes two circles the target kind of I'm gonna go with small circle in circle all right this one gets a little tricky what we got yeah that's true a little ring of fire on the outside oh man oh man so we have a small circle in a circle in a dotted circle or a nipple with a ring of fire okay last one this is the this is our fifth pattern it is a small circle in what does that look like - circle in a circle okay so have small circle in a - circle in a circle how many times can I see a circle tonight okay so we're going to start with circle when you install react for the first time you don't get a lot you get a circle you get this one thing you get a circle and this is a component a component is a circle it's the one thing that you get when you like NPM install react and that circle comes with a bunch of like stuff like API stuffed into it so like renders stuff Jael I can deal with props and context and and state and like lifecycle events now one of the first things that I learned when learning react was there was kind of this this arbitrary separation of of components so you only have the one thing but there was kind of a line drawn down the middle where some components would only use a certain subset of the the API and then other components would use the like converse subset or whatever so like you would divide the api's in half and then like one type of component uses half of it and the other type of component use the other half and if you've read any of the blog posts about react these are kind of called like smart or dumb components or like container and presentation components or controller view components or data and display components they go by a lot of different names and so I'm sticking with circle and small circle so the circle is one it's like totally capable of using like all of the API but it only uses the stateful like like state and life cycle events and the small circle just uses render props and okay and so like one way to think of these is that the circle is stateful component and the small struggle is a stateless component because it doesn't use any of the state api's okay so circle and small circle from here on out maybe I don't know okay so those are our first two components I'll go back so so one is circle only uses half of the API smallest circle uses the other half so that's one and two we're two down we only have three more to go okay so the second one that we looked at was small circle in circle right so like hold up I just put those back together like this is ridiculous like I just took all the time to separate them and I'm putting them back together so we we had one circle we divided into two and then we said like somehow they're different and then we put them back together like dub TF what are we doing here so that's an excellent question like why did we put these things back together what did we get by separating the two so the cool thing that happens like when we separate the two is that we can make big circles with the same small circle inside of it so we can have a small circle in a gray circle we can have a small circle of green circle we have a small circle in a small circle and a red circle a small circle in the blue circle we can have like we can have any type of outside big circle that we want around this same small circle so we can reuse small circle and that's actually like a really big win because we only have to write small circle one time and then we can use it in our app like as many times as we want by putting other circles around it so small circle and circle this is a very important pattern so now we'll start to look at some code like what does this look like so this is the whole thing this is small circle in circle and small circle okay so let's start with small circle small circle is very simple this is a component it's just a function called small circle it takes some props and then it returns a react element that uses those props okay like super simple now let's look at small circle and circle so this is the the big outside circle and this one as we've talked about it uses the state API so it's it's got some state on there I didn't have enough room to like actually show like lifecycle events but this could use the lifecycle events as well to get that state and then it renders small circle with that state so it says I have the state I'm going to give it to you I know that I know what you need to render so I'm going to give it to you so so that's it so this is small circle in circle this is our third component now this type of component usually goes by the name of a container component I don't think that has a like very contested name I think everyone just calls them a container component now this like burn this into your mind because this is the third and like part of the last for every like the everything that we're going to talk about today is in service of this relationship right here like a big component around like a small component that just like you know it takes data and like spits it out to the screen so this is only half a solution though right so we were able to kind of keep the one small component but like we're not able to like reuse the circles right because all of those have to know which component their rendering they're all rendering small component so I want to be able to reuse both circles so that seems like a reasonable request how can we use both circles how can we just kind of like have like this like big circles and small circles and jam them together whenever we need them everybody do that I'm just kidding don't do that it's probably a lawsuit waiting to happen um so we're gonna talk about number four our fourth component can you believe it we're already up to number four it's only been seven minutes okay so number four so this is our dotted line or circle small circle in circle and dotted line so what is this even do okay so this is what it looks like okay that's all it looks I mean honestly pretty similar to the last one except we have like a little bit more going so let's look at that a little bit more so this outer dotted circle on the outside that is a function okay so the circles with the solid lines they've been components all this time but this one is a function okay and this dotted circle function it takes any circle as an argument so here in like the bottom of our code so we have our so we have a circle we have a small circle which we've been using all this time and so we're going to pass small circle into dotted circle and see what happens so we would call dotted circle with small circle and then like right now let's just assume that it returns it okay it doesn't it's going to do some do some funky stuff it's actually going to like on the fly make a big circle for us so it's going to instead of returning just our component it returns a big circle with our component jammed in the middle of it so like I got a function I'm like hey function here's my small circle and it says I got something for you I got your small circle but I'm put a big circle around it so we end up with our same small circle in circle component right and so we can use this anywhere we want so we have small circles in circle so this is this is our container component right but it was like dynamically created we were able to use a function to like you reuse both parts said here's my small component GM it and a big component here's my small component jam and a big component so what's the name of this anyone have a guess of what the name of this is anyone like kind of tracking with maybe what what kind of pattern this is yeah that's right nice fork higher-order component also known as an enhancer component because like it's kind of like contested like which part of it is like the higher order like what because it's not really like I don't know it's weird it's really a function okay so this allows us to mix and match we're like we got our small small circle or circle gem them into each other so we're in our fifth and final one now we've done that we have kind of like a similar thing going on we still if you if you look you can see the container component in there and then last time our kind of perforated circle was a function okay so now the function is moved from the outside to the inside all right let's look at this last of the five patterns so here's all the code for this pattern let's break it down alright so at the bottom you can see that this is kind of like where we're like using it so we're like using circle on the top is where it's defined so this is like kind of interesting we've actually we actually have circle just as like this standalone class it's like not in a function it's just kind of like standalone I'm so this looks you know pretty similar to the other ones it has that same state signature it could go use life cycle events to fetch state and rerender and all that stuff but it gets different right around here this parts a little bit weird so instead of rendering another component it actually calls a function so it's render its render method calls a function and it calls it with state and if you look at where we're using the component we're actually providing that function that we want to render with on props and so then we kind of have that function we receive state and then we do something with it well we're going to render out small component we have our small circle we have our circle and we know what to do with it so we're going to take the state and we're going to like render small circle and we're gonna you know just put our state right on it and that's that's pretty much it now this one's actually kind of cool because if you look at the way that that's written this section on the bottom the small circle and circle example here actually looks a lot like the kind of like visual representation of the pattern where you have your circle inside of it you have the dashed dashed function and then the small circle so this is a really interesting pattern so in again you end up with a small circle in circle container component now this is a really interesting pattern because it's been around for like a long time obviously just like all these things but it's really started to kind of come into light again with them so react motion uses this the latest version of react router uses this like exclusively to render your routes so knowing this pattern buys you into a lot of really cool libraries so this pattern is called the component with render callbacks so it gets a so you provide on props these functions that are going to be used to render components with state so we did it we're at the end we got our five components we have a stateful component our circle we have a stateless component our small circle we have a container a component which is the two jammed back together again we have a higher-order component which is a function wrapped around the circle that takes a small circle as an argument and then stuffs it right inside and we have a component with rendered callbacks which is a component that had it takes a function that calls that function with state and then gives you an opportunity to render a component right inside a small circle right inside of it and all of these are in service of this idea of container components so when you're you know reading up tonight like if you if you need to just pick one of these read about container components because all of these are going to result into the same thing so this is a good place to start I am fantastic and I just put online a new video course I'm at Larry on comm and it's free until I have the time to figure out how to chart for it so now is a good time for you much that anyway that's it thanks for listening you [Applause]

Channel: Full Stack Talks

Views: 68,712

Keywords: iMovie

Id: YaZg8wg39QQ

Length: 15min 11sec (911 seconds)

Published: Fri Feb 03 2017