1 00:00:01,080 --> 00:00:02,640 ‫Let's start the section 2 00:00:02,640 --> 00:00:07,323 ‫by discovering what thinking in React is actually all about. 3 00:00:08,670 --> 00:00:11,190 ‫So as you might have noticed by now, 4 00:00:11,190 --> 00:00:12,690 ‫building React applications 5 00:00:12,690 --> 00:00:15,990 ‫requires a completely new mindset 6 00:00:15,990 --> 00:00:19,470 ‫because it's just very different from building applications 7 00:00:19,470 --> 00:00:21,870 ‫with vanilla JavaScript. 8 00:00:21,870 --> 00:00:23,790 ‫So to build React apps, 9 00:00:23,790 --> 00:00:26,280 ‫you not only need to learn how to work 10 00:00:26,280 --> 00:00:28,920 ‫with the React API in practice 11 00:00:28,920 --> 00:00:32,280 ‫like with all the different functions like you state 12 00:00:32,280 --> 00:00:35,700 ‫but you also need to be able to think in React. 13 00:00:35,700 --> 00:00:39,720 ‫So you need to basically enter the React mindset. 14 00:00:39,720 --> 00:00:42,510 ‫Now, once you have both of these skills, 15 00:00:42,510 --> 00:00:44,580 ‫you will have mastered React 16 00:00:44,580 --> 00:00:46,950 ‫and you will be well on your way 17 00:00:46,950 --> 00:00:50,760 ‫to building professional React applications. 18 00:00:50,760 --> 00:00:54,660 ‫Now, what does thinking in React actually mean? 19 00:00:54,660 --> 00:00:57,300 ‫Well, while you're building an application, 20 00:00:57,300 --> 00:00:58,800 ‫thinking in React means 21 00:00:58,800 --> 00:01:01,590 ‫that you have a very good mental model 22 00:01:01,590 --> 00:01:05,340 ‫of how and when to use all the React tools 23 00:01:05,340 --> 00:01:10,340 ‫like components, state, props, general data flow, effects, 24 00:01:10,950 --> 00:01:12,930 ‫and many more. 25 00:01:12,930 --> 00:01:15,000 ‫It's also about always thinking 26 00:01:15,000 --> 00:01:17,190 ‫in terms of state transitions 27 00:01:17,190 --> 00:01:22,140 ‫rather than in element mutations as we have learned before. 28 00:01:22,140 --> 00:01:26,820 ‫Now, you can also view thinking in React as a whole process 29 00:01:26,820 --> 00:01:31,170 ‫which can help us build apps in a more structured way. 30 00:01:31,170 --> 00:01:33,510 ‫And the first step in this process 31 00:01:33,510 --> 00:01:37,200 ‫is to break the desired UI into components 32 00:01:37,200 --> 00:01:40,320 ‫and establish how these components are related 33 00:01:40,320 --> 00:01:41,640 ‫to one another, 34 00:01:41,640 --> 00:01:44,520 ‫so to establish the component tree. 35 00:01:44,520 --> 00:01:47,550 ‫This also includes thinking about reusability 36 00:01:47,550 --> 00:01:51,150 ‫and composability of components. 37 00:01:51,150 --> 00:01:54,840 ‫After that, we can start by building a static version 38 00:01:54,840 --> 00:01:56,310 ‫of the application. 39 00:01:56,310 --> 00:01:59,820 ‫So without any state and interactivity, 40 00:01:59,820 --> 00:02:01,110 ‫and this is great 41 00:02:01,110 --> 00:02:02,610 ‫because by doing this, 42 00:02:02,610 --> 00:02:05,070 ‫we do most of the coding upfront 43 00:02:05,070 --> 00:02:09,090 ‫before having to worry about state and interactivity. 44 00:02:09,090 --> 00:02:10,920 ‫That part comes next, 45 00:02:10,920 --> 00:02:15,570 ‫so in step three where we think about state. 46 00:02:15,570 --> 00:02:18,600 ‫So here we decide when we need state, 47 00:02:18,600 --> 00:02:20,760 ‫what types of state we need 48 00:02:20,760 --> 00:02:24,240 ‫and where to place each piece of state. 49 00:02:24,240 --> 00:02:28,350 ‫Then finally, we think about establishing how data flows 50 00:02:28,350 --> 00:02:30,180 ‫through the application. 51 00:02:30,180 --> 00:02:33,210 ‫This includes thinking about one-way data flow, 52 00:02:33,210 --> 00:02:35,610 ‫child-to-parent communication, 53 00:02:35,610 --> 00:02:39,030 ‫and the way global state should be accessed. 54 00:02:39,030 --> 00:02:41,040 ‫So these points, three and four, 55 00:02:41,040 --> 00:02:44,280 ‫is what we collectively call state management, 56 00:02:44,280 --> 00:02:47,670 ‫which is the main focus of this section. 57 00:02:47,670 --> 00:02:50,850 ‫Now, of course, this is not a rigid process 58 00:02:50,850 --> 00:02:53,640 ‫that we always need to follow to the letter. 59 00:02:53,640 --> 00:02:56,760 ‫In practice, there's always a lot of back and forth 60 00:02:56,760 --> 00:02:58,710 ‫between these different steps 61 00:02:58,710 --> 00:03:01,230 ‫and things are never this linear, 62 00:03:01,230 --> 00:03:04,350 ‫but it's still good to have a process like this 63 00:03:04,350 --> 00:03:06,600 ‫as an overall guideline. 64 00:03:06,600 --> 00:03:11,160 ‫Okay, now, once you really know how to think in React, 65 00:03:11,160 --> 00:03:13,770 ‫you'll be able to answer questions like 66 00:03:13,770 --> 00:03:17,640 ‫how to break up my UI design into components, 67 00:03:17,640 --> 00:03:21,630 ‫how to make some of my components truly reusable, 68 00:03:21,630 --> 00:03:24,570 ‫or how to assemble a user interface 69 00:03:24,570 --> 00:03:27,000 ‫from reusable components. 70 00:03:27,000 --> 00:03:29,610 ‫Now, we also think a lot about state, 71 00:03:29,610 --> 00:03:32,220 ‫like what pieces of state do I need 72 00:03:32,220 --> 00:03:34,890 ‫for the interactivity that I want 73 00:03:34,890 --> 00:03:38,880 ‫and where to then place each of these states, 74 00:03:38,880 --> 00:03:40,320 ‫or in other words, 75 00:03:40,320 --> 00:03:44,940 ‫what component should actually own each piece of state, 76 00:03:44,940 --> 00:03:49,410 ‫or what types of state can or should I use, 77 00:03:49,410 --> 00:03:51,690 ‫and in more general terms, 78 00:03:51,690 --> 00:03:55,143 ‫how to make my data flow through the application. 79 00:03:56,070 --> 00:03:57,870 ‫Now, as you might have noticed, 80 00:03:57,870 --> 00:04:02,220 ‫we already started to talk about some of these topics before 81 00:04:02,220 --> 00:04:04,920 ‫but I still wanted to have one section 82 00:04:04,920 --> 00:04:07,950 ‫where I really focus on some of these skills 83 00:04:07,950 --> 00:04:10,650 ‫so that you can start getting more and more 84 00:04:10,650 --> 00:04:12,900 ‫into the React mindset. 85 00:04:12,900 --> 00:04:16,500 ‫Now, of course, you will only really master these skills 86 00:04:16,500 --> 00:04:19,230 ‫through practice and writing code, 87 00:04:19,230 --> 00:04:24,230 ‫and lucky for you, we will do lots of that in this course. 88 00:04:24,420 --> 00:04:27,540 ‫But we will also take a bit of a theoretical approach 89 00:04:27,540 --> 00:04:30,630 ‫from time to time just like in this video, 90 00:04:30,630 --> 00:04:34,380 ‫because I believe that it's really, really important 91 00:04:34,380 --> 00:04:36,600 ‫that I teach you these things 92 00:04:36,600 --> 00:04:39,750 ‫besides just the React API itself. 93 00:04:39,750 --> 00:04:40,860 ‫And by doing so, 94 00:04:40,860 --> 00:04:44,910 ‫I make this course really as good as possible for you 95 00:04:44,910 --> 00:04:46,980 ‫and in my opinion, way better 96 00:04:46,980 --> 00:04:50,070 ‫than all the other React courses out there. 97 00:04:50,070 --> 00:04:52,020 ‫But anyway, let's now move on 98 00:04:52,020 --> 00:04:55,623 ‫to looking at the fundamentals of state management.