1 00:00:01,110 --> 00:00:02,730 ‫Now that we have created 2 00:00:02,730 --> 00:00:04,710 ‫a few different components, 3 00:00:04,710 --> 00:00:08,160 ‫let's quickly talk about different component categories 4 00:00:08,160 --> 00:00:11,763 ‫that naturally emerge in most React code bases. 5 00:00:13,260 --> 00:00:16,830 ‫So most of your components will naturally fall 6 00:00:16,830 --> 00:00:19,530 ‫into one of three categories, 7 00:00:19,530 --> 00:00:22,770 ‫stateless or presentational components, 8 00:00:22,770 --> 00:00:26,910 ‫stateful components or structural components. 9 00:00:26,910 --> 00:00:28,650 ‫And I say naturally 10 00:00:28,650 --> 00:00:31,470 ‫because we shouldn't force our components 11 00:00:31,470 --> 00:00:34,020 ‫into one of these categories. 12 00:00:34,020 --> 00:00:37,500 ‫Now, these are all still normal React components 13 00:00:37,500 --> 00:00:40,110 ‫in our code, so just like the ones 14 00:00:40,110 --> 00:00:41,640 ‫that we have been writing. 15 00:00:41,640 --> 00:00:44,430 ‫But we can categorize them in this way 16 00:00:44,430 --> 00:00:47,400 ‫when we think about components. 17 00:00:47,400 --> 00:00:50,730 ‫There are also other categories that could be used, 18 00:00:50,730 --> 00:00:53,313 ‫but I think that these make the most sense. 19 00:00:54,270 --> 00:00:58,800 ‫So starting with stateless or presentational components, 20 00:00:58,800 --> 00:01:02,880 ‫as the name says, these don't have any state. 21 00:01:02,880 --> 00:01:06,660 ‫Usually, they are components that receive some props 22 00:01:06,660 --> 00:01:09,330 ‫and then they simply present that data 23 00:01:09,330 --> 00:01:11,430 ‫or even some other content, 24 00:01:11,430 --> 00:01:14,700 ‫and therefore the name presentational. 25 00:01:14,700 --> 00:01:17,520 ‫Many times these are quite small components, 26 00:01:17,520 --> 00:01:20,400 ‫such as the logo, num results 27 00:01:20,400 --> 00:01:23,163 ‫and movie components in our current app. 28 00:01:24,090 --> 00:01:27,330 ‫Next, stateful components are simply components 29 00:01:27,330 --> 00:01:29,820 ‫that do have state. 30 00:01:29,820 --> 00:01:33,150 ‫Now, just because these components have state, 31 00:01:33,150 --> 00:01:36,570 ‫that doesn't mean that they can't be highly reusable. 32 00:01:36,570 --> 00:01:39,780 ‫For example, the search component that we built 33 00:01:39,780 --> 00:01:44,160 ‫does have state and we could reuse this input 34 00:01:44,160 --> 00:01:47,403 ‫as many times as we wanted throughout the app. 35 00:01:48,240 --> 00:01:51,840 ‫Now finally, you can think of structural components 36 00:01:51,840 --> 00:01:56,400 ‫as pages, layouts, or screens of the application, 37 00:01:56,400 --> 00:01:58,440 ‫which are oftentimes the result 38 00:01:58,440 --> 00:02:02,280 ‫of composing many smaller components together. 39 00:02:02,280 --> 00:02:05,703 ‫And more about composition later in this section. 40 00:02:06,570 --> 00:02:09,900 ‫So these structural components can be large 41 00:02:09,900 --> 00:02:14,010 ‫and non reusable components, but they don't have to. 42 00:02:14,010 --> 00:02:18,060 ‫Structural components are sometimes quite small too. 43 00:02:18,060 --> 00:02:20,550 ‫What matters is that they are responsible 44 00:02:20,550 --> 00:02:23,280 ‫for providing some sort of structure 45 00:02:23,280 --> 00:02:27,810 ‫to applications such as pages or layouts. 46 00:02:27,810 --> 00:02:30,990 ‫Therefore, these components might not be present 47 00:02:30,990 --> 00:02:32,760 ‫in really small apps, 48 00:02:32,760 --> 00:02:36,510 ‫but you will definitely have a few structural components 49 00:02:36,510 --> 00:02:38,943 ‫as your app grows bigger and bigger.